Гайд по работе в Figma: знакомимся с программой

Figma – один из основных инструментов веб-дизайнера. Это графический редактор, которым вы сможете пользоваться даже без платной подписки: у сервиса много базовых функций и возможностей.

Академия дизайн-профессий Pentaschool совместно с Комьюнити подготовила для вас подробный гайд по Figma, который будет состоять из 6 статей. Вместе с экспертом вы пошагово разберетесь в интерфейсе программы, узнаете о работе с векторной графикой, научитесь использовать плагины и разрабатывать сложные элементы дизайна. А сегодня мы предлагаем познакомиться с Figma, сравнить ее с другими редакторами и разобраться, какие проекты вы сможете здесь создавать.

Что такое Figma и для каких задач она подходит

Figma – одновременно графический редактор и программа для разработки прототипов. Это значит, что вы сможете не только создавать в ней отдельные элементы (иллюстрации, иконки), но и моделировать будущие сайты или приложения. 

Программу используют веб- и UX/UI-дизайнеры, графические дизайнеры, разработчики. Она удобна для командной работы, поэтому также ей пользуются, например, менеджеры проектов и специалисты, которые работают по методике CustDev: общаются с целевой аудиторией, тестируют гипотезы и улучшают прототипы на основе тестов. 

Что можно делать в Figma:

• Элементы интерфейса: кнопки, списки, иконки, формы для приема заявок. Можно настроить для них анимацию и другие эффекты.

• Векторную графику: логотипы, иллюстрации и другие графические элементы.

• Макеты экранов для будущих веб-страниц и приложений. Дизайн можно сразу «примерить» на экран компьютера или смартфона.

• Интерактивные прототипы сайтов и мобильных приложений. Когда все экраны отрисованы, вы можете выстроить связи между ними и проверить, как работает каждая ссылка или кнопка. 

• Презентации. В редакторе есть удобные шаблоны и необходимые инструменты для работы с таким форматом.

• Схемы. Их можно рисовать в дополнении Figma Jam – это онлайн-доска для заметок, которая по функционалу не уступает платформе Miro.

Иногда Figma используют для нестандартных целей. Например, в редакторе можно нарисовать планировку дома и даже собрать логическую игру вроде пазлов или «крестиков-ноликов».

Место Figma среди графических редакторов

Наряду с Figma дизайнеру нужно владеть и другими программами. В профессиональную базу входят, например, редакторы из пакета Adobe: Illustrator, Photoshop, InDesign. При этом перед вами не будет стоять выбор – Figma или Photoshop. Эти графические редакторы не заменяют друг друга, а дополняют, так что важно освоить разные инструменты и сочетать их в работе.

Для каждого типа задач самой удобной будет одна программа:

• В Figma работают с элементами веб-дизайна и прототипами интерфейсов.

• В Adobe Photoshop чаще всего делают сложную обработку растровой графики, создают коллажи и фотомонтаж для оформления сайтов.

• В Adobe Illustrator создают векторную графику: логотипы, иллюстрации, элементы фирменного стиля брендов.

• В Adobe InDesign работают с версткой: создают макеты книг и журналов, рекламные баннеры и многое другое.

Также есть несколько технических различий между сервисами:

1. Figma – это онлайн-редактор с функциями для командной работы. Все файлы хранятся в облаке, и над ними можно работать вместе с коллегами в режиме реального времени. У Adobe тоже есть облачное хранилище. Оно позволяет синхронизировать изменения на разных устройствах, но каждым файлом может одновременно пользоваться только один человек, а не команда.

2. Figma проигрывает редакторам Adobe по количеству функций, поэтому иногда стоит совмещать в работе несколько программ. Например, если вы привыкли создавать векторные объекты в Adobe Illustrator, их можно легко импортировать в Figma.

3. Преимущество Figma – простота, скорость работы и возможность пользоваться всеми функциями бесплатно. У программ Adobe сложный профессиональный интерфейс, и это замедляет работу над некоторыми задачами.

В 2010 году, за несколько лет до Figma, на рынке появился Sketch. Этот редактор создали специально для проектирования интерфейсов, и в нем не было лишних инструментов и перегруженности. Установить его могли только пользователи macOS, но, тем не менее, Sketch очень быстро стал отраслевым трендом. 

Чуть позже Adobe представили свой редактор интерфейсов XD, чтобы занять место в конкурентной нише, а в 2016 году появилась Figma. Создатели сделали программу бесплатной, кроссплатформенной и простой в использовании, чем привлекли огромное количество пользователей по всему миру.

Стоит ли бояться ухода Figma с российского рынка?

В марте 2022 года Figma ввела ограничения для некоторых корпоративных аккаунтов в России. В основном, это те компании, которые попали под санкции. 

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

А чтобы подстраховаться, мы рекомендуем сразу скачивать на компьютер все файлы, которые вы создаете в Figma. Тогда у вас сохранится доступ к ним независимо от того, как будут развиваться события.

Эксперт академии Pentaschool рассказывает о возможностях Figma

Павел Ярец, дизайнер с опытом более 15 лет, продюсер Digital media OKTAEDER, преподаватель курса по Figma от академии Pentaschool.

Впервые я познакомился с Figma в 2018 году, когда сервис находился еще в зачаточном состоянии – у редактора были перспективы, но никто всерьез его не воспринимал. Все прогрессивные команды работали в Sketch или Adobe XD, многие студии пытались делать свои онлайн-решения (Invision Studio, Framer и другие).

Главными «фишками» Figma были абсолютно бесплатное использование и возможность командной работы над проектом, но функционал у редактора оказался весьма ограниченным. Даже у Adobe XD было больше плагинов, расширяющих функционал приложения, не говоря уже о Sketch. В общем, мы познакомились с этим редактором и отложили его в сторону. 

Позднее, когда мы разрабатывали MVP для одного медиасервиса, нам вновь пришлось столкнуться с Figma, которая на тот момент уже значительно развилась. Клиенты настаивали на работе именно в данном редакторе.

Первый опыт использования Figma в реальной работе оказался не самым приятным. Мы всю ночь бодро возились с экранами приложения, рисовали их в огромном количестве, а на утро не смогли открыть созданный файл, поскольку в браузере содержимое экранов просто не подгружалось. Данная проблема была разрешена с помощью разделения частей приложения на отдельные странички, но осадок остался. 

А спустя некоторое время Figma сделала огромное обновление: во-первых, появилось комьюнити, которое предоставило плагины и различные полезные ассеты для дизайна. Работать стало гораздо приятнее и удобнее. Во-вторых, появились новые инструменты (варианты компонентов, автолейауты и т.д.), и по своим возможностям этот редактор переплюнул и Sketch, и XD (последний, кстати, развивается крайне медленно, хотя и имеет широкую популярность на европейском рынке). Figma вырвалась далеко вперед и теперь является одним из самых передовых и перспективных инструментов дизайнера. 

Сегодня мы используем ее почти для всех проектов. Даже если у клиента дизайн-системы в Sketch, мы без особых проблем импортируем эти файлы в Figma.

Как установить Figma: системные требования и тарифы

Figma – облачный сервис, которым можно пользоваться прямо в браузере, поэтому устанавливать программу необязательно. Если вы часто открываете файлы с разных устройств, для вас будет удобнее онлайн-версия. Достаточно создать аккаунт на сайте Figma, и можно начинать работу. Проверьте, чтобы у вас была установлена самая свежая версия браузера.

Программу для iOS/Windows или мобильное приложение Figma Mirror можно скачать здесь. Жестких системных требований нет, важна только видеокарта компьютера. Подойдут Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850 и более поздние.

Базовая версия Figma бесплатна, и она позволяет:

• Использовать большинство инструментов и плагинов без ограничений.

• Подключать к командной работе еще одного человека с правами редактора, кроме вас.

• Создавать до 3 папок проектов.

• Делиться файлами с любым количеством пользователей.

• Хранить историю версий каждого макета не более 30 дней.

Есть и платные профессиональные тарифы. По подписке можно подключить к работе больше коллег и снять ограничения по количеству файлов, проектов и истории версий. Такие тарифы выгодны большим командам, но для начала карьеры в дизайне или индивидуальной работы подписка зачастую не нужна.

На этом мы пока закончим знакомство с графическим редактором Figma – пора переходить к практике и профессиональным лайфхакам. В следующей части нашего гайда мы будем детально разбирать интерфейс программы. Вы познакомитесь с панелью инструментов, научитесь создавать макеты и сетки в Figma, сможете сохранить себе список «горячих клавиш» и узнаете полезные приемы для работы.

Следите за выходом новых материалов в Комьюнити, чтобы ничего не пропустить. До встречи!