Що таке Figma: можливості та принципи роботи

Хто хоча б раз працював у Google Docs, навряд чи захоче працювати в класичному документі Word. Адже набагато зручніше зберігати та редагувати документи онлайн. При чому працювати над статтями може одразу ціла група людей, та й відкривати їх можна з будь-якого пристрою (ПК, смартфон та ін.). У 2016 р. для веб-дизайнерів було розроблено схожий інструмент — Figma. Цей онлайн редактор дозволяє проектувати сайти, програми та інші дизайнерські продукти. Нині це найпопулярніший інструмент дизайнерів. У статті розповімо все про особливості Figma та як почати працювати з ним.

Що таке Figma

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

Заходити до Фігми можна через браузер або завантажити на свій ПК (підходить для роботи Windows та Mac). Якщо ви вибрали другий варіант, можна редагувати проекти в режимі офлайн і при підключенні інтернету всі зміни синхронізуються.

У цьому редакторі можна створювати:

• векторні ілюстрації;
• іконки, меню, вікна, кнопки та інші елементи інтерфейсу;
• інтерактивні прототипи мобільних додатків та сайтів.

Де завантажити Figma?

Щоб розпочати роботу у Figma, достатньо зайти на офіційний сайт редактора (https://www.figma.com). При бажанні працювати онлайн, достатньо натиснути на “Try Figma for free”, якщо виникло бажання встановити софт, то оберіть пункт “Get desktop app”.

Не варто качати Фігму з підозрілих сайтів, тому що цілком можливо нарватися на вірусні джерела.

Переваги Figma для роботи

Популярність даного кроссплатформенного онлайн-редактора зростає з кожним днем. Які ж переваги у Figma? Розкажемо трохи докладніше.

Вихідники документів зберігаються у хмарі

Всі робочі файли редактора зберігаються у хмарі, а не на вашому комп’ютері. Вам не потрібно переживати за їх збереження та необхідність шукати у “Нова папка 39” макет “Фінал 22”. Всі зміни Figma автоматично зберігаються. А щоб почати роботу в редакторі, досить просто зайти до свого облікового запису.

Командна робота над макетами

Ми вже порівняли принцип роботи Figma з Google Docs: доступ до перегляду та редакції над макетом доступний відразу всій команді. Такий підхід дозволяє учасникам краще розуміти поставлене завдання та працювати над ним комплексно. Наприклад, поки дизайнер розробляє прототип програми, копірайтер працює над текстами.

Інструмент безкоштовний для індивідуальних користувачів

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

Скільки коштує Figma

У безкоштовній версії Фігма практично немає обмежень щодо функціоналу, проте саме від вартості підписки і залежать можливості командної роботи:

Безкоштовна	Доступно: прототипування, доступ для перегляду та коментарів, атрибути коду, зберігання документів (всього 30 днів), імпорт документів. З обмежень немає спільної редакції документів.
$12	Є доступ до редагування документів, зберігається вся історія версій (без обмежень), можливість створювати особисті проекти з відкритим доступом для інших користувачів, створити бібліотеку з UI. Відмінний варіант для роботи в команді.
$45$45	Можливість створити команди всередині проекту, завантажувати шрифти та давати до них доступ та інші можливості, регулювати доступ до документів за посиланням, зберігати авторство та ін. Підійде великим організаціям.

Як почати працювати з Figma

Пройшовши реєстрацію, на пошту прийде лист із посиланням на розділ “Допомога”. Тут є відеоуроки, форум та інші ресурси для швидкого вивчення редактора. Загалом інтерфейс зрозумілий – зверху панель інструментів, зліва розташована панель із шарами, а праворуч – властивості.

Родзинка редактора в тому, що на початку роботи з’являються повідомлення з важливими підказками. Вони й допомагають зорієнтуватися у сервісі.

Як навчитися працювати у Figma

Насправді розібратися з Figma не так складно, але при необхідності можна переглянути відеоуроки на Youtube:

• “Школа дизайну UX Mind School”.
• “Наука Дизайну”.

Також можна скачати електронну книгу “Посібник з Figma” від Олександра Окуньова. Автор розглядає такі теми: огляд інтерфейсу, градієнти, перо та векторні мережі, компоненти, корекція кольорів та ін.

Існують і телеграм канали, де можна знайти поради та новини Фігма:

• Фігма-чат. Тут користувачі редактора спілкуються між собою. Дають практичні поради та допомагаютьодин одному.
• Figma Design Channel. Цей канал офіційний. Тут є новини та поради щодо роботи з редактором.
• Figma Tips. На каналі публікують новини та підказки, а також важливі огляди функціоналу.

Можливості Figma

Говорити про переваги Фігма можна довго і нескінченно, але краще одразу перейти до доступних можливостей редактора.

Прототипування

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

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

Компоненти

Компоненти – це повторювані UI елементи. Їх можна створювати з іконок, полів, форм, блоків, заголовків та ін. У Фігма можна створювати два типи елементів:

• Основний (Master components).
• Залежний (Instances).

Щоб створити компонент, достатньо просто вибрати відповідну функцію “Створити компонент”. У такому разі у вас вийде основний компонент, а якщо ви копіюєте його і кудись перетягнете, він стане залежним. До речі, зробити компонент залежним можна:

• утримуючи Alt, перетягнути в потрібне місце;
• використовувати команду Dublicate;
• за допомогою класичного копіпасту.

Векторні сітки

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

Вбудоване коментування, редагування та доступ

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

Також користувачі можуть обговорювати будь-який елемент у проекті та залишати коментарі. Всі ці корисні функції для команди дозволяють працювати швидко та злагоджено.

Контроль версій

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

Щоб відкрити історію версій, достатньо у меню, що випадає, вибрати відповідну опцію. На панелі з’явиться історія змін.

Обмеження Figma

Так як Фігма створена для веб-дизайнерів, важливо відзначити обмеження з якими вони можуть зіткнутися:

1. Робота із поліграфією. Тут немає можливості перемикати розмірну сітку на см/мм, а також немає СМYK палітри. Тому, якщо ви створюєте банер або листівку, створений у редакторі файл доведеться завантажити в іншу програму, яка призначена для поліграфії.
2. Немає можливості імпортувати макети із Photoshop. Якщо виникла така гостра необхідність, потрібно перевести їх у формат Sketch і лише потім перенести до Фігми.

Висновок

Попри те, що Figma — нова програма, її популярність зростає з кожним днем. Багато UI/UX-дизайнерів вже не можуть обійтися без неї. Основна перевага редактора в тому, що ним можна скористатися як онлайн, так і завантаживши на свій ПК. Користувачі також наголошують на тому, що можна спільно працювати над проектом і саме з цієї причини багато хто обирає цей сервіс. А решту переваг можна оцінити, просто розпочавши роботу з Фігма.

Питання та відповіді

Які основні можливості надає Figma?

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

Які переваги має Figma, порівняно з іншими інструментами для дизайну?

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

Які можливості прототипування надає Figma?

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