Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Graafisen suunnittelun ohjelmistojen maailma on valtava ja siinä on paljon kilpailua. Figma on yksi suunnittelutyökalu, joka kilpailee UX/UI-suunnittelijoiden kärkeen ympäri maailmaa. Mutta mitä tiedät tästä intuitiivisesta työkalusta?

Vaikka se on yksinkertainen, siinä on myös oppimiskäyrä, jos olet tottunut muihin suunnittelutyökaluihin. Katsotaanpa Figmaa ja kuinka sitä käytetään. Tervetuloa Figma 101:een.

Mikä on Figma?

Jos olet työskennellyt graafisena suunnittelijana tai web-suunnittelijana viime vuosina, olet todennäköisesti kuullut Figmasta. Olet ehkä jopa käyttänyt sitä.

Figma on suunnittelutyökalu, ja siitä on jatkuvasti tullut digitaalisten suunnittelijoiden suosikki, ja se on ylittänyt verkkosuunnitteluun ja muihin vaihtoehtoihin, kuten Adobe XD: n, Adobe Photoshopin ja Sketchin. Kuitenkin, koska Adobe osti Figman vuonna 2022, saattaa tapahtua joitain muutoksia, jotka järjestävät tulostaulukon uudelleen.

On monia käyttötarkoituksia Figmalle. Sitä käytetään ensisijaisesti digitaaliseen suunnitteluun, etkä voi suunnitella CMYK-kielellä painettavaksi. Jotkut Figman tärkeimmistä käyttötavoista ovat:

  • Prototyyppien tekeminen
  • UX/UI-suunnittelu
  • Sovelluksen suunnittelu
  • Web-suunnittelu
  • Esityksen suunnittelu

Sinä pystyt käytä Figma-mockup-laajennuksia auttaa esittelemään mallejasi, muuntaa oikeita verkkosivuja Figma-malleiksi käyttämällä laajennuksia ja jopa luoda perusmallit Figma-malleja varten säästääksesi aikaa toistuvissa suunnittelutyypeissä.

Kuinka paljon Figma maksaa?

Voit luoda Figma-tilin ilmaiseksi osoitteessa Figman sivusto tai lataamalla Figma sovellus. Ilmainen tili tarjoaa toimintoja sovelluksen kaikkiin suunnittelunäkökohtiin. Voit suunnitella Figmalla ja FigJam – Figman yhteistyötyökalu.

Jos käytät Figmaa harrastajana tai ainoana freelancerina, Free Forever -versio on melkein täydellinen. Sinulla on edelleen pääsy kaikkiin laajennuksiin, voit kutsua rajattomasti yhteistyökumppaneita, käyttää rajattomasti henkilökohtaisia ​​tiedostoja ja käyttää Figmaa kaikilla alustoilla.

Vaikka Figman ilmainen versio tarjoaa enemmän kuin tarpeeksi mille tahansa tavalliselle suunnittelijalle, Figma Professional -tilauksen avulla voit kutsua tiimitovereita, työskennellä tiimikirjastoista, käyttää rajattomasti Figma-tiedostoja ja versiohistoriaa ja paljon muuta hintaan 12 dollaria kuukaudessa per toimittaja. Jos olet opiskelija tai kouluttaja, saat Figma Professionalin ilmaiseksi.

Figman käyttäminen: perusteet

Käytätpä sitten Figma-sovellusta tai selainversiota, voit helposti seurata sitä.

Kun avaat Figman, sinulle esitetään vaihtoehtoja aloittaa uusi Figma-tiedosto, uusi FigJam-tiedosto tai tuoda toisella ohjelmalla, kuten Sketchillä tai Adobe XD: llä, tehty tiedosto. Jos olet käyttänyt Figmaa aiemmin, näet myös aiemmat Figma-projektisi, joita voit avata ja käsitellä.

Figma-työtilassa liikkuminen

Uuden tiedoston avaaminen näyttää aluksi epämiellyttävältä. Toisin kuin monet muut suunnitteluohjelmat, et aloita taululla tai kankaalla, vaan täysin tyhjällä suunnittelusivulla. Mutta kun mieli on täynnä inspiraatiota, se ei jää tyhjäksi tilaksi kauan.

Vasemman yläkulman vaakavalikko alkaa merkillä Päävalikko kuvake – Figma-logo. Valitsemalla Päävalikko, voit navigoida muihin tiedostoihisi, Figman pikatoimintoihin, tyypillisiin tiedostovaihtoehtoihin ja pääsyyn laajennuksiin, widgetteihin ja kirjastoihin.

Seuraavaksi löydät Liikkua työkalu (V), kanssa Mittakaava työkalu (K) kätkeytyneenä sen alle. Nämä työkalut on tarkoitettu elementtien siirtämiseen tai suunnittelun osien skaalaus ylös tai alas. Ja näiden työkalujen oikealla puolella näet Aluetyökalut, Kehys (F), osio, ja Viipale, kätkeytyneenä yhteen.

Figmassa kehys on se, mitä muut ohjelmat voivat kutsua tauluksi tai kankaaksi. Valitse Kehys piirtääksesi mukautetun kokoisen kanvasi. Kun tämä on valittuna, oikeanpuoleinen valikko näyttää valmiita kehysvaihtoehtoja yleisille laitekokoille: älypuhelimet, tabletit, pöytäkoneet, älykellot, esitykset ja sosiaalisen median vaihtoehdot. Voit myös napsauttaa ja vetää kehystä suoraan tehdäksesi siitä minkä tahansa mukautetun koon.

Takaisin ylävasempaan valikkoon, Aluetyökalujen oikealla puolella ovat Muoto työkalut, Kynä työkalut ja Teksti työkalu. Sen jälkeen resurssit -Komponentit, Plugins, ja Widgetit-ja Käsi työkalu tiedostossasi liikkumiseen. Ja lopuksi, Kommentit työkalu, jolla voit tehdä muistiinpanoja ja tehdä yhteistyötä joukkuetovereiden kanssa.

Figma Design Menu

Kun kehys on piirretty, sen otsikon valitseminen aktivoi kehyksen valmiina suunnitteluun. Oikeanpuoleinen valikko näyttää otsikot kohteelle Design, Prototyyppi, ja Tarkastaa. Kuten nimestä voi päätellä, Suunnittelu-vaihtoehto on valikko, jota käytät kehyksen elementtien suunnitteluun.

Vaikka alkuperäinen Suunnitteluvalikko on hieman yksinkertaistettu, kun lisäät suunnitteluasi enemmän elementtejä, valikon vaihtoehdot kehittyvät. Aluksi valikko kulkee ylhäältä alas kohdistustyökalujen, mitoitustyökalujen, Automaattinen asettelu, Asetteluruudukko, Kerros, Täyttää, Aivohalvaus, Tehosteet, ja Viedä. Jotkut näistä on oletuksena pienennetty, mutta napsauttamalla + merkki, voit avata minkä tahansa valikon tai painaa sen minimoimiseksi.

Kun olet piirtänyt projektin pääkehyksen, voit käyttää muototyökaluja tai kynätyökaluja muotojen piirtämiseen tai lisää kuvien paikkamerkit, ja voit lisätä tekstiä Teksti-työkalulla tavoilla, joita olet todennäköisesti tehnyt muilla tavoilla ohjelmisto.

Kun kehyksessä on muotoja tai tekstiä, voit muokata ja suunnitella näitä elementtejä oikeanpuoleisten valikkovaihtoehtojen avulla. The Kerros valikko tarjoaa peittävyys- ja sekoitustilat; kanssa Täyttää voit lisätä värejä tai lisätä kuvia joillakin muokkausominaisuuksilla, kuten Altistuminen, Kontrasti, Lämpötila, ja enemmän.

Kun rakennat lisää elementtejä projektiisi, tasot muodostuvat vasemmalle Kerrokset valikko vieressä Omaisuus -välilehti. Voit etsiä elementin kaksoisnapsauttamalla tason otsikkoa ja päinvastoin. voit kaksoisnapsauttaa suunnitteluelementtiä löytääksesi korostetun tason. Kaksoisnapsauttamalla otsikoita voit nimetä ne uudelleen optimaalista järjestystä varten.

Figma Prototype -valikko

Oikealla puolella Design valikkovaihtoehto on Prototyyppi valikosta. Kun olet viimeistellyt suunnittelusi visuaaliset puolet ja asettanut kuvalaatikot ja tekstin sinne, missä niiden pitäisi mennä, voit käyttää prototyyppityökaluja animaatioiden ja siirtymien lisäämiseen malleihisi.

The Prototyyppi -valikon avulla voit yhdistää kehyksiä tai komponentteja yhteen siirtymäksi. Voit valita, missä järjestyksessä ja miten kukin kehys siirtyy toiseen.

Tämä toimii hyvin, jos olet Figma-esityksen tekeminen joka animoi diasta toiseen, mutta työkalun avulla voit myös asiantuntevasti visualisoida sovellus- ja verkkosuunnittelun painikkeiden tai valikoiden animaatioita. Voit lisätä useita siirtymiä sivua kohden kaikille eri asioille, jotta näet, kuinka käyttäjät sitoutuisivat verkkosivustoosi sen ollessa käynnissä.

Vaikka Figman käyttäminen verkkosivuston suunnitteluun ei ole sama asia kuin live-sivuston luominen, voit luovuttaa Figmasi Suunnittele kehitystiimillesi, joka voi luoda prototyyppivuorovaikutuksistasi todellisia animaatiomalleja sinulle verkkosivusto. Tämä tarkoittaa, että voit siirtyä sivulta sivulle klikkauksista, ajasta tai muista vuorovaikutuksista.

Figman käytön aloittaminen on helppoa

Nyt tiedät kuinka navigoida Figma-asettelussa ja kuinka perussuunnittelu- ja prototyyppityökalut toimivat. Koska Figma on niin helposti saatavilla, on aika kokeilla tätä suunnittelutyökalua ja nähdä, mitä voit luoda.