Що таке Figma: функції, інструменти та переваги

Сучасному дизайнеру є безліч інструментів для продуктивної роботи. Кому-то по душі використовувати перевірений часом Photoshop, інші віддають перевагу більш вузько направлений Sketch, а треті вибираютьFigma. І саме цей інструмент стрімко стає фаворитом веб-дизайнерів. Чому?

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

Що таке Figmaз точки зору функціоналу? Це зручний графічний редактор, в якомуможна створювати:

• прототипи web-сайтів і додатків;
• окремі елементи інтерфейсу: іконки, кнопки, форми і багато іншого;
• векторні зображення та ілюстрації, інше.

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

Онлайн і десктопна версії для зручної роботи з будь-якого пристрою

Десктопна версія Figma доступна на MacOS і Windows. Але використовувати її зовсім не обов'язково. Працювати можна прямо з браузера - в ній доступні всі інструменти і можливості. Підтримуються наступні версії:

• Chrome 49+
• Firefox 51+
• Safari 10.1+
• Edge 14+

Тобто, ви просто переходите на сайт figma.com, заходите в свій аккаунт з будь-якого ПК або ноутбука, і можете приступати до роботи. При підключенні до інтернету всі дані вашого макета тут же синхронізуються.

Для комфортної роботи з деськтопной версією розробники рекомендують використовувати відеокарти не старіше наступних поколінь:

• Intel HD Graphics 4000
• Nvidia 330m
• ATI Radeon HD 4850

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

Базові інструменти програми

Фігма - цеплатформа, в якій є практично все необхідне для роботи з графікою, векторними об'єктами, шрифтами, ефектами і т. д.

Ось лише основний список інструментів:

• фрейми(Артборди) - є готові варіанти, але можна створювати власні під конкретні завдання.

• Модульна сітка- для зручного упорядкування елементів дизайну в фреймах.

• векторні форми- для відтворення різних елементів інтерфейсу.

• криві- для створення кривих і простих векторних форм. Можна додатково завантажити їх з Sketch або Adobe Illustrator.

• зображення- для швидкого додавання графічних елементів в макет.

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

• текст- з підтримкою Google Fonts і інструментами підключення додаткових за допомогою Font Installers (для деськтопной версії).

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

• Grid for Tilda Publishing- швидко генерує сітку для Tilda Publishing.
• Unsplash- дозволяє всього в пару кліків імпортувати зображення з однойменного сервісу.
• Iconify- відкриває доступ більш ніж до 40 тисячам векторних іконок для будь-яких ваших проектів.
• Figmotion- дозволяє додавати прототипам різні анімації без необхідності використовувати додаткові програми: Principle, Haiku або After Effects.
• Blobs- зручний інструмент для відтворення векторних об'єктів.

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

Безкоштовний і платний тариф

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

Умови безкоштовного тарифу:

• можливість працювати тільки над трьома проектами одночасно;
• підключення до роботи над проектом не більше ніж одного редактора;
• історія версій зберігається тільки останні тридцять днів.

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

Професійний тариф розрахований на командне редагування і дає можливість працювати над будь-якою кількістю проектів. Вартість - $ 12 в місяць за кожного редактора. Обмежень на зберігання історії проектів немає, плюс всі учасники можуть працювати із загальною бібліотекою елементів.

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

До слова, щоб легально використовувати Photoshop, вам доведеться оплатити підписку $ 9.99 в місяць в тарифі для фотографів, куди також входить Adobe Lightroom, який не потрібен дизайнеру. Або $ 20.99 в місяць за Photoshop + Adobe Fresco.

Чому вам варто спробувати в Figma

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

• Розрахований на багато користувачів режим редагування

Більше не потрібно пересилати макети між дизайнерами, відправляти замовнику на затвердження, зберігати на комп'ютері десятки версій. Досить відправити посилання на проект, відкривши доступ для редагування, і інший дизайнер зможе вносити в нього свої зміни. Вони тут же відображаються у інших учасників. А в разі чого можна в будь-який момент відкотитися на одну з попередніх версій.

• Зручне зберігання файлів

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

• Коментування безпосередньо в макеті

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

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

Якщо раніше дизайнерам доводилося працювати зі сторонніми сервісами для прототипування по типу Invision або Marvel, то тепер це не потрібно. Функція прототипирования вже є в Фігме.

• Багатозадачність

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

І це ще не все!

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

Додатково до всього в інтернеті просто маса безкоштовних уроків,як працювати з Figma.Хоча вони, можливо, і не дадуть систематичних знань, але освоїтися в програмі з їх допомогою цілком реально. А пройшовши хороший курс по Фігме, за пару місяців можна освоїти веб-дизайн і вже працювати зі справжніми замовленнями.

Ложка дьогтю в бочці меду: недоліки Figma

Figma - майже ідеальний інструмент для веб-дизайнера. Це неможливо заперечувати. Але все ж ви повинні пам'ятати і про деякі нюанси.

• По-перше, для роботи з Figma потрібен інтернет.Без нього ви просто не отримаєте доступу до хмарним файлів, що логічно. Якщо проект вже завантажений, з ним можна працювати, хай і не зовсім повноцінно. При підключенні до інтернету він синхронізується. Головне - випадково його не закрили. При необхідності файл з проектом можна зберегти на комп'ютер в форматі FIG.
• По-друге, у Figma англійський інтерфейс.Доведеться пристосовуватися. Та й уроки по Фігме здебільшого англійською. Для кого-то це теж може стати вагомим недоліком.
• По-третє, спільнота у Figma не таке велике, як у Photoshop або Sketch.Сервіс поки молодий, тому мінлива, відповідей на питання і іншого не так багато. Але це лише питання часу.

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

Підсумки

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

Зрозуміло, поки що Figma не здатна на 100% замінити продукти від Adobe або Sketch. Але проект ще молодий і розвивається дуже активно. І як знати, можливо, через пару років необхідність в Photoshop, Sketch і інших подібних програмах зникне назавжди.