През последните няколко години популярността на Figma бързо нарасна и не е чудно. Безплатният за използване облачен софтуер е лесно достъпен на всички устройства и не изисква никакви вноски или изтегляния. От проектиране на интерфейси на мобилни приложения до производство на публикации в социалните медии, с Figma можете да експериментирате с всякакви функции за графичен дизайн и да разширите уменията си.
За още по-голяма последователност във вашите дизайни може да помислите за използването на компоненти в работата си. Компонентите са елементи на потребителския интерфейс (UI), които могат да се използват в множество файлове на Figma. Те често могат да бъдат силно допълнение към вашите дизайни и да подобрят цялостното им качество.
Независимо дали сте нов във Figma или го използвате от известно време и не сте сигурни как да използвате успешно компонентите, ние сме тук, за да ви помогнем.
В тази статия ще разгледаме как да използвате компонентите на Figma и как това може да ви помогне да повишите работата си.
Ако се интересувате да научите повече, продължете да четете.
Как да използвате компоненти във Figma
Овладяването на използването на компоненти може да ви помогне с организация и последователност при работа с Figma. Тези елементи на потребителския интерфейс могат да се използват отново и отново в различни дизайнерски проекти, върху които може да работите. Компонент може да бъде направен в икона, бутон и други, в зависимост от вашия проект.
Страхотното при въвеждането на компоненти във вашето изживяване с Figma е, че ви спестява много време. Всички промени, които може да направите в един компонент, автоматично се актуализират за останалите. Това може да е особено полезно, ако имате кратък срок или си сътрудничите с други дизайнери и искате да ускорите работния си процес.
Като започнете, ще забележите, че има две странични ленти от всяка страна на основното платно, което използвате. Можете да използвате инструменти от някоя от тези странични ленти, за да правите редакции на вашия проект.
Страничната лента от дясната страна ви дава достъп до всички настройки на прототипа и ви позволява да коригирате или редактирате всякакви свойства на вашите компоненти. Въпреки това страничната лента вляво ви представя слоевете, активите и страниците, използвани във вашия проект. Това се нарича панел със слоеве.
Компонентите трябва да бъдат въведени в работата ви доста рано. Те ви помагат да поддържате последователност във вашите проекти и ви позволяват да ускорите скоростта, с която правите промени във вашите проекти. Има два ключови елемента на компонента:
- Главният (или Основният) компонент (икона с четворен диамант)
- Компонент на екземпляра (единична икона на диамант)
Основни компоненти
Преди всичко друго, първо трябва да създадете главния компонент. За да направите това, следвайте стъпките по-долу:
- Щракнете с десния бутон върху вашия слой, група или рамка.
- Изберете Създаване на компонент.
- От лявата страна на екрана ще видите падащо меню, което казва Компонент. Кликнете върху това.
- Оттук ще забележите меню, в което можете да правите промени във вашия компонент и да препроектирате стилове в проекти.
Друг начин за създаване на главен компонент е да използвате преките пътища:
- Опции + команда + K за Mac
- Ctrl + Alt + K за Windows
Разбира се, този метод работи само ако използвате Figma на компютър.
Незабавни компоненти
Незабавният компонент е копие на вашия главен компонент. Когато главният компонент се редактира по някакъв начин, екземплярът автоматично се актуализира, за да съответства на направените промени. Ако създавате уебсайт, този инструмент може да бъде особено полезен и да ви спести много време. Например, дните на ръчно влизане във всичките ви компоненти, за да се повторят едни и същи редакции, ще бъдат отминали. Вместо това Figma ги променя всички вместо вас.
Може да дойде моментът, в който сте създали множество екземпляри и бихте искали да се върнете към вашия главен компонент, за да можете да направите бърза промяна на всичките си компоненти. За да получите достъп до основния си компонент, направете следното:
- Щракнете с десния бутон върху произволен екземпляр.
- Щракнете върху Go to Master Component.
- Главният компонент ще се появи в страничната лента от лявата страна.
Докато правенето на компоненти един по един е сравнително лесно; можете да ускорите нещата, като ги направите на едро. За да направите това, изпълнете следните стъпки:
как да отключите котва в word 2013
- От вашия панел със слоеве изберете слоевете, където искате да създадете компоненти.
- Щракнете върху иконата със стрелка надолу, разположена до иконата на главния компонент в панела на слоевете.
- Изберете Създаване на множество компоненти от наличните опции.
- Оттам Figma ще направи компонент за всеки слой на рамката.
Допълнителни ЧЗВ
Как да заменя или отделя екземпляр?
Възможно е да има моменти, когато искате да направите промени в свойствата на конкретен екземпляр, без да променяте всички останали. Можете да направите вариации на различни компоненти. Във Figma това се нарича преодоляване.
След като замените екземпляр, всички промени, направени в главния компонент, няма да го засегнат. За да направите това, вижте стъпките по-долу:
1. Щракнете върху компонента на вашия екземпляр.
2. От панела Properties от дясната страна на екрана изберете Component.
3. От падащото меню, което се показва, изберете Detach Instance.
Ако искате да изчистите замяната, изберете компонента, след което изберете Нулиране на инстанция от горната средна лента на екрана.
Какво да направя, ако случайно изтрия своя главен компонент?
Когато прекарвате цял ден в редактиране на съдържание, понякога може случайно да се изплъзнете и да изтриете нещо важно, като вашият главен компонент. Не се страхувайте, възстановяването е толкова лесно, колкото 1-2-3. Просто следвайте тези основни стъпки, за да върнете този липсващ главен компонент:
1. Отидете до един от екземплярите на компонента.
2. В панела Properties от дясната страна на екрана изберете Restore Master Component.
3. Главният компонент ще се появи незабавно.
Как да добавя описание за моите компоненти?
Когато създавате вашите компоненти, добавянето на описание и връзка към документацията към всеки от тях може да ви помогне да навигирате по-добре в проекта си. Също така е удобно за всички сътрудници, с които може да работите, да имат достъп до допълнителни бележки. За да добавите описание, отидете на панела Свойства от дясната страна на страницата и изберете Добавяне на описание.
След като направите това, всички външни зрители могат да получат достъп до тази информация, като отидат в панела за проверка в дясната странична лента.
Как да импортирам компоненти във Figma?
Можете да импортирате всякакви файлове в компонент Figma. Най-лесният начин да направите това е от вашия работен плот. Просто следвайте тези стъпки:
1. В Figma отворете страницата, където искате да импортирате файл.
2. От вашите файлове изберете конкретния файл, който искате да използвате.
3. Плъзнете и пуснете избрания файл във вашата страница Figma.
4. Когато приключите с това, щракнете върху Готово.
Пътят към успеха
Figma е чудесен инструмент за използване, независимо дали сте нов в дизайна или сте в играта от години. Софтуерът предлага удобна за начинаещи система за редактиране, при която дизайнерите могат да създават съдържание от нулата или да използват помощта на шаблон, ако е необходимо.
Разбирането как да използвате успешно компоненти на Figma може да ви спести много време при изпълнение на проект за проектиране. Като се научите как да създавате висококачествена компонентна система, вие ще можете да израснете като дизайнер. Не само това, но също така може да ви помогне да поддържате последователен работен поток през цялото си творческо пътуване и да позволи на всички бъдещи сътрудници лесно да намерят работата ви.
Опитвали ли сте да използвате Figma за вашите творчески проекти? Как открихте използването на компоненти? Кажете ни повече за вашия опит в секцията за коментари по-долу.
