Figma juhend

Figma veebilehe leiad siit: Figma

Figma on disainimise tööriist mille abil saab luua prototüüpe, kujundada kasutajaliideseid ja teha koostööd teiste disaineritega. Figma on veebipõhine ja töötab kõikidel platvormidel.


Uue projekti tegemine Figmas

  1. Loo kasutaja Figmas

../_images/FigmaStart.png
  1. Tee uus tiim, vajadusel lisa tiimiliikmete e-mailid

../_images/FigmaCreateProject.png
  1. Tee uus disaini fail

../_images/FigmaCreateProject2.png

Frame

Frame on kujunduse alus, millele saab hakata lisama kujunduselemente. Figmas saad valida, mis platvormi jaoks disaini tegema hakkad. Selleks tuleb klõpsata alt Frame ikoonil ja siis valida sobiv platvorm phone, tablet, watch või muu sobiv. Platvormi alt valida sobiv seade. Kui ükski suurus ei sobi, siis on võimalik luua endale sobiv frame.

../_images/Frame.png

Ülesanne: Loo uus frame ja vali Phone ja Iphone 16


Shape Tool

Shape Tool võimaldab luua enda kujunduselemente.

../_images/ShapeTool.png

Ülesanne: Vali alt Shape Tool ja ristkülik. Tee ristkülik ja lisa see päisena varem loodud frame peale. Ristkülikut saad teha suuremaks ja väiksemaks kui valid nurga ja lohistad. Samuti saad muuta suurust, asukohta ja värvi paremal oleval tööriistaribal.

Teksti lisamine

Text Tool võimaldab lisada teksti.

../_images/Texttool.png

Ülesanne: Vali alt ribalt Text. Lisa päise vasakule poole tekst "Tooted" ja paremale "Ostukorv".

Pildi lisamine

Pildi lisamiseks vali sobiv pilt internetist, tee ctrl-c ja ctrl-v Figmasse. Pildi suuruse korrektseks muutmiseks võta kinni pildi nurgast ja hoia all shift klahvi.

Pilte saab lisada ka enda arvutist. Selleks saab näiteks valida fill alt mõni muu pilt. Fill abil saab lisada Shape Toolis olevatele kujunduselementidele taustapilte.

../_images/pildilisamine.png

Ülesanne: Lisa 3 pilti internetist ja sobita need päise alla.

Autolayout

Tihti tekib olukordi, kus on vaja kujunduselemente paigutada nii, et need oleksid üksteise suhtes korrektselt paigutatud. Selleks on sobilik kasutada Autolayout funktsiooni. Elementide lisamiseks vali vajalikud elemendid (shift+click).

Vali elemendid ja veendu, et pildid oleksid Frame sees (nt Iphone 16 sees).

../_images/autolayout.png

Autolayout võimalus on mitme koha peal, vali üks neist.

../_images/autolayout2.png

Autolayout võimaldab valida kuidas elemendid paigutatakse. Valime ülevalt alla ja keskel.

../_images/Autolayout3.png

Uue pildi lisamisel on see nüüd kohe korrektselt paigutatud. Olemasolevaid elemente saab ka lihtsasti ümber tõsta (lohistades).

../_images/autolayout4.png

Ülesanne: Pane enne lisatud pildid Autolayout abil korrektselt paika. Veendu, et pildid oleksid Frame sees.

Component

Component võimaldab luua korduvkasutatavaid elemente.

Vali elemendid ja vajuta Create component.

../_images/component.png

Asenda vana päis. Selleks Tee ctrl+c ja ctrl+v loodud Component päise peale (All kast tekstiga Component 1). Lohista uus päis õigesse kohta. Lisa uus Frame. Tee uuesti ctrl+c ja ctrl+v loodud Component päise peale. Ja lohista see õigesse kohta.

../_images/component2.png

Nüüd kui muudad Component päist, siis muutub see kõikjal, kus see on kasutusel.

../_images/component3.png

Ülesanne: Tee päisest Component. Proovi muuta näiteks Component päise värvi ja vaata, kuidas värv igalpool muutub.

Vertical-Scroll

Vertical-Scroll on kasulik, kui kogu sisu ei mahu ekraanile ära. Variant 1 - Tee ekraan lihtsalt alt pikemaks.

Mahutame kõik rattad ekraanile. Auto layout on juba olemas ja see teeb asja lihtsamaks.

../_images/hscroll.png

Vajuta present ja vaata. Kõik rattad mahtusid ära, aga päis kaob ära.

../_images/hscroll2.png

Lisame päisele fixed.

../_images/hscroll3.png

Variant 2 - Lisa kastile overflow vertical

Teeme nii et korraga näeb ühte ratast. Tee kast ühe ratta kõrguseks ja lisame clip content ja align top center

../_images/hscroll4.png

Prototype vaates valime overflow vertical. Paneme present ja testime.

../_images/hscroll5.png

Ülesanne: Lisa rohkem pilte enne loodud Auto layout kasti ja lisa verical scroll. Lisa päisele fixed.

Horizontal-Scroll

Horizontal-Scroll on kasulik, kui kogu sisu ei mahu ekraanile ära.

Tee koopia piltidest ja lohista see teise Frame peale. Paremalt tööriistaribalt vali Horizontal-layout ja Align left.

../_images/vscroll.png

Vali Overflow Horizontal parem olevalt tööriistaribalt. Ja testi vajutades Present nuppu (jälgi, et oled ikka õiges vaates).

../_images/vscroll2.png

Ülesanne: Lisa horizontal scroll teisele vaatele.

Nüüd on sul olemas põhitõed, kuidas Figmas disainida. Soovitav on proovida erinevaid funktsioone ja katsetada.

Rohkem infot: Figma for beginners