Что такое Фигма и как в ней работать

Figma — это облачный инструмент для проектирования и прототипирования, который позволяет пользователям создавать и совместно работать над дизайном веб-сайтов, мобильных приложений и других цифровых продуктов. Дизайн-система figma появилась в 2016 году и уже к 2018 набрала огромную популярность среди дизайнеров. Это инструмент на основе браузера, то есть его можно использовать на любом устройстве с подключением к Интернету. Здесь мы расскажем вам, что такое figma.

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

Отсутствие оплаты за базовую функциональность. Этот графический редактор можно использовать бесплатно, но есть некоторые условия, которые прилагаются к нему, например, количество разрешенных библиотек и проектов, срок доступа к историям версий, общие шрифты.

Интегрированные компоненты. Если вы создаете несколько объектов в одном стиле, вы можете корректировать их по всему макету, а не изменять каждый по отдельности, как в других графических редакторах. Кроме того, вы можете переносить дизайн из Sketch не теряя шрифты, без искажений в изображениях или векторах. Эту программу можно подключить к другим сервисам, таким как Slack, пространство Confluence и так далее.

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

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

Сохраняется история версий. Все итерации вашей работы с макетом хранятся в Figma 30 дней. За этот срок можно неограниченное количество раз вернуться к любому этапу работы и внести нужные правки. Можно дублировать версии и присваивать им индивидуальные названия. Файл сохраняется автоматом, как только вы внесли последнюю правку.

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

Редактор векторной графики. Так как фигма программа для дизайна, то она дает возможность пользователям создавать и редактировать векторную графику с использованием форм, линий и текста.

Совместная работа. Функции совместной работы Figma в режиме реального времени упрощают совместную работу команд над проектом с возможностью видеть изменения друг друга в режиме реального времени и оставлять комментарии.

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

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

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

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

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

Почему работа в figma привлекает в первую очередь именно дизайнеров? Вот основные причины:

• Очень простой интерфейс, в отличие от Adobe Photoshop или Adobe XD;
• Работа над проектом в команде набирает все большую популярность, а Фигма заточена именно на командную работу;
• Команда может работать, не привязываясь к операционной системе или конкретному компьютеру, главное, чтобы был интернет;
• Можно работать с Google Fonts;
• Можно экспортировать проект в Sketch;
• Отличная система взаимного комментирования и рецензирования внутри команды;
• Оперативная техническая поддержка со стороны Figma.

У каждой программы есть свои достоинства и недостатки. Вот что следует учесть, прежде чем вы приступите к изучению Figma, чтобы потом не было разочарования.

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

Отсутствие защиты файлов в бесплатном тарифе. Любой пользователь, которому вы предоставите доступ для просмотра, может внести изменения в макет или скопировать его.

Зависимость от надежности интернет-соединения. В случае обрыва связи, ваша работа может прерваться в любой момент. Чтобы избежать досадных перерывов, прогружайте проект полностью после каждого внесения изменений. Для стабильной работы офлайн лучше использовать десктопное приложение.

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

Тем не менее, какие бы недостатки не содержала фигма, отзывы о программе в целом позитивные.

Для начала работы зарегистрируйтесь или авторизуйтесь в figma официальном сайте. Для регистрации нажмите Get Started.

После входа появится рабочее пространство. Нажмите New design file, задайте необходимые параметры. Или импортируйте собственное изображение, нажав на иконку Import file.

Если предпочитаете работать офлайн, зайдите в свой аккаунт и в выпадающем меню выберите Get desktop app. Скачается десктопная версия.

Все, теперь вы можете начать делать новый макет. 

Прежде чем приступать к самостоятельной работе, давайте закрепим принципы, по которым работает Figma. Разобраться в figma интерфейсе несложно.

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

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

Для быстрого доступа в к текущим проектам добавьте их в папку Favorites и они всегда будут под рукой.

Как создать группу в фигме? Группы — это коллекции элементов, которые можно объединить, чтобы упростить управление их свойствами.

Чтобы создать группу в Figma:

• Откройте файл Figma, в котором вы хотите создать группу.
• Выберите элементы, которые вы хотите объединить в группу. Можно выбрать сразу несколько элементов, удерживая клавишу Shift и кликая по ним левой кнопкой мыши.
• Выберите пункт «Группа» в меню «Структура» или нажмите клавишу Ctrl + G (или Cmd + G на Mac). Элементы будут объединены в группу.

Чтобы понимать, какие рекламные креативы срабатывают, а какие нет, используйте инструмент сквозной аналитики. Чтобы все типы обращений, в том числе телефонные звонки, собирались в одной статистике, маркетологи подключают коллтрекинг.

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

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

Чтобы сделать макет общим, просто создайте новую команду на главной странице Figma. Как создать группу в фигме? Нажмите New Team и присвойте ей название. Теперь всем этим людям будут доступны ваши файлы, которые вы перенесли в соответствующую папку и расшарили для них. 

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

Небольшой лайфхак. Графический редактор figma можно использовать как бесплатное облачное хранилище для коллекции ваших фотографий и других футажей, которые будут всегда под рукой для вставки в проект.

Компоненты в фигма позволяют автоматически задавать групповые параметры к идентичным элементам макета и применять эти параметры к группе макетов. При прототипировании в фигме с помощью компонентов задают вид и размеры стандартных кнопок, виджетов, иконок, стиль списков. Например, заказчик попросил вас изменить размер и цвет виджета в прототипе. А у вас их 30! Что делать? Менять все вручную в обычном редакторе займет много часов. А с использованием figma компонентов все изменения делаются парой кликов и применяются автоматически ко всей группе элементов.

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

Как создать фреймы в фигме? Нажмите кнопку F. На панели свойств отобразятся параметры фрейма. Можно выбрать размер под определенную модель смартфона или создать фрейм по своим размерам.

Фреймы также могут использоваться для создания адаптивных макетов, так как они могут автоматически изменять размеры и расположение своих элементов в зависимости от размера окна просмотра. Это позволяет создавать макеты, понимать, насколько хорошо они будут выглядеть на различных устройствах и разрешениях экрана и тестировать прототипы в фигме.

При необходимости можно сразу выбрать самые популярные размеры Android и все размеры экранов iPhone.

Продолжаем изучение фигма. Как работать с сеткой в этой программе? Сетка (Layout Grid) служит для выравнивания расстояний между элементами макета. С ее помощью можно также настроить размеры элементов и их количество. Причем можно настроить расстояние не только от центра, но и от краев объекта. Это удобно, когда вам, например, нужно расположить много товарных карточек на сайте.

Вы можете сделать несколько сеток, применяя их к отдельному объекту или группе объектов. Количество колонок сетки для больших объектов — до 12, а для маленьких — до 24.

В отличие от стандартной сетки в обычных графических редакторов, Layout Grid в Figma адаптивный. С его помощью вы можете проверить, чтобы верстка макета выглядела одинаково на различных устройствах.

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

Десктопная версия Figma устанавливается на компьютеры с Windows, macOS и Linux. При этом фигма нетребовательна к системным требованиям. Также существуют версии для мобильных устройств на Android, iOS.

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

Макеты, созданные в десктопной версии, можно импортировать в браузерную, как только появится устойчивое соединение и продолжить работать вместе с командой и заказчиком.

Фигма бесплатной или платной версии — какую выбрать? Формально Figma считается бесплатным приложением. Но за расширенный функционал придется доплатить. Рассмотрим самые распространенные в фигме тарифы.

В бесплатной версии (Starter) вам предложат:

• Создать 3 проекта;
• Доступ к 2 библиотекам;
• Месяц хранения истории на серверах Figma;
• Возможность совместной работы 2 дизайнеров.

Тариф Professional обойдется в $ 12 в месяц. Вот что можно получить за эти деньги:

• Проекты можно создавать без ограничения;
• Доступно большое количество библиотек;
• История изменения хранится пожизненно;
• Можно приглашать в команды новых учвстников.

Тариф Organization открывает все возможности и инструменты Figma. Ежемесячный платеж составит $ 45 в месяц. Вот эти возможности.

• Корпоративный план использования;
• Все проекты защищены от несанкционированного копирования и изменений;
• Дополнительные инструменты безопасности;
• Открыт доступ ко всем библиотекам;
• Доступны общие шрифты;
• Подключение собственных плагинов и управление ими;
• Аналитика проекта.

Мы разобрали основы работы в figma. В одной из следующих статей ответим на вопрос: «фигма и тильда в чем разница?» Надеемся, что figma пригодится вам, так как она часто используется в маркетинге, например для форм обратной связи.