UI/UX дизайн

Що таке Figma?

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

Спільна робота — головна відмінність Figma від старіших редакторів. Файл зберігається в хмарі, посилання завжди веде на актуальну версію, коментарі залишають прямо на макеті, і питання «де останній варіант?» більше не виникає.

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

Де застосовується

У Figma проходить майже весь шлях макета: від перших начерків і вайрфреймів до бібліотеки компонентів, клікабельного прототипу і передачі в розробку. Розробник відкриває той самий файл за посиланням і бере звідти розміри, кольори, шрифти і готовий CSS для елемента.

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

Приклад

Замовник хоче змінити макет у четвер увечері: відкриває посилання і залишає коментар біля потрібної кнопки. Дизайнер бачить його вранці в тому самому файлі. Не треба пересилати архіви і з’ясовувати, яка версія остання.

Часті запитання

Чи безкоштовна Figma?

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

Чим Figma відрізняється від Photoshop?

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

Чи можна отримати з Figma готовий код?

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

Чи потрібен для Figma потужний комп’ютер?

Ні, редактор працює в браузері і не вимагає потужної відеокарти. Гальмувати Figma починає лише на дуже важких файлах із сотнями екранів і великою кількістю зображень. Це вирішують поділом проєкту на кілька файлів.

Навчання UI/UX-дизайну в OWU

Опануйте професію UI/UX-дизайнера на практичних курсах із менторами та реальними проєктами.

Обрати курс