Что такое 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 и других подобных программах исчезнет навсегда.