Klaudia Kowalczyk
Как да създадете стилове и библиотеки с компоненти в Figma? Как да ги използвате във вашите файлове и да ги споделяте с други членове на екипа? Ще намерите отговора в следващата статия. Чрез използването на стилове е по-лесно да се поддържа последователност в екипните проекти. Четете нататък.
Библиотеки в Figma – съдържание:
Стилове
Това са набори от свойства, които могат да бъдат приложени към слоеве в проектите. За да създадете стил, първо трябва да изберете обекта, чиито свойства искате да запазите. След това кликнете на иконата за стилове в панела със свойства до избраното свойство, след което кликнете на + иконата.
Ще се отвори прозорец, в който ще трябва да въведете името на стила, който създавате. Кликнете Създаване на стил.
Ще видите създадените стилове в панела със свойства, когато няма избрани обекти.
В панела Редактиране на стилове можете да добавите описание и да редактирате свойствата на всеки стил. Всяка промяна, която направите в свойствата на избрания стил, ще бъде приложена към всички обекти, които го използват.
Можете да създадете следните стилове:
Цветови (боя) стилове – за запълване и контури, текст и фонове, и дори за изображения и градиенти.
Текстови стилове – благодарение на текстовите стилове можете да определите стилове за заглавия и основен текст. Можете да приложите текстови стилове към целия блок текст или само към част от текста в блока. Можете да определите: шрифт, размер, височина на реда, разстояние.
Забележка: с текстовите стилове не можете да зададете подравняване на текста.
Ефекти – тук можете да определите атрибути за сянка и размазване.
Мрежи за оформление – създаването на мрежи за оформление стилове е полезно, ако искате да дублирате определена структура в множество проекти.
За да приложите стил към активния слой, кликнете на иконата за стилове в панела със свойства до избраното свойство и изберете стила от списъка.
За да премахнете стил от активния слой, кликнете на Откачване на стилове. Това е полезно, когато искате да направите промени в обект, без да се намесвате в стила.
Задача 6.1. Практикувайте създаването на стилове в Figma. Създайте стилове за заглавия на секции на началната страница, имена на продукти и цени.
Компоненти
Това са строителните блокове на вашите дизайни, които можете да използвате повторно. Те могат да бъдат икони, бутони или по-сложни елементи. Компонентите помагат да поддържате дизайните си последователни и ви позволяват бързо да правите промени в множество файлове и проекти.
За да създадете компонент, първо трябва да изберете слоевете, които ще съставят компонента, и след това да кликнете на Създаване на компонент в Лентата с инструменти.
Слоевете на компонента ще бъдат вградени в специална рамка и подчертавани в лилаво, така че лесно да можете да ги различите от другите слоеве в панела със слоеве.
Компонентите получават автоматични имена. Можете да преименувате компонентите в таба “Слоеве”. Както и в случая с другите слоеве, два пъти кликнете върху името. След като изберете компонент в панела със свойства, можете да добавите описание на компонента и линк за документация за членовете на екипа.
Можете да видите компонентите в таба “Активи” в панела със слоеве.
Задача 6.2. Практикувайте създаването на компоненти в Figma. Създайте следните компоненти:
- търсачка – състояща се от плейсхолдър, икона на лупа и текст “Търсене”,
- долна лента – състояща се от правоъгълник и икони,
- CTA бутони – състоящи се от правоъгълник и текст.
Публикуване на стилове и компоненти в библиотека
Когато създавате стилове и компоненти, имате достъп до тях само в текущия файл. За да използвате стилове и компоненти в други файлове, можете да ги публикувате в библиотеката. Опцията за споделяне на стилове е налична в Лентата с инструменти – разширете менюто до името на файла и кликнете на Публикуване на стилове и компоненти.
Току-що научихте как да използвате библиотеки в Figma. Четете също: Какво прави UX дизайнерът?
Ако харесвате нашето съдържание, присъединете се към нашата активна общност на Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.
Klaudia Kowalczyk
Графичен и UX дизайнер, който предава в дизайна това, което не може да бъде изразено с думи. За него всяка използвана цвят, линия или шрифт имат значение. Страстен е към графичния и уеб дизайна.
