Светът на софтуера за графичен дизайн е огромен и има много конкуренция. Figma е един инструмент за дизайн, който се състезава към челното място за UX/UI дизайнери по целия свят. Но какво знаете за този интуитивен инструмент?
Въпреки че е просто, има и крива на обучение, ако сте свикнали с други инструменти за проектиране. Нека да разгледаме Figma и как да я използваме. Добре дошли във Figma 101.
Какво е Figma?
Ако сте работили като графичен дизайнер или уеб дизайнер през последните няколко години, вероятно сте чували за Figma. Може дори да сте го използвали.
Figma е инструмент за проектиране и стабилно се превръща в предпочитан за дигиталните дизайнери, надхвърляйки опции като Adobe XD, Adobe Photoshop и Sketch, за уеб дизайн и др. Въпреки това, тъй като Adobe придоби Figma през 2022 г, може да има някои промени, които ще разместят класацията.
Има много приложения за Figma. Използва се предимно за дигитален дизайн и не можете да проектирате в CMYK за печат. Някои от основните употреби на Figma включват:
- Прототипиране
- UX/UI дизайн
- Дизайн на приложението
- уеб дизайн
- Дизайн на презентация
Можеш използвайте плъгини за макет на Figma за да ви помогне да покажете вашите дизайни, конвертирайте реални уеб страници в дизайни на Figma използване на добавки и дори създаване главни шаблони за дизайни на Figma за да ви спести време в повтарящи се типове дизайн.
Колко струва Figma?
Можете да създадете Figma акаунт безплатно на Сайт Figma или като изтеглите Приложение Figma. Безплатният акаунт предоставя функционалност за всички аспекти на дизайна на приложението. Можете да проектирате с Figma и FigJam—инструмент за сътрудничество на Figma.
Ако използвате Figma като любител или като самостоятелна свободна практика, версията Free Forever е почти перфектна. Все още имате достъп до всички добавки, можете да каните неограничен брой сътрудници, да използвате неограничен брой лични файлове и да използвате Figma от всички платформи.
Докато безплатната версия на Figma предлага повече от достатъчно за всеки стандартен дизайнер, абонаментът за Figma Professional ви позволява да поканете съотборници, работете от екипни библиотеки, имайте достъп до неограничен брой файлове на Figma и хронология на версиите и още, за $12 на месец на редактор. Ако сте студент или преподавател, можете да получите безплатно Figma Professional.
Как да използвате Figma: Основите
Независимо дали използвате приложението Figma или версията на браузъра, можете лесно да следвате.
Когато отворите Figma, ще ви бъдат представени опции за стартиране на нов файл Figma, нов файл FigJam или импортиране на файл, създаден в друга програма, като Sketch или Adobe XD. Ако сте използвали Figma преди, ще видите и вашите предишни Figma проекти, които можете да отворите и да работите по тях.
Навигация в работното пространство на Figma
Отварянето на нов файл първоначално изглежда невдъхновяващо. За разлика от много други дизайнерски програми, вие не започвате с артборда или платното, а с напълно празна страница за дизайн. Но с ум, пълен с вдъхновение, няма да остане празно място за дълго.
Горното ляво хоризонтално меню започва с Главно меню икона—логото на Figma. Избирането на Главно меню, можете да навигирате до другите си файлове, бързи действия на Figma, типични опции за файлове и достъп до плъгини, уиджети и библиотеки.
След това ще намерите Ход инструмент (V), с Мащаб инструмент (К), сгушен под него. Тези инструменти са за преместване на елементи или мащабиране на части от вашия дизайн нагоре или надолу. И вдясно от тези инструменти ще видите инструментите за регион, Кадър (Е), Раздел, и Нарязани, сгушени заедно.
Във Figma рамката е това, което други програми могат да наричат артборд или платно. Изберете Кадър за да нарисувате вашето платно с персонализиран размер. Когато бъде избрано, дясното меню ще представи предварително готови опции за рамки за общи размери на устройства: смартфони, таблети, настолни компютри, смарт часовници, презентации и опции за социални медии. Можете също така да щракнете и плъзнете рамката си директно, за да я направите произволен персонализиран размер.
Върнете се в горното ляво меню, вдясно от инструментите за регион са Форма инструменти, Химилка инструменти и Текст инструмент. Последвано след това от Ресурси—Компоненти, Плъгини, и Джаджи— и ръка инструмент за придвижване във вашия файл. И накрая, Коментари инструмент, който е чудесен за правене на бележки и сътрудничество със съотборници.
Менюто за дизайн на Figma
С изготвена рамка, избирането на нейното заглавие активира рамката, готова за проектиране. Дясното меню показва заглавия за Дизайн, Прототип, и Инспектирайте. Както подсказва името, опцията Design е менюто, което ще използвате, за да проектирате елементите на вашата рамка.
Докато първоначалното меню за дизайн е донякъде опростено, докато добавяте повече елементи към вашия дизайн, опциите на менюто се развиват. В началото менюто върви отгоре надолу с инструменти за подравняване, инструменти за оразмеряване, Автоматично оформление, Решетка на оформлението, Слой, Напълнете, Удар, Ефекти, и Експортиране. Някои от тях са минимизирани по подразбиране, но чрез щракване върху + знак, можете да отворите всяко меню или хит – за да го минимизирате.
След като начертаете основната си рамка за проекта, можете да използвате инструменти за фигури или инструменти за писалка, за да рисувате форми или добавете контейнери за изображения и можете да добавите текст с помощта на инструмента за текст по начини, които вероятно сте правили по друг начин софтуер.
След като имате форми или текст върху рамката, използвайте различните опции от дясното меню, за да редактирате и проектирате тези елементи. The Слой менюто предлага непрозрачност и режими на смесване; с Напълнете можете да добавите цвят или да вмъкнете изображения с някои функции за редактиране като Излагане, Контраст, температура, и още.
Докато изграждате повече елементи във вашия проект, слоевете ще се оформят отляво Слоеве меню до Активи раздел. Можете да щракнете двукратно върху заглавие на слой, за да намерите елемента и обратно; можете да щракнете двукратно върху елемент от дизайна, за да намерите маркирания слой. Двойното щракване върху заглавията ви позволява да ги преименувате за оптимална организация.
Менюто на прототипа на Figma
Вдясно от Дизайн опцията от менюто е Прототип меню. След като финализирате визуалните аспекти на вашия дизайн и зададете полета с изображения и текст там, където трябва да отидат, можете да използвате инструментите за прототип, за да добавите анимации и преходи към вашите дизайни.
The Прототип менюто ви позволява да свързвате рамки или компоненти заедно като преходи. Можете да изберете кой ред и как всеки кадър преминава към друг.
Това работи чудесно, ако сте създаване на Figma презентация който анимира от един слайд към следващия, но инструментът също така експертно ви позволява да визуализирате анимации за бутони или менюта за приложения и уеб дизайн. Можете да добавите няколко прехода на страница за различни неща, така че да видите как потребителите биха се ангажирали с вашия уебсайт, когато е на живо.
Въпреки че използването на Figma за проектиране на уебсайт не е същото като създаването на уебсайт на живо, можете да предадете своя Figma дизайн на вашия екип от разработчици, който може да пресъздаде вашите прототипни взаимодействия като реални анимационни проекти за вашия уебсайт. Това означава, че можете да преминавате от страница на страница от кликвания, време или други взаимодействия.
Да започнете с Figma е лесно
Вече знаете как да навигирате в оформлението на Figma и как работят основните инструменти за проектиране и прототип. Тъй като Figma е толкова лесно достъпна, време е да поработите с този инструмент за проектиране и да видите какво можете да създадете.