Figma вважається одним із найпопулярніших редакторів для UX/UI-дизайну. Програму використовують для швидкого створення макетів веб-сайтів та їх презентацій, причому як стартапи, так і великі компанії: Netflix, Zoom, Discort та Stripe.
Це кроссплатформена дизайнерська програма з відкритим вихідним кодом, користується великим попитом у веб-дизайнерів, верстальників, UX-дослідників, маркетологів, керівників проектів, розробників мобільних додатків, сайтів, лендингів та інтернет-магазинів.
Ми дізналися для вас, що ж такого особливого у Figma, чим вона приваблює користувачів і як допомагає digital-фахівцям.
Що таке Figma?
Figma – це редактор для верстки графічних зображень. Дизайнери та digital-фахівці використовують його для відтворення елементів інтерфейсу, створення інтерактивних макетів, прототипів та векторних файлів.
Раніше кожен дизайнер із команди встановлював спеціалізований редактор, на зразок Adobe Illustrator, скачував макет, налаштовував інтерфейс, вносив коригування та пересилав файл на перевірку. І так повторювалося щоразу, коли вносилися правки. Figma діє інакше.
6 причин використовувати Figma
У Figma відкритий вихідний код. Програма працює в розрахованому на багато користувачів режимі на будь-якому пристрої. Для повноцінної роботи дизайнеру потрібне стабільне інтернет-з’єднання та будь-який браузер.
Режим спільної роботи
Figma – це єдиний графічний редактор, у якому одночасно можуть працювати декілька дизайнерів. Ця функція особливо важлива під час роботи над великим завданням. Програма створює єдине місце для всіх доданих користувачів:
- дизайнери малюють деталі продукту всередині єдиного вікна;
- верстальники вносять коригування та редагують файл;
- менеджер проекту відстежує етапи роботи та звертає увагу на проблеми в режимі онлайн;
- розробники вносять виправлення та коригують роботу дизайнера до етапу погодження з клієнтом. Вони можуть оцінити обсяг майбутніх робіт та скоригувати дизайн одразу, щоб уникнути проблем при реалізації.
Всі дизайнери мають право залишати коментарі та ставити питання всередині дизайнерського вікна. Одночасна робота спрощує етап узгодження та скорочує час, що витрачається на листування у чатах. Коментарі, залишені в програмі, не губляться — програма зберігає їх в історії файлу.
Додаток має гнучкі налаштування приватності:
- дизайнер дає доступ до окремого файлу або ділиться всіма вкладками, що відносяться до конкретного проекту;
- дизайнер коригує видимість для окремих учасників;
- Верстальник може показати проект користувачу, який не має облікового запису в Figma, щоб обговорити проблему або представити проект.
Файли зберігаються у хмарі
Програма автоматично зберігає макети у власному хмарному сервісі та зберігає їх 30 днів. За потреби до них можна повертатися, їх можна дублювати та редагувати. Внесені редагування зберігаються автоматично.
Якщо проект довгограє, завантажуйте макети як звичайний документ і зберігайте на комп’ютері. Щоб не заплутатися, підписуйте кожну версію та робіть короткий опис.
Кросплатформеність
Дизайнери можуть відкрити макет з комп’ютера, ноутбука, планшета чи смартфона з будь-якою операційною системою. Вони просто авторизуються під своїм профілем у веб-версії програми за наявності стабільного інтернет-з’єднання, а на робочому пристрої використовують встановлений редактор, завантажений з офіційного сайту Figma.
Великий функціонал
Безкоштовної версії достатньо для повноцінної самостійної роботи дизайнера. Автори можуть:
- використовувати всі функції редактора, зокрема розширені функції малювання — Smart Selection, Vector Networks, Arc Tool;
- одночасно працювати над проектом з одним колегою, залишати коментарі до прототипів та макетів, показувати їх клієнтам;
- переглядати історію змін макета за датою та часом протягом усього періоду роботи над ним та 30 днів після;
- вести одночасно три проекти;
- використовувати плагіни та шаблони.
У версії Professional дизайнери залишають аудіо-коментарі всередині редактора, діляться прототипами без надання доступу до вихідного файлу та працюють у закритому режимі. Різні фахівці можуть одночасно вносити зміни до проекту, а кількість учасників не обмежена. Це зручно, коли команда працює над великим проектом.
У версії Organization дизайнер працює в окремій гілці та поєднує зміни з вихідним файлом у самому кінці. Figma попередить за наявності конфліктуючих змін та дозволить вибрати, що вбудовувати. У модельному режимі видно всі створені гілки. Команда працює централізовано під одним обліковим записом: керівник налаштовує єдиний вхід SALM та керує підготовкою через SLIM.
Інтеграція з іншими програмами
При перенесенні проектів з Sketch або Zeplin якість не втрачається: Figma зберігає зображення шрифтів, зображення та криві. Верстальники можуть підключити сервіс до месенджера Slack, Confluence і т.д.
Історія редагування
Усі редагування, що вносяться до проекту, зберігаються в історії змін. Figma автоматично зберігає файл відредагований більше 30 хвилин тому. Щоб не чекати, ви можете зберегти його вручну, відкоригувати назву або зробити опис конкретної проблеми.
Історію версій можна переглянути в розділі меню File → Show version history.
У безкоштовній версії історія змін зберігається місяць, у платній програмі зберігаються всі коригування з початку роботи.
Базовий функціонал
Функціонал Figma простий та інтуїтивно зрозумілий:
- можна робити прототипи та проводити usability-тестування;
- можна одночасно створювати кілька проектів: у безкоштовній версії не більше трьох, платній — необмежено;
- можна редагувати файл у мобільній версії, не завантажуючи програму на пристрій. Застарілий комп’ютер не є проблемою, швидкість роботи в програмі залежить від швидкості інтернету, а не від операційної системи;
- є вбудовані інструменти – фрейми, сітки, плагіни та інші. Вони спрощують процес редагування дизайну та прискорюють роботу.
У Figma є бібліотека із безкоштовними компонентами. Якщо ви хочете додати однакові деталі в різні частини макету та змінити стиль, проблема легко вирішувана: натисніть на іконку F у лівому верхньому кутку та виберіть Edit → Select all with same. Програма знайде об’єкти з ідентичними шрифтами, співвідношення сторін, колір заливки і т.д.
Сервіс виділить усі однакові елементи за вибраним параметром.
Фрейми
Figma має заготовки під більшість популярних форматів: Apple Watch, смартфонів, ноутбуків, планшетів, фреймів для соцмереж, А4 листів та інших рішень.
Фрейми в цьому додатку мають деякі особливості:
- Фрейм поєднує об’єкти, всередині рамки може бути інша рамка. Шари — це складники кадру: текст, геометричні фігури, зображення.
- Для розтягування кадру утримуйте кнопку Сmd для MacOS або Ctrl для Windows, інакше файл розтягнеться непропорційно. Дизайнерам не потрібно запам’ятовувати розміри пристроїв при адаптації продукту до іншого формату. Просто вибирайте потрібний девайс і дійте.
- Для виклику кадру натисніть F.
Сітки
Сітка — головний помічник верстальника. У Figma вона включається у правій панелі меню у режимі Layout Grid. Для керування потрібні лише дві кнопки:
- “+” – щоб додати сітку;
- Grid — щоб налаштувати параметри: розмір, колір, прозорість;
- Ctrl+G — щоб перейти між завданнями.
Можна змінювати властивості сітки, надавати форму стовпця та рядкового ряду, поєднувати кілька макетів. Для одного продукту дизайнер може створити необмежену кількість сіток і зробити розмітку з більш складною структурою.
Плагіни
Figma розроблялася як програма для дизайну інтерфейсу, тому у всіх її версіях є спеціальні плагіни. Вони автоматизують рутинні завдання та прискорюють роботу верстальників.
Вони знаходяться в бібліотеці на офіційному сайті та на головному екрані онлайн-версії. Якщо ви вже працюєте над продуктом, натисніть на логотип Figma, розташований у лівому верхньому кутку, виберіть Community (Спільнота) → Explore → Plugins.
Як використовувати Figma для розробки продуктів?
На етапі створення та тестування продукту необхідно перевірити, що всі деталі макета у робочій області реалізовані. Це можна зробити за допомогою декількох інструментів:
- прототипування та usability-тестування;
- елементи інтерфейсу;
- векторна графіка.
Прототипування та usability-тестування
Прототипи – це імітація робочого продукту, з робочими елементами керування, можливістю переходити на сторінки та контактувати з інтерфейсом. З їх допомогою можна відкрити робочий файл у вікні браузера, на стадії розробки проаналізувати досвід користувача і показати свою роботу колегам.
Прототипування — це функція, яка відповідає за перегляд інтерфейсу при відкриванні різних типів пристроїв: виберіть у правому меню розділ Prototype → Device і виберіть потрібні параметри екрана.
Device — це функція для вибору пристрою, на якому з’явиться прототип. Від неї залежить плавність прокручування та зовнішній вигляд рамки.
Щоб відкрити налаштування конкретного продукту, натисніть на кадр, який потрібно перетворити на прототип.
При розробці прототипів верстальники закладають функціонал продукту, оцінюють зручність сценаріїв, розроблених на карті сайту. Прототипи дозволяють:
- створювати адаптивну сітку та прототип для мобільної версії;
- тестувати списки, що випадають, popup-вікна з функцією затемнення фону, анімацію, статичність при скролінгу та інші властивості. Більшість цих функцій є лише у Figma – це відрізняє редактор від інших графічних програм;
- автоматизувати процедуру створення посилань.
Щоб зробити прототип, звершайте карту екранів у правильній послідовності, перейдіть в розділ Prototype, виберіть елемент інтерфейсу, додайте та налаштуйте інтерактиви. Щойно прототип готовий, тестуйте ідею колегах.
У режимі Prototype дизайнери тестують ідеї та показують їх клієнту. Щоб надіслати файли розробникам, зробіть доступ до файлу. У режимі відтворення дизайнер може працювати з CSS-стилями елементів інтерфейсів.
UI-елементи
Елементи інтерфейсу – це те, що створює зовнішній вигляд продукту: кнопки, іконки, форми зворотного зв’язку тощо. У Figma можна змінити колір, шрифт, форму і додати анімацію (яка, як ми пам’ятаємо, чудово покращує юзабіліті лендінгу):
- клікабельні кнопки;
- списки, що розкриваються;
- анімовані popup.
Векторна графіка
Сервіс працює з векторними об’єктами: їх можна експортувати у форматі SVG, імпортувати з Adobe Illustrator або Sketch, зберігаючи всі налаштування.
Висновок
Figma – це онлайн-редактор, який працює без попереднього встановлення. Він зручний для створення нескладних прототипів, відтворення інтерфейсу сайтів та мобільних додатків. Для розширення можливостей сервісу використовуйте вбудовані плагіни або створюйте власні.