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
Loo kasutaja Figmas
Tee uus tiim, vajadusel lisa tiimiliikmete e-mailid
Tee uus disaini fail
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.
Ülesanne: Loo uus frame ja vali Phone ja Iphone 16
Shape Tool¶
Shape Tool võimaldab luua enda kujunduselemente.
Ü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.
Ü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.
Ü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).
Autolayout võimalus on mitme koha peal, vali üks neist.
Autolayout võimaldab valida kuidas elemendid paigutatakse. Valime ülevalt alla ja keskel.
Uue pildi lisamisel on see nüüd kohe korrektselt paigutatud. Olemasolevaid elemente saab ka lihtsasti ümber tõsta (lohistades).
Ü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.
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.
Nüüd kui muudad Component päist, siis muutub see kõikjal, kus see on kasutusel.
Ülesanne: Tee päisest Component. Proovi muuta näiteks Component päise värvi ja vaata, kuidas värv igalpool muutub.
Navigeerimisskeem / Prototype¶
Navigeerimisskeem võimaldab lisada interaktiivsust prototüübile. Nupud, pildid, kastid saab teha interaktiivseks.
Lisame võimaluse liikuda kahe vaate vahel. Kui enne olime Design vaates, siis nüüd valime Prototype vaate. Sinised plussid tekivad. Valime "ostukorv" ja klikime plussi peal.
Lohista nool teise Frame peale. Ja vajuta present nuppu. Uus aken avaneb ja saad oma prototüüpi testida.
Tip: lisa navigeerimisskeem päise Componenti, siis töötab navigeerimisskeem kõikide päistega.
Ülesanne: Lisa navigeerimisskeem kahe vaate vahele.
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.
Vajuta present ja vaata. Kõik rattad mahtusid ära, aga päis kaob ära.
Lisame päisele fixed.
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
Prototype vaates valime overflow vertical. Paneme present ja testime.
Ü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.
Vali Overflow Horizontal parem olevalt tööriistaribalt. Ja testi vajutades Present nuppu (jälgi, et oled ikka õiges vaates).
Ü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