Kaip sukurti formas Figma? Figma pradedantiesiems #4

Šiame straipsnyje rasite įrankių, skirtų kurti ir keisti formas, aprašymą, kurios sudarys kiekvieną jūsų projektą. Sužinosite apie pagrindines formų redagavimo parinktis ir pažangesnes funkcijas, tokias kaip boolean grupės ir kaukių kūrimas. Kaip sukurti formas Figma? Skaitykite ir sužinokite.

Kaip sukurti formas Figma – turinys:

1. Formų pridėjimas
2. Ypatybių skydelis – Dizainas
3. Objekto redagavimas
4. Boolean grupės
5. Kaukės

Formų pridėjimas

Galite pridėti formą naudodami Formų įrankių funkciją, kurią rasite Įrankių juostoje. Ši funkcija leidžia kurti pagrindines vektorines formas: stačiakampis, linija, rodyklė, elipsė, daugiakampis, žvaigždė.

Taip pat galite kurti individualias formas naudodami Piešimo Įrankius. Galite pasirinkti Pensą arba Pieštuką.

Kaip ir atveju su rėmeliais, yra daug būdų, kaip kurti formas:

• Pasirinkę formą iš Formų įrankių sąrašo, spustelėkite Rėmelį arba Drobės plotą. Tai sukurs formą su numatytuoju dydžiu 100×100 px.
• Jei norite kontroliuoti sukurtos formos dydį, spustelėkite Rėmelį arba Drobės plotą ir laikykite nuspaudę kairįjį pelės mygtuką, tada judindami galite manipuliuoti formos dydžiu.
• Jei norite sukurti tobulą kvadratą, ratą ar daugiakampį, laikykite nuspaudę Shift klavišą, kol vilksite.

Kiekviena forma, teksto objektas ar vaizdas, kurį pridėsite prie Drobės, bus atskira sluoksnis. Tai leidžia jums keisti kiekvieno elemento individualias ypatybes.

Ypatybių skydelis – Dizainas

Objekto ypatybes galite peržiūrėti ir redaguoti Ypatybių skydelio Dizaino skirtuke. Sluoksnio tipas nustato, kokie parametrai bus rodomi čia. Dauguma parametrų yra tokie patys visų sluoksnių tipuose. Jei nepasirinksite jokio sluoksnio, Ypatybių skydelis rodys visus vietinius stilius failui ir Drobės spalvą.

Dizaino skirtuke galite pridėti šiuos parametrus:

1. Lygiavimas – lygiavimo įrankiai leidžia tinkamai suderinti sluoksnius Drobėje tarpusavyje. Šios funkcijos yra prieinamos tik pasirinkus du ar daugiau sluoksnių.

2. Pasiskirstymas ir tvarkymas – ši funkcija leidžia organizuoti sluoksnius, sukuriant vienodą tarpą tarp jų. Šios funkcijos yra prieinamos tik pasirinkus du ar daugiau sluoksnių.

3. Drobės pozicija (X ir Y) – čia galite reguliuoti sluoksnių poziciją Drobėje horizontaliame (X) ir vertikaliame (Y) ašyse.

4. Objekto matmenys (Plotis ir Aukštis) – čia galite keisti sluoksnio dydį.

5. Išlaikyti proporcijas – leidžia išlaikyti formos proporcijas keičiant dydį. Galite keisti formos aukštį arba plotį, o antrasis parametras automatiškai prisitaikys.

6. Sukimas – čia galite nustatyti rėmelio kampą.

7. Kampo spindulys – su šia funkcija galite suapvalinti rėmelio kampus.

8. Nepriklausomi kampai – nepriklausomo kampo nustatymas leidžia reguliuoti kampo spindulį kiekvienam kampui.

9. Sluoksnis (Sujungimo režimai) – čia galite nurodyti, kaip du sluoksniai turėtų susilieti. Galite taikyti tik vieną sujungimo režimą kiekvienam sluoksniui.

10. Užpildymas ir kontūras – galite taikyti užpildymus ir kontūras formoms ir teksto sluoksniams. Norėdami pridėti užpildymą ar kontūrą, pasirinkite norimą sluoksnį ir spustelėkite + ikoną. Galite pridėti kelis užpildymus ir kontūrus kiekvienam sluoksniui.

Užpildymui ir kontūrams numatytasis nustatymas yra vientisa spalva. Norėdami reguliuoti ypatybes, spustelėkite spalvų pavyzdį. Tai atvers spalvų sektorių, kur bus prieinamos šios parinktys: vientisa spalva, gradientas (linijinis, radialinis, kampinis, deimantinis) ir vaizdas.

Jei reikia daugiau keisti kontūro stilių, galite naudoti Išplėstinius kontūro nustatymus, kurie yra prieinami po trijų taškų ikona.

Naudingas patarimas: Galite įjungti ir išjungti kiekvienos aktyvaus sluoksnio ypatybės matomumą naudodami Akies ikoną. Aktyvios ypatybės bus rodomos juoda spalva, todėl jas lengvai atskirsite nuo neaktyvių.

11. Efektai – čia galite pridėti šešėlį arba neryškumą sluoksniui. Norėdami reguliuoti efekto vertes, spustelėkite Efekto nustatymus, kurie yra po saulės ikona.

12.Eksportavimo nustatymai – čia galite eksportuoti pasirinktą sluoksnį pasirinktu formatu: PNG, JPG, SVG ir PDF.

Užduotis 4.1. Planuokite savo programos sąsajos elementų išdėstymą. Pirmiausia sukurkite laidus naudodami paprastas formas.

Naudingas patarimas: Nepamirškite reguliariai suteikti kiekvienam sluoksniui tinkamus pavadinimus. Jei to neseksite, tikrai sukelsite chaosą savo sluoksniuose.

Pradėkime nuo Prisijungimo ekrano:

• Ekrano viršuje mes įdėsime kuriamos programos logotipą.
• Žemiau bus vietos rezervavimo ženklai su etiketėmis: prisijungimas ir slaptažodis. Šiuo metu galite pažymėti vietą tekstui stačiakampiu.
• Ekrano apačioje mes įdėsime prisijungimo mygtuką.

Naudingas patarimas: Jei ieškote logotipo savo projektui, apsilankykite šioje svetainėje: https://www.freepik.com/free-photos-vectors/logo ir atsisiųskite jį nemokamai.

Kiekvienas failas Freepik.com turi licencijos pranešimą. Prieš atsisiųsdami įsitikinkite, kad jo licencija leidžia jums jį naudoti, kaip jums reikia.

Taip pat galite naudoti logotipą, esantį “Logo creator” papildinyje.

Dabar spręskime apie Pagrindinį rėmelį:

• Mes įdėsime paieškos juostą ekrano viršuje.
• Žemiau bus “Geriausiai parduodami” antraštė.
• Po antrašte mes įdėsime produktų vaizdus dviem stulpeliais. Sukurkite stačiakampį, kuris atitiktų vieną stulpelį, ir kelis kartus jį nukopijuokite.
• Po kiekvieno produkto turėtų būti šiek tiek vietos jo pavadinimui ir kainai.
• Kitas mūsų sąsajos elementas bus apatinė juosta, kurioje mes įdėsime ikonėles: namai, mėgstamiausi, profilis, krepšelis.

Naudingas patarimas: Galite lengvai pridėti ikonėles prie savo projekto, kopijuodami jas iš Figma bibliotekos.

Bendruomenė. Čia rasite pavyzdinį failą: https://www.figma.com/community/file/1118814949321037573.

Tiesiog spustelėkite Gauti kopiją mygtuką ir jis atidarys Iconia failą – visiškai redaguojamą ikonų paketą su 1,300+ paruoštų naudoti ir skalę keičiančių vektorinių ikonų 6 unikaliuose stiliuose. Norėdami nukopijuoti pasirinktus ikonų, eikite į Iconia bibliotekos puslapį Sluoksnių skydelyje.

Raskite ikoną, kurią norite naudoti savo faile, dešiniuoju pelės mygtuku spustelėkite ją ir pasirinkite Kopijuoti. Tada grįžkite į savo failą, dešiniuoju pelės mygtuku vėl spustelėkite bet kur ir pasirinkite Įklijuoti čia. Kita ikonų pridėjimo galimybė yra naudoti papildinius.

Atminkite, kad sąsajos nuoseklumas yra labai svarbus. Pasirinkite vieną ikonų stilių ir laikykitės jo visur savo programoje. Vėliau taikykite tą patį principą tekstų stiliams, vaizdų dydžiams ir kitiems elementams.

Kai suplanuosite elementų išdėstymą pagrindiniame puslapyje, galite pereiti prie Produkto rėmelio:

• Ekrano viršuje mes įdėsime “Atgal” mygtuką kairėje pusėje.
• Žemiau bus didelis produkto nuotrauka.
• Nuotraukos dešiniajame kampe mes įdėsime mygtuką su “mėgstamiausio” ikona.
• Po nuotrauka mes įdėsime produkto pavadinimą ir kainą bei vietą aprašymui.
• Ekrano apačioje mes pridėsime CTA mygtuką “Pridėti į krepšelį”.

Objekto redagavimas

Galite lengvai modifikuoti visas formas naudodami įrankį Objekto redagavimas, kurį rasite Įrankių juostos viduryje. Norėdami naudoti šią funkciją, pirmiausia turite pasirinkti formą, kurią norite redaguoti.

Aktyvavus redagavimo režimą, Įrankių juostoje pasirodys naujos funkcijos, ir pamatysite kampų taškus redaguojamoje formoje. Galite spustelėti norimą kampo tašką ir vilkti jį, kad pakeistumėte formą.

Taip pat galite pridėti kitus Kampų taškus prie formos naudodami Pensą. Tai leis jums atlikti daugiau modifikacijų.

Galite laisvai lenkti formas naudodami Lenkimo įrankį. Pasirinkite Lenkimo įrankį Įrankių juostoje, tada spustelėkite pasirinktą kampo tašką.

Paišymo kibiras leidžia jums pašalinti ir atkurti formos užpildymą. Tam pasirinkite Paišymo kibirą ir tada spustelėkite redaguojamą formą.

Norėdami išeiti iš redagavimo režimo, spustelėkite Baigti.

Boolean grupės

Jei pasirinksite dvi ar daugiau formas, Boolean grupių įrankis pasirodys Įrankių juostoje. Jis leidžia kurti individualias formas, jas sujungiant, naudojant vieną iš keturių prieinamų formulių: sujungimas, atėmimas, sankirta, išskyrimas.

• su jungimo pasirinkimu – sujungia pasirinktus formas į vieną naują formą.

• atėmimo pasirinkimas – atima visas viršutines formas ir jų persidengiančias sritis iš žemiausios formos

• sankirtos pasirinkimas – nauja forma susideda tik iš persidengiančių pasirinktų formų fragmentų

• išskyrimo pasirinkimas – sukurta forma susideda tik iš pasirinktų formų fragmentų, kurie nesusikerta.

Po Boolean grupės įrankio taikymo visi pasirinkti sluoksniai sujungiami į vieną sluoksnį, tai reiškia, kad jie dalijasi užpildymo ir kontūro ypatybėmis. Galite juos sujungti su kitomis formomis ir atlikti tolesnes logines operacijas.

Užduotis 4.2. Praktikuokite modifikuoti formas su Objekto redagavimo ir Boolean grupių įrankiais. Net jei šiuo projekto etapu jums nereikia šių funkcijų, verta konsoliduoti savo žinias per praktiką. Būkite kūrybingi ir smagiai praleiskite laiką. Taip pat galite pabandyti atkurti pavyzdines formas, kurias matote toliau pateiktoje ekrano nuotraukoje. Tam sukurkite naują puslapį faile arba pridėkite objektus šalia projektų rėmelių, o tada tiesiog juos ištrinkite.

Kaukės

Kaukės leidžia rodyti tik pasirinktus vaizdo plotus ir paslėpti likusius, nekarpant. Tai reiškia, kad jokios sluoksnių dalys kaukės procese nėra pašalinamos ar modifikuojamos, todėl bet kada galite modifikuoti kaukę, jei norite parodyti kitą vaizdo dalį.

Norėdami geriau tai suprasti, galite įsivaizduoti paveikslėlio rėmelį su mažu atidarymu. Jame matysite tik dalį nuotraukos, o likusi dalis bus paslėpta, tačiau jei atidarysite rėmelį, vis tiek galėsite pamatyti visą nuotrauką.

Bet kurį sluoksnį galite naudoti kaip kaukę, pavyzdžiui, vektorines formas, teksto sluoksnius ir vaizdus. Sluoksnių tvarka yra labai svarbi. Žemiausias sluoksnis laikomas kaukės konteineriu, tai yra, atidarymu, per kurį matysite vaizdą.

Norėdami sukurti kaukę, įsitikinkite, kad sluoksniai yra tinkamai suderinti. Tada pasirinkite abu sluoksnius ir pasirinkite Naudoti kaip kaukę Įrankių juostoje.

Visos išorinės sluoksnio sritys, esančios virš konteinerio, bus paslėptos. Matomos liks tik tos sritys, kurios bus kaukės srityje.

Užduotis 4.3. Naudokite kaukes, kad pridėtumėte produktų vaizdus prie savo dizaino. Atminkite teisingą sluoksnių tvarką. Sluoksnis, kuris bus konteineris, turi būti žemiau vaizdo sluoksnio.

Naudingas patarimas: Nemokamus vaizdus savo projektams galite atsisiųsti iš svetainės https://unsplash.com.

Taip pat galite naudoti “Unsplash” papildinį.

Jūs ką tik išmokote, kaip kurti formas Figma. Taip pat skaitykite: 10 naudojimo heuristikų UX dizainui.

Jei jums patinka mūsų turinys, prisijunkite prie mūsų užimtos bičių bendruomenės Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.