Що таке Figma і навіщо вона потрібна?

Figma — це той інструмент, без якого зараз важко уявити повноцінну роботу будь-якого графічного, продуктового або вебдизайнера. Ба більше, ця програма настільки проста і зручна у використанні, що з нею працюють над своїми проєктами також і представники інших професій: маркетологи, SMM-фахівці, менеджери і навіть розробники. Це така собі чарівна паличка, яка з’явилася 2016 року в ролі альтернативи для Sketch і Adobe XD, і через кілька років стала топовим інструментом дизайну для багатьох фахівців. Її можливості та функції доволі широкі: у Figma створюють елементи інтерфейсу, розробляють інтерактивні прототипи для вебсайтів і застосунків, а також роблять ілюстрації та векторну графіку. Безліч дизайнерів використовують Figma для розробки дизайн-макетів вебсайтів. 

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

Що таке Figma і які в неї є можливості та особливості?

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

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

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

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

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

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

Плюси та мінуси Figma

Плюси:

• Співпраця в режимі реального часу.
• Швидкий і простий обмін файлами.
• Інструмент “все в одному”: від проєктування і прототипування до передачі розробникам.
• Сервер для зберігання файлів у хмарі.
• Наявність безкоштовного плану.
• Підтримує як настільні комп’ютери, так і мобільні пристрої.
• Підтримка таких платформ як Windows, Mac OS X, iOS, Android і Linux.
• Просте управління і розробка компонентів.
• Можливості розробки дизайну продукту, прототипування, ілюстрації та моушн-дизайну.
• Наявність сервісу шрифтів від Google, відомий як Google Fonts.
• Спосіб збереження проєкту у форматі Sketch.

Мінуси: 

• Інтерфейс тільки англійською мовою.
• Для безперебійної роботи потрібна об’ємна оперативна пам’ять і відеокарта.
• Потрібен постійний доступ в інтернет. 
• Висока ціна підписки для команди, якщо використовувати платну версію. 
• Немає можливості одночасного редагування.
• Незахищене зберігання документів. 
• Можуть з’явитися пікселі в лінійних ілюстраціях після копіювання. 

Інструменти Figma

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

1. Можливість створювати різні фігури, лінії, криві та вільні малюнки.
2. Створення та використання компонентів і стилів.
3. Працювати з текстом, додаючи його або редагуючи його прямо в макеті. 
4. Створення та управління шарами.
5. Генерація інтерактивних прототипів, за допомогою додавання переходів між екранами.
6. Створення анімацій і переходів між станами інтерфейсу.
7. Підтримка сторонніх плагінів, які розширюють функціональність Figma.
8. Можливість створювати і використовувати бібліотеки компонентів і стилів для узгодженості дизайну в різних проєктах. 

Figma — початок роботи 

Нижче коротка інструкція, як зареєструватися і почати працювати у фігмі. 

1. Перейди на офіційний сайт.
2. Знайди кнопку “Create one”, натисни її.
3. Далі зверни свою увагу на правий верхній кут, там має бути кнопка “+New” — натисни на неї.
4. Після цих дій на екрані має з’явитися створений тобою файл.
5. Задай потрібні параметри — і готово. Ти можеш починати роботу над генерацією макета. 
6. Також ти можеш завантажити застосунок, перейшовши на сайт Figma, обравши розділ “Products”, і натиснувши “Downloads”. Далі вкажи потрібний продукт і операційну систему. 

Висновок

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