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

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

Переваги Figma:

• Має усі необхідні інструменти для дизайнерів та кодерів

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

• Колаборація команди над одним файлом в режимі реального часу онлайн

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

• Це онлайн додаток, в якому можна працювати в режимі оффлайн

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

• Фігма повністю безкоштовна

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

• В інструменту інтуїтивно зрозумілий інтерфейс

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

• Figma – це чудовий інструмент для валідації гіпотез

Фігма дозволяє створювати прототипи різного ступеню деталізацій. Тут є інструменти для простих інтеракції, як перехід між екранами. А є складніші, які дозволяють контролювати довжину анімації, її тип і тд.

• Ком’юніті

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

Для подальшого вивчення матеріалу, вам необхідно зареєструватись в Figma. Це безкоштовно. Ви можете використати свій аккаунт Google (OAuth вхід) або створити новий акаунт у Фігмі за допомогою email адреси.

Для зручності використання фігми та колаборації команд, ви можете створювати:

1. Проекти

Проект – це структурний підрозділ, в якому ви можете співпрацювати з окремою командою. В рамках проекту можна створювати окремі файли. Останні можна переносити між проектами.

1. Файли

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

1. Об’єкти

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

1. Коментарі

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

Елементи інтерфейсу та редагування:

• Фрейми

Цей інструмент дозволяє обмежити ваше полотно конкретною областю. Ви можете задати для фрейма необхідні розміри (наприклад розмір екрану мобільного або десктопа). В додатку є пресети для окремих девайсів, але ви можете задавати власні розміри. Великою перевагою власне фігма має можливість додавати фрейми на фрейми. Зверніть увагу! Якщо розміщувати дизайни не на фреймах – прототип працювати не буде.

• Слої

Слоями можуть бути окремі фрейми, об’єкти або групи об’єктів. Всі вони будуть відображатись на панелі Layers.

• Геометричні примітиви

Фігма надає 6 типів простих форм:

– прямокутник
– лінія
– стрілка
– еліпс
– полігон
– зірка

Після додавання їх у файл, ви можете змінювати:

– розмір, просто клікнувши на них і потягнувши за куток або на панелі налаштувань параметрів

– заповнення
– товщину ліній
– колір фігур
– закругленість кутків
– прозорість
– параметри розміщення відносно інших об’єктів
– правила масштабізації

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

• Перо і олівець

Ці два інструменти дозволяють малювати довільні форми і створювати векторну графіку.

• Текст

Текст в фігмі можна налаштовувати за наступними параметрами:

– шрифт
– кегль
– між строковий інтервал
– вирівнювання (по горизонталі і вертикалі)

• Світлини

Ви можете завантажити світлини в фігму, перетягнувши файли, використавши стандартні Ctrl+C Ctrl+V або ж вставивши файл з вашого девайсу.

• Компоненти

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

Тепер розберемо базові дії в Figma

Режим дизайну дозволяє:

• Групувати об’єкти
• Переміщувати об’єкти, групи чи слої
• Змінювати їх розмір
• Фіксувати положення об’єктів
• Змінювати налаштування слоїв
• Створювати копії слоїв, об’єктів та їх груп
• Фіксувати позиції об’єкту при скролінгу

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

Крок 1. Формулюємо гіпотезу

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

Для формулювання гіпотези існує розповсюджена формула:

Ми віримо, що [наша ідея, наприклад “додати кнопку “купити” на головний екран”]

допоможе [певній ЦА, нашій персоні, наприклад “офіс-менеджерці Надії”]

досягти її/його цілі [ціль, наприклад “купити канцтовари в офіс”].

Ми переконаємось, що це так, якщо побачимо [зворотний зв’язок, зміну метрик тощо, наприклад “збільшення конверсії”].

Крок 2. Визначаємо деталізацію прототипу

Виходячи з гіпотези та бажаної спостерігаємої зміни, ми визначаємо наскільки деталізованим має бути прототип. Загалом завжди краще починати з лоу-фай (low-fi ) і рухатись до хай-фай (high-fi), оскільки наші знання будуть доповнюватись, і ми зможемо додавати необхідну деталізацію.

Використовуйте low-fi, для того, щоб:

• дізнатись масштаб проекту
• протестувати нову фічу в існуючому продукті
• протестувати будь-яку ідею до початку розробки

Також коли ви тримаєте ідею всередині продуктової команди

Використовуйте high-fi, для того, щоб:

• почати розробку до кінцевого рішення по дизайну
• деталізувати свій low-fi
• подати свою ідею людям без технічного бекграунду

Також, якщо у вас є протестований і прийнятний low-fi.

Крок 3. Створюємо прототип у Фігма

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

Прототипування в Figma відбувається в декілька этапів:

1. Створення інтерфейсу в середовищі фігми

Використовуйте слої та об’єкти Figma для створення інтерфейсу.

2. Позначення інтерактивних елементів та визначення їх поведінки

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

У pop-up вікні вам необхідно задати:

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

Типи інтеракцій:

• Перейти до (іншого фрейма)
• Відкрити оверлей
• Проскролити до об’єкту
• Свапнути оверлей
• Повернутись назад
• Закрити оверлей
• Відкрити посилання

Тригери інтеракцій:

• При наведенні миші
• Натискання певної клавіші
• Перетаскування
• При кліку чи тапу
• Після очікування
• Mouse enter/leave

Крок 3. Налаштування режиму відображення прототипу

У вкладці Prototype можна також налаштувати режим відображення прототипу зазначивши наступні дані:

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

Далі вам необхідно натиснути на кнопку Play. В цьому режимі можна скопіювати посилання на прототип та встановити налаштування доступу.

Крок 4. Тестування

Для тестування важливо декілька етапів:

• Пройтись по флоу самому.
• Протестувати на юзерах.
• Перевірити відповідність результатів нашим метрикам.

В результаті прототипування в Figma ми маємо:

1. Протестовану гіпотезу та чітке розуміння чи працює вона для юзера.
2. Візуалізовані вимоги у вигляді прототипу.
3. Розуміння, що робити дизайнеру, що розробляти девелоперу.
4. Візуалізовану динаміку взаємодії.

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