Figma

Figma

Figma («Фигма») — это графический кросс-платформенный онлайн-редактор, который позволяет пользователям работать вместе в режиме реального времени.

Кому подойдет Figma

Figma используют: 

Для чего нужна Figma

С помощью графического редактора Figma можно:

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

Преимущества программы

Возможность работать в браузере

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

Совместимость с разными ОС

«Фигма» может работать на Windows, Linux, Mac и даже Chrome OS. Подобных инструментов проектирования больше не существует. 

Возможность работать над проектом в команде

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

Доступная цена 

В бесплатной версии Figma можно создавать неограниченное количество проектов, смотреть историю за 30 дней и работать с файлом вдвоем. Функции командной работы платные. Например, если команда ведет несколько проектов, платные опции позволят создавать несколько файлов в одном проекте и работать над ними всем одновременно. Стоимость тарифа — $12 в месяц за каждого человека. Также есть тариф для компаний — по $45 за человека в месяц. Тарифы открывают доступ к аналитике, общей библиотеке команды, безлимитной истории проектов.

Интеграция с другими программами

Чтобы начать пользоваться «Фигмой» без ущерба для проекта, можно импортировать рабочие файлы из Sketch. Переход происходит без некачественных изображений и провисающих кривых. 

Безопасность

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

С чего начать работу

Чтобы использовать редактор, достаточно зайти на официальный сайт figma.com и зарегистрироваться. Также есть приложение Figma: его можно скачать бесплатно и установить на компьютер. 

Для этого нужно выполнить следующие действия.

  1. Перейти на сайт «Фигмы» и нажать кнопку Sign up в верхнем правом углу.
  2. Авторизоваться с помощью учетной записи Google или создать аккаунт, используя email и пароль. Затем нажать кнопку Create account.
  3. Указать имя и род деятельности (например Design). Чтобы получать рассылку от сервиса, нужно поставить галочку возле строчки “I agree to join Figma’s mailing list”, а затем снова нажать на Create account.
  4. В появившемся окне кликнуть по кнопке Verify email, чтобы подтвердить адрес электронной почты.
  5. Открыть письмо от Figma в электронном ящике и перейти по ссылке, которая в нем указана.

Аккаунт готов к работе.

Как выглядит интерфейс

Рабочий стол с инструментами
Рабочий стол Figma

В верхней части экрана можно увидеть меню «Файл», рядом с ним — выбранный фрейм. В нашем случае это монитор компьютера (Desktop). Также доступны к выбору iPhone 11, Blank Canvas и другие форматы, включая популярные печатные: А4, А5, Letter и т. д. 

Выбор фрейма по типу устройства
Выбор фрейма

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

Пример выбора размера фрейма
Выбор размера фрейма

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

  • Rectangle (квадрат);
  • Line (линия);
  • Arrow (линия со стрелкой);
  • Ellipse (круг);
  • Polygon (треугольник);
  • Star (пятиконечная звезда);
  • Place Image (возможность загрузить картинку с устройства).
Графические инструменты для рисования объектов
Меню графических инструментов

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

Пример разных слоев на рабочем холсте
Слои в «Фигме»

Работа с объектами

Объекты, помещенные на холст, можно редактировать. За это отвечают три раздела: Design, Prototype и Inspect.

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

Prototype. Позволяет расширить функционал объекта. Например, можно связать два объекта в разных фреймах ссылками.

Inspect. Здесь можно посмотреть цвет, размеры и другие параметры объектов. В отличие от вкладки Design, менять настройки нельзя. Этот раздел полезен для разработчиков. Можно быстро скопировать код объекта и легко вставить в свою верстку.

Работа с сообщениями

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

Пример оставленного комментария к объекту
Меню обратной связи и комментариев

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

Работа с текстом

Добавлять текст на холст можно по схожему с Photoshop формату — выбрав инструмент «Текст» на верхней панели и расположив его в нужной области. Изменить тип шрифта, его размер, цвет, а также выровнять надпись можно на вкладке Design.

Пример использования функции «Текст»
Работа с текстом

Рисование нестандартных форм

На верхней панели также есть инструмент Pen/Pencil. С его помощью можно создавать нестандартные графические фигуры. По умолчанию можно рисовать прямые линии, а зажимая левую клавишу мыши — окружности.

Как рисовать нестандартные объекты
Рисование нестандартных объектов

Как и при работе с другими объектами, их свойства можно изменять с помощью редактора в правой части экрана.

Дополнительные плагины

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

Добавление дополнительных плагинов через меню
Дополнительные плагины

Затем в открывшемся окне нужно найти раздел Plugins. Установить плагин можно, выбрав нужный и нажав кнопку Install.

Рабочий стол выбора плагинов
Страница плагинов в «Фигме»

После установки он отобразится в рабочем меню.

Другие термины на букву «F»

← Все термины

Медиа Contented