Hogyan használjuk a könyvtárakat a Figma-ban? | Figma kezdőknek #6

Hogyan lehet stílus- és komponens könyvtárakat létrehozni a Figma-ban? Hogyan használhatja őket a fájljaiban, és hogyan oszthatja meg más csapattagokkal? A választ a következő cikkben találja. A stílusok használatával könnyebb fenntartani a következetességet a csapatprojektekben. Olvasson tovább.

Könyvtárak a Figma-ban – tartalomjegyzék:

1. Stílusok
2. Komponensek
3. Stílusok és komponensek közzététele egy könyvtárban

Stílusok

Ez egy olyan tulajdonságok halmaza, amelyeket alkalmazni lehet a rétegekre a projektekben. Stílus létrehozásához először ki kell választania azt az objektumot, amelynek a tulajdonságait el szeretné menteni. Ezután kattintson a Stílusok ikonra a Tulajdonságok panelen a kiválasztott tulajdonság mellett, majd kattintson a + ikonra.

Megnyílik egy ablak, ahol meg kell adnia a létrehozott stílus nevét. Kattintson a Stílus létrehozása gombra.

A létrehozott stílusokat a Tulajdonságok panelen láthatja, amikor nincsenek kiválasztva objektumok.

A Stílusok szerkesztése panelen leírást adhat hozzá, és szerkesztheti minden stílus tulajdonságait. Valahányszor módosítja a kiválasztott stílus tulajdonságait, ezek a módosítások alkalmazásra kerülnek minden olyan objektumon, amely használja azt.

A következő stílusokat hozhatja létre:

Szín (festék) stílusok – kitöltésekhez és vonalakhoz, szövegekhez és háttérhez, sőt képekhez és gradiensekhez is.

Szövegstílusok – a szövegstílusoknak köszönhetően stílusokat definiálhat a címsorokhoz és a fő szöveghez. A szövegstílusokat alkalmazhatja egy teljes szövegtömbre, vagy csak a szöveg egy részére a tömbben. Meghatározhatja: betűtípus család, méret, sorköz, térköz.

Megjegyzés: a szövegstílusokkal nem állíthatja be a szöveg igazítását.

Hatások – itt árnyék- és elmosódási attribútumokat definiálhat.

Elrendezési rácsok – Elrendezési rácsok stílusok létrehozása hasznos, ha egy bizonyos struktúrát szeretne megismételni több projektben.

A stílus alkalmazásához az aktív rétegre kattintson a Stílusok ikonra a Tulajdonságok panelen a kiválasztott tulajdonság mellett, és válassza ki a stílust a listából.

A stílus eltávolításához az aktív rétegről kattintson a Stílusok leválasztása gombra. Ez hasznos, ha módosításokat szeretne végezni egy objektumon anélkül, hogy beavatkozna a stílusba.

6.1. feladat. Gyakorolja a stílusok létrehozását a Figma-ban. Hozzon létre stílusokat a kezdőlap szakaszcímeihez, terméknevekhez és árakhoz.

Komponensek

Ezek a tervezései építőelemei, amelyeket újra felhasználhat. Lehetnek ikonok, gombok vagy összetettebb elemek. A komponensek segítenek fenntartani a tervezései következetességét, és lehetővé teszik, hogy gyorsan módosításokat végezzen több fájlban és projektben.

Komponens létrehozásához először ki kell választania azokat a rétegeket, amelyek a komponenst alkotják, majd kattintson a Komponens létrehozása gombra a Eszköztáron.

A komponens rétegei egy külön keretbe lesznek ágyazva, és lila színnel kiemelve, így könnyen megkülönböztetheti őket más rétegektől a Réteg panelen.

A komponensek automatikus neveket kapnak. A Komponensek fülön átnevezheti a komponenseket. Csakúgy, mint más rétegek esetében, dupla kattintással a névre. A Tulajdonságok panelen egy komponens kiválasztása után hozzáadhat egy komponens leírást és Dokumentációs linket a csapattagok számára.

A komponenseket a Eszközök fülön tekintheti meg a Réteg panelen.

6.2. feladat. Gyakorolja a komponensek létrehozását a Figma-ban. Hozza létre a következő komponenseket:

• egy keresősáv – amely egy helykitöltőből, egy nagyító ikonból és a “Keresés” szövegből áll,
• egy alsó sáv – amely egy téglalapból és ikonokból áll,
• CTA gombok – amelyek egy téglalapból és szövegből állnak.

Stílusok és komponensek közzététele egy könyvtárban

Amikor stílusokat és komponenseket hoz létre, csak a jelenlegi fájlban férhet hozzájuk. Ahhoz, hogy stílusokat és komponenseket használhasson más fájlokban, közzé kell tennie őket a könyvtárban. A stílusok megosztásának lehetősége elérhető az Eszköztáron – bontsa ki a menüt a fájl neve mellett, és kattintson a Stílusok és komponensek közzététele gombra.

Most megtanulta, hogyan használja a könyvtárakat a Figma-ban. Olvassa el ezt is: Mit csinál egy UX tervező?

Ha tetszik a tartalmunk, csatlakozzon aktív méheink közösségéhez a Facebookon, Twitteren, LinkedIn-en, Instagramon, YouTube-on, Pinterest-en.