Jei bent kartą teko dirbti su dizaino komanda arba pačiam bandyti sukurti aplikacijos maketą, tikriausiai jau girdėjai apie Figma. Šis įrankis per pastarąjį dešimtmetį tapo tarsi neoficialiu standartu UI/UX dizaino pasaulyje, išstumdamas senesnius sprendimus kaip Sketch ar Adobe XD. Ir tai nėra atsitiktinumas – Figma pasiūlė kažką, ko trūko visiems kitiems: darbą naršyklėje, realaus laiko bendradarbiavimą ir gebėjimą dirbti nepriklausomai nuo operacinės sistemos.
Šiame straipsnyje pereisiu per pagrindinius dalykus, kuriuos reikia žinoti pradedant – nuo pačios sąsajos iki praktinių gudrybių, kurios sutaupys valandas darbo.
Kodėl visi staiga persėdo į Figma
Prieš kokius dešimt metų dizaineriai gyveno atskiruose pasauliuose – kiekvienas su savo failu, savo versija, savo eksportuotais PNG paveikslėliais, kuriuos reikėdavo siųsti Slack’u ar el. paštu. Figma šitą chaosą sutvarkė paprastu būdu: viskas vyksta debesyje. Nereikia siųsti failų, nereikia laukti, kol kolega baigs redaguoti ir išsaugos versiją – visi mato tą patį dokumentą tuo pačiu metu, tarsi dirbtų su Google Docs, tik vietoj teksto – vektoriniai elementai.
Antras dalykas, kodėl Figma taip greitai užkariavo rinką – ji veikia tiesiog per naršyklę. Nesvarbu, ar turi Mac, Windows, ar net Linux mašiną – atidarai Chrome ar bet kurią kitą naršyklę, prisijungi ir dirbi. Yra ir desktop aplikacija tiems, kam patinka atskiras langas, bet iš esmės skirtumo funkcionalumo prasme beveik nėra.
Pirmieji žingsniai: sąsaja, kuri iš pradžių gąsdina
Atidarius Figma pirmą kartą, gali apimti lengvas šokas – šoninės juostos, sluoksniai, savybių panelė dešinėje, įrankių juosta viršuje. Bet iš tiesų viskas sudėliota gana logiškai, tik reikia porą valandų, kad smegenys priprastų prie išdėstymo.
Kairėje pusėje matai sluoksnių (layers) medį – ten rodoma visa hierarchija, kas yra kokiame elemente. Viduryje – pati drobė (canvas), kur ir vyksta kūryba. Dešinėje – savybių panelė, kur keiti spalvas, dydžius, šriftus, efektus. Viršuje esanti įrankių juosta leidžia pasirinkti, ką kurti: stačiakampį, tekstą, komponentą ar tiesiog žymeklį pasirinkimui.
Patarimas pradedantiesiems – neskubėk viską įsiminti iš karto. Figma turi begalę klaviatūros trumpinių (shortcuts), ir jų mokymasis vyksta natūraliai, per praktiką. Pavyzdžiui, R sukuria stačiakampį, T – teksto lauką, F – rėmelį (frame). Šie trumpiniai per savaitę tampa refleksu.
Frames, ne artboards – terminologijos skirtumai
Jei anksčiau naudojai Sketch ar Adobe XD, žinai terminą „artboard”. Figma naudoja „frame” – ir tai nėra vien pavadinimo skirtumas. Frame’ai Figma yra kur kas lankstesni – jie gali turėti automatinį išdėstymą (auto layout), gali reaguoti į turinio kiekį, gali būti įdėti vienas į kitą kaip konteineriai.
Būtent auto layout funkcija yra viena iš tų dalykų, kurie iš tikrųjų pakeičia darbo procesą. Įsivaizduok, kad kuri mygtuką su tekstu viduje. Be auto layout, jei pakeisi teksto kiekį, teks rankiniu būdu koreguoti mygtuko dydį. Su auto layout mygtukas automatiškai prisitaiko prie turinio, panašiai kaip flexbox veikia CSS pasaulyje. Tai, beje, nėra atsitiktinumas – Figma kūrėjai sąmoningai rėmėsi web technologijų logika, nes žinojo, kad daugelis dizainerių galiausiai perduoda savo darbą programuotojams, kurie kuria realiuose naršyklės aplinkose.
Komponentai ir stiliai – kodėl neverta jų ignoruoti
Vienas dažniausiai daromų klaidų pradedantiesiems – kūrimas „nuo nulio” kiekvieną kartą. Nori mygtuko? Nupiešei stačiakampį, pridėjai tekstą, nudažei. Kitame ekrane vėl reikia mygtuko – ir vėl iš naujo, tik šiek tiek kitokio atspalvio, nes pamiršai tikslią hex spalvos reikšmę.
Čia į pagalbą ateina komponentai (components) ir stiliai (styles). Sukūrus vieną mygtuką kaip pagrindinį komponentą, visos jo kopijos (instances) automatiškai atsinaujina, kai keiti originalą. Tai reiškia, kad jei vėliau nuspręsi pakeisti mygtuko spalvą ar šriftą, užtenka pakeisti vieną kartą – ir pasikeitimas atsispindės visur, kur tas komponentas naudojamas.
Panašiai veikia ir stiliai – spalvų, tekstų, šešėlių bibliotekos. Užuot rankiniu būdu vedus hex kodą kiekvieną kartą, sukuri stilių pavadinimu, tarkim, „Primary/Blue”, ir tiesiog pasirenki jį iš sąrašo. Tai ne tik greičiau, bet ir apsaugo nuo neatitikimų, kai vienas elementas šiek tiek kitokio atspalvio nei likę.
Rekomendacija – jei kuri bet kokį didesnį projektą, iš karto sukurk bazinę dizaino sistemą: spalvų paletę, tipografijos stilius, pagrindinius komponentus (mygtukus, laukelius, korteles). Investuotas laikas atsipirks jau po kelių dienų.
Bendradarbiavimas realiu laiku – tikroji Figma stiprybė
Grįžtant prie to, kas iš tiesų išskiria Figma iš konkurentų – tai galimybė keliems žmonėms dirbti prie to paties failo vienu metu. Matai kolegos žymeklį judant, matai jo pakeitimus akimirksniu, gali palikti komentarus tiesiog ant konkretaus elemento.
Komentavimo funkcija ypač naudinga dirbant su klientais ar programuotojais – užuot rašius ilgus el. laiškus su paaiškinimais „tas mygtukas trečiame ekrane turėtų būti didesnis”, tiesiog paspaudi ant to mygtuko ir palieki komentarą tiksliai toje vietoje.
Taip pat verta paminėti „FigJam” – Figma šeimos narį, skirtą smegenų šturmui, diagramoms, minčių žemėlapiams. Jei komanda dirba nuotoliniu būdu, FigJam gali pakeisti fizinę baltą lentą, ant kurios visi rašo lipnius lapelius.
Prototipavimas – kai statiškas dizainas atgyja
Sukurti gražius ekranus – tik pusė darbo. Antra pusė – parodyti, kaip vartotojas judės tarp tų ekranų. Būtent tam skirtas Figma prototipavimo režimas.
Principas paprastas – pažymi elementą (pvz., mygtuką), nutempi rodyklę į kitą frame, pasirenki sąveikos tipą (paspaudimas, hover, drag) ir animacijos stilių (išnykimas, slydimas, „smart animate”). Rezultatas – interaktyvi prototipo versija, kurią gali paleisti tiesiog naršyklėje ir bandyti taip, tarsi tai būtų tikra aplikacija.
„Smart Animate” funkcija ypač verta dėmesio – ji automatiškai animuoja perėjimus tarp panašių elementų skirtinguose frame’uose, sekdama jų pavadinimus sluoksnių medyje. Tai reiškia, kad jei turi mygtuką, kuris viename ekrane yra kairėje, o kitame – dešinėje, Figma pati sukurs sklandžią animaciją tarp šių dviejų pozicijų, jei tik sluoksnių pavadinimai sutampa.
Dažniausios pradedančiųjų klaidos
Praleidus laiko su naujokais, pastebi tam tikrus pasikartojančius dalykus. Pirma – ignoruojamas sluoksnių tvarkymas. Failas su šimtais elementų, vadinamų „Rectangle 47” ar „Group 12”, tampa košmaru po kelių savaičių. Verta įprasti pavadinti sluoksnius aiškiai iš karto, kai juos kuri.
Antra klaida – per didelis noras viską padaryti „pikselio tikslumu” pačioje pradžioje, prieš išsiaiškinant bendrą struktūrą. Geriau pirma sudėlioti grubų karkasą (wireframe), susitarti dėl struktūros, o tik po to gilintis į spalvas, šriftus ir detales.
Trečia – nepasinaudojimas bendruomenės (Community) resursais. Figma turi milžinišką biblioteką nemokamų šablonų, ikonų rinkinių, UI kitų (kaip Material Design ar iOS komponentai). Nėra prasmės piešti telefono ikonos nuo nulio, kai kažkas jau sukūrė visą rinkinį, kurį gali tiesiog nusikopijuoti į savo failą.
Kelias toliau: nuo maketo iki kodo
Baigiant norisi grįžti prie praktinės pusės – ką daryti, kai maketas jau paruoštas ir laikas perduoti programuotojams. Figma turi įmontuotą „Inspect” skiltį, kurioje programuotojas mato tikslius matmenis, spalvų kodus, tarpus tarp elementų ir net CSS kodo fragmentus. Tai ženkliai sumažina nesusipratimų skaičių tarp dizaino ir programavimo komandų – nebereikia spėlioti, ar tarpas tarp elementų yra 16 ar 20 pikselių.
Jei tik pradedi kelią su Figma, patariu nesistengti iškart perprasti visų funkcijų. Pradėk nuo paprasto – sukurk kelis frame’us, pabandyk auto layout, susikurk vieną komponentą ir jį pakeisk, pamatyk, kaip atsinaujina kopijos. Tada pereik prie prototipavimo, sujunk kelis ekranus ir paleisk peržiūros režimą. Kiekvienas šis žingsnis natūraliai atves prie kito, o po mėnesio ar dviejų reguliaraus naudojimo pastebėsi, kad trumpiniai jau spaudžiami automatiškai, o sluoksnių medis nebeatrodo kaip nesuprantama abrakadabra.
Ir dar vienas dalykas, kurį verta įsiminti – Figma nuolat atnaujinama, tad tai, kas šiandien atrodo sudėtinga ar neįmanoma, po pusmečio gali turėti paprastą sprendimą per naują funkciją. Sekti jų blog’ą ar bendruomenės naujienas – neblogas įprotis, jei nori išlikti su naujausiais įrankiais rankose, o ne kartoti seną darbo eigą, kurią kažkas jau seniai pakeitė paprastesniu būdu.
