Pagrindiniai projekto nustatymai | Figma pradedantiesiems #3

Šiame straipsnyje aptarsime pagrindinius projekto nustatymus Figma, tai yra viską, ką turite žinoti prieš pradėdami kurti dizainą. Paaiškinsime, kas yra Rėmai, Išdėstymo tinklelis ir Liniuotės. Skaitykite toliau, kad sužinotumėte daugiau.

Pagrindiniai projekto nustatymai Figma – turinys:

1. Rėmai
2. Išdėstymo tinklelis
3. Liniuotės

Pagrindiniai projekto nustatymai Figma

Pirmiausia turite pasirinkti Canvas sritį, kurioje sukursite savo dizainus. Tam skirtas Rėmo įrankis. Jį rasite Įrankių juostoje. Įjungę Rėmo įrankį, turite keletą rėmo kūrimo galimybių.

• spustelėkite Canvas, kad sukurtumėte numatytąjį rėmą su 100×100 matmenimis

• spustelėkite ir vilkite Canvas, kad sukurtumėte rėmą su pasirinktiniais matmenimis

• naudokite išskleidžiamąjį meniu dešinėje šoninėje juostoje, kad pasirinktumėte rėmo išankstinį nustatymą

Pridėję ir pasirinkę rėmą, turite prieigą prie jo Ypatybių paneled.

a) Canvas pozicija (X ir Y) – čia galite nurodyti rėmo poziciją Canvas horizontalioje (X) ir vertikalioje (Y) ašyje.

b) Objekto matmenys (Plotis ir Aukštis) – čia galite pakeisti rėmo dydį

c) Apriboti proporcijas – tai leidžia išlaikyti rėmo proporcijas keičiant dydį. Taip galite keisti rėmo aukštį arba plotį, o antrasis parametras automatiškai prisitaikys.

d) Keisti dydį, kad tilptų – ši funkcija leidžia jums pakeisti rėmo dydį, kad jis atitiktų turinį.

Naudingas patarimas: Taip pat galite rankiniu būdu pakeisti rėmo dydį: paimkite rėmo kraštą arba kampą (kursorius taps juodu dvigubu rodyklė), tada vilkite, kad gautumėte pageidaujamą dydį.

e) Portretas ir Peizažas – čia galite pakeisti rėmo orientaciją į vertikalią arba horizontalią

f) Pasukimas – tai leidžia jums reguliuoti rėmo kampą

g) Kampų spindulys – dėka šios funkcijos galite suapvalinti rėmo kampus, kad sukurtumėte minkštesnius kraštus

h) Nepriklausomi kampai – nepriklausomų kampų nustatymas leidžia jums reguliuoti kampų spindulį kiekvienam kampui.

i) Apkirpti turinį – tai leis jums paslėpti bet kokius objektus, kurie išsikiša už rėmo ribų

j) Automatinis išdėstymas – tai leidžia jums kurti reaguojančius rėmus

k) Išdėstymo tinkleliai – ši funkcija padeda sukurti struktūrizuotą vartotojo sąsają

l) Užpildymas – naudojant šią parinktį galite užpildyti rėmą spalva, gradientu arba nuotrauka

m) Kontūras – tai padeda pridėti kontūrus prie rėmo. Taip pat galite naudoti Išplėstinius kontūro nustatymus, kurie randami po trijų taškų piktograma.

n) Efektai – čia galite pridėti šešėlį arba neryškumą rėmui. Spustelėkite Efekto nustatymų piktogramą, kad reguliuotumėte šešėlio nustatymus.

o) Eksportuoti – čia galite eksportuoti savo rėmą į šiuos formatus: PNG, JPG, SVG ir PDF.

Virš kiekvieno rėmo Canvas rodomas jo pavadinimas. Norėdami jį pakeisti, spustelėkite jį du kartus. Galite kopijuoti rėmus kartu su jų turiniu ir įklijuoti juos į Canvas tiek kartų, kiek norite.

Užduotis.3.1

Pradėkite dirbti prie projekto pasirinkdami tinkamą rėmo dydį. Naudingas patarimas: Jei nežinote, koks turėtų būti jūsų rėmo dydis, geras pasirinkimas būtų naudoti vieną iš populiariausių ekrano dydžių. Daugiau informacijos rasite https://gs.statcounter.com/screen-resolution-stats.

Šiame vadove sukursime e. prekybos mobilųjį programėlę, todėl pasirinkime vieną iš dažniausiai naudojamų išmaniųjų telefonų raiškų – 360×640 px.

Paruošime 3 projektus kartu

• prisijungimo ekranas (Prisijungti)
• pagrindinis puslapis (Pagrindinis)
• produkto nusileidimo puslapis (Produktas)

Pridėję rėmą, iškart jį nukopijuokite ir tinkamai pavadinkite kiekvieną ekraną, kad failas būtų tvarkingas.

Išdėstymo tinklelis

Išdėstymo tinklelis yra horizontalios ir vertikalios linijos (stulpeliai arba eilutės) sistema, kuri padeda jums tiksliai suderinti elementus jūsų rėmuose. Tinkamai nustatytas tinklelis tikrai palengvins jūsų darbą ir pagreitins visą dizaino procesą. Yra du būdai nustatyti išdėstymo tinklelius jūsų dizainui:

1. galite įjungti tinklelio peržiūrą net prieš pradėdami kurti dizainą ir naudoti paruoštus tinklelio išdėstymus (jei tokių yra jūsų bibliotekoje) arba sukurti savo,
2. taip pat galite pradėti kurti dizainą pirmiausia ir nustatyti tinklelius vėliau, remdamiesi sukurtais elementais.

Naudingas patarimas: Jei esate pradedantysis dizaineris, rekomenduojame taikyti išdėstymo tinklelius bet kuriam projektui. Nėra nieko blogiau už visiškai tuščią darbo erdvę.

Galite pridėti Išdėstymo tinklelius prie aktyvaus rėmo Ypatybių paneled. Turite 3 parinktis: tinklelis, stulpeliai, eilutė. Galite pasirinkti kelias parinktis vienu metu.

Galite reguliuoti kiekvieno tinklelio nustatymus Išdėstymo tinklelio nustatymų paneled. Bet kuriuo metu galite įjungti arba išjungti tinklelio matomumą spustelėdami Akies piktogramą.

Naudingas patarimas: Jei nežinote, kurį išdėstymo tinklelio pasirinkimą pasirinkti savo projekte, galite naudoti Tinklelio sistemos papildinį, kuris tai padarys už jus.

Užduotis 3.2. Nustatykite išdėstymo tinklelius savo projekte. Šio projekto tikslais pasirinkome Stulpelius ir nustatėme šias vertes:

• Skaičius 2 (stulpelių skaičius)
• Atstumas 20 (stulpelių atstumas nuo ekrano krašto)
• Tarpa 30 (atstumas tarp stulpelių)

Liniuotės

Liniuotės yra dar viena naudinga funkcija, kuri padės jums suderinti elementus faile ir išlaikyti tvarką. Norėdami įjungti Liniuočių peržiūrą, spustelėkite Pagrindinį meniu, tada Peržiūra ir Liniuotės.

Liniuotės matomos viršuje ir kairėje Canvas. Su šia funkcija galite kurti vertikalias ir horizontalias linijas (gaires) – spustelėkite ir laikykite pasirinktą liniuotę, tada perkelkite kursorių į Canvas sritį. Pasirodys plona raudona linija, kurią galite perkelti. Galite sukurti tiek gairių, kiek norite.  Lengvai galite ištrinti nereikalingas linijas – tiesiog pasirinkite liniją (pasirinkta linija taps mėlyna), tada spustelėkite Ištrinti.

Užduotis 3.3. Eksperimentuokite su liniuočių pridėjimu. Jos bus naudingos derinant elementus.

Jūs ką tik sužinojote apie pagrindinius projekto nustatymus Figma. Taip pat skaitykite: AI pagalbiniai pokalbių robotai.

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