Що таке Figma і навіщо вона потрібна?

Figma це хмарний редактор інтерфейсів. У ньому малюють макети сайтів і мобільних застосунків, збирають клікабельні прототипи, ведуть дизайн-системи й передають готовий дизайн розробникам. Працює просто у браузері, тому над одним файлом можуть одночасно сидіти кілька людей і бачити правки одне одного в реальному часі.

Що таке Figma і чим вона відрізняється від графічних редакторів

Photoshop та Illustrator створювалися для картинок: фотографій, ілюстрацій, логотипів. Figma створювалася для інтерфейсів — екранів, кнопок, форм, станів. Тому в ній є те, чого немає у графічному редакторі: компоненти, які оновлюються всюди одразу, автоматичні відступи, стани елементів і режим перегляду, у якому макет можна натискати, як справжній застосунок.

Друга важлива відмінність — файл живе не на вашому комп'ютері, а в хмарі. Посилання на макет можна надіслати замовнику чи розробнику, і вони відкриють актуальну версію без експорту, архівів і листування з файлами на 200 МБ.

Навіщо потрібна Figma: що в ній роблять

• Макети сайтів і застосунків — від лендінга до великого сервісу, одразу в кількох розмірах екрана.
• Прототипи — екрани зв'язують переходами, і макет можна клікати, щоб перевірити логіку до того, як написано код.
• Дизайн-системи — бібліотека кольорів, шрифтів і компонентів, щоб усі екрани виглядали як один продукт.
• Каркаси екранів — швидкі чернетки, вайрфрейми, на яких обговорюють структуру без кольорів і картинок.
• Прості анімації — показати, як відкривається меню чи зміниться кнопка після натискання.
• Передача розробникам — з макета видно розміри, кольори, відступи й назви стилів, тому верстка не вгадує значення.

Плюси й мінуси Figma

За що її обирають:

• Зрозумілий інтерфейс — перший макет можна зібрати в перший же день.
• Спільна робота в реальному часі: дизайнер, замовник і розробник в одному файлі.
• Нічого не треба встановлювати — працює у браузері на Windows, macOS і Linux.
• Готові шаблони й плагіни під типові задачі.

Де вона незручна:

• Потрібне стабільне інтернет-з'єднання — без мережі робота стає складнішою.
• Для складної графіки, ілюстрацій і обробки фото настільні редактори досі сильніші.
• Дуже великі файли з сотнями екранів починають підгальмовувати у браузері.

Інструменти та плагіни

Базовий набір — інструменти малювання й редагування, компоненти, стилі кольорів і тексту, автоматичні відступи. Поверх цього є плагіни: вони підставляють тестові дані, генерують іконки, перевіряють контраст, виганяють макет у код. Саме плагіни роблять Figma адаптованою під різні проєкти — від банера до великого UX-дослідження.

З чого почати новачку

1. Зареєструйтеся на офіційному сайті Figma через електронну пошту або акаунт Google.
2. Створіть перший файл і повторіть екран сайту, який вам подобається, — так швидше за все засвоюються інструменти.
3. Розберіться з компонентами й автоматичними відступами: це дві речі, які відрізняють акуратний макет від набору прямокутників.
4. Зв'яжіть два-три екрани переходами й подивіться прототип у режимі перегляду.
5. Складіть маленьку дизайн-систему: кольори, шрифти, кнопки.

Де вчитися працювати у Figma

Figma — основний інструмент UI/UX-дизайнера, але сама програма ще не професія: потрібні типографіка, колір, сітки, композиція й розуміння користувача. На курсі веб дизайну Figma вивчають саме в цьому контексті — разом з Miro, Illustrator і Webflow, за 3 місяці, з випускним проєктом у портфоліо на Behance.