fbpx
Обзор Figma

Figma – що це? Огляд онлайн-сервісу + лайфхакі

Figma – онлайн-сервіс для розробки інтерфейсів та прототипів. Інструмент для веб-дизайнерів та розробників. Розробляйте інтерфейси та дизайн веб-сайтів, програм та мобільних додатків онлайн спільно з командою.

Час, коли для створення дизайну використовували лише Photoshop, минули. Сьогодні на озброєнні веб-дизайнера є безліч різних інструментів. Наша команда “дисігнерів” в один голос називають улюбленим онлайн-сервіс Figma – інструмент для розробки прототипів та інтерфейсів разом із командою в онлайн-режимі.

Можливості онлайн-сервісу Figma

Своєю зручністю Фігма зобов’язана таким функціональним можливостям, які всім нам знайомі з Google Docs. Вони схожі за функціями: ви розробляєте макет, який автоматично зберігається у хмарі та відкриваєте доступ на перегляд або редагування третіх осіб.

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

5 можливостей Figma:

  • Спільна робота. Сервіс дозволяє дизайнеру, проектному менеджеру та копірайтеру разом працювати над проектом: правити, ставити питання, коментувати розробку. Причому кожен учасник має свій режим доступу: can edit або can view.
  • Хмарне сховище. Після створення файл міститься у хмару. Щоб поділитися проектом, скопіюйте та надішліть на нього посилання.
  • Компоненти із загальним стилем. Уявіть собі ситуацію: ви працюєте над дизайном корпоративного сайту. Замовнику все подобається, але “давайте поміняємо кнопки”. У Figma досить поміняти одну кнопку, щоб всі інші елементи набули того ж вигляду.
  • Відновлення попередніх версій. Ви можете переглянути історію редагування та відновити будь-яку версію. За промовчанням проект зберігається автоматично, якщо за останні 30 хвилин не було жодних змін.
  • Робота із десятком файлів без втрати продуктивності. В онлайн-сервісі Figma ви можете працювати одночасно з більш ніж 10 макетами.

Про що ще варто згадати в огляді, Фігма інтегрується з такими сервісами: Zeplin, Sketch, Principle. До речі, при перенесенні файлів із Sketch шрифти та зображення зберігаються. А завдяки інтеграції із Principle ви зможете швидко створити анімацію будь-якого рівня.

Чому ми закохані у Figma. Плюси і мінуси

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

Плюси

  • Зручна робота над зразками. Створіть макет сайту або програми, розмістивши всі екрани на одній сторінці без метушні між вкладками. Також, є можливість протестити кнопки, налаштувати pop-up вікна, анімацію та інше. Ви відразу побачите, як виглядатиме продукт.
  • Файли завжди під рукою. Вам потрібно лише зайти в обліковий запис, щоб переглянути проект. А щоб поділитися роботою, відправте посилання на проект. Забудьте про надсилання об’ємних файлів на пошту або месенджер і економно використовуйте вільний простір на комп’ютері.
  • Легкість спільної роботи над проектом. Вам потрібно лише створити команду, назвати її, вибрати тариф та запросити учасників.
  • Є безкоштовний тариф для особистих користувачів. Але з обмеженнями: є 2 редактори, 3 проекти, і історія версій зберігається протягом 30 днів.

Мінуси

  • Графічний редактор Figma не працює без інтернету. Але якщо врахувати, що у більшості сучасних офісів та кафе є Wi-Fi, то цей недолік не назвеш суттєвим.

Як користуватися Figma: інструменти

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

Щоб зрозуміти, як працювати у Фігмі, вивчимо її інструменти:

  • Рамки. Виберіть кадр для певного пристрою, щоб не витрачати час на пошуки потрібних розмірів.
  • Сітки. Ви можете змінити параметри сітки, причому не обов’язково залишати ширину або висоту фіксованою. Також є можливість поміняти колір та використовувати на одному макеті відразу кілька сіток.
  • Ефекти. Додайте в дизайн тіні, розмиття фону чи шару.
  • Перо. Створюйте фігури з кривих, змінюйте їх розмір і колір за пару секунд.
  • Напрямні. Це елементи регулювання макетів. З ними простіше працювати, ніж із сітками: ви витратите менше часу на створення напрямних та керування ними.
  • Шрифт. Використовуйте шрифти Google Fonts або встановіть інструменти. Застосовувати їх можна до одного або кількох текстових елементів, а також до слів і літер всередині об’єкта.
  • Play Button. Опція для тестування сайту: перевірте, чи правильно працюють кнопки, чи збережена логіка переходів та інше.

8 лайфхаків від дизайнерів

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

  • Очистіть робочий простір від панелей, щоб не відволікатися на деталі. Для цього натисніть Ctrl+.
  • Замість пошуку схожого відтінку на панелі, візьміть потрібний колір із робочої області. Для цього клацніть .
  • Щоб швидко знайти потрібний інструмент, відкрийте меню і вбийте його в рядок пошуку.
  • Щоб додати рамку для групи елементів, виділіть їх і на панелі праворуч виберіть зі списку Frame.
  • Щоб швидко змінити розмір елемента, натисніть Ctrl+Shift+стрілка. Об’єкт зміниться на число, що вказано в Nudge Amount.
  • Для вирівнювання об’єктів натисніть Shift+Ctrl+Alt+стрілка.
  • Щоб зберегти однакову відстань між об’єктами, виділіть елементи та натисніть значок Tidy Up внизу праворуч.
  • Можна також змінити відстань між елементами. Для цього мишкою наведіть на маркер між об’єктами та потягніть його у потрібний бік.

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

Гарячі клавіші Figma

Як знайти всі клавіатурні скорочення: натисніть на “?” у лівому нижньому кутку та відкрийте “Keyboard Shortcuts”. Або використовуйте комбінацію клавіш – Ctrl + Shift +?.

 

Висновок

Що важливо дизайнерам? Щоб завдяки сервісу робота над проектами рухалася швидше та ефективніше. Щоби вся команда могла працювати над проектом одночасно. Все це Фігма.

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.