Курс: Продающий лендинг для вашего бизнеса Бесплатно
Создайте сайт с нуля за 40 минут и запустите продажи

Что такое Figma и как ей пользоваться

Обсудить
Что такое Figma и как ей пользоваться

Для дизайнеров существует великое множество программ, и каждая из них по-своему уникальна. Одним из самых популярных продуктов для UX/UI-дизайна является Figma.

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

Что такое Figma

Что такое Figma и как им пользоваться

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

Возможности и особенности Figma

Хотелось бы сначала отметить ключевые моменты, благодаря которым Фигма набрала столь огромную популярность.

  • Бесплатные функции. Можно свободно пользоваться данным графическим редактором, но только с некоторыми ограничениями. В их число входит число редакторов и проектов, время хранения истории версий и другие важные мелочи. 
  • Встроенные компоненты. Если вы создаете сразу несколько элементов с одинаковым стилем, можно менять их во всем макете. В других графических редакторах вам пришлось бы работать с каждым элементом по отдельности.
  • Интеграция с различными сервисами. Можно перенести все свои проекты из Sketch или Zeplin без потери шрифтов, изображений или кривых. Еще доступно подключение к корпоративному мессенджеру Slack, пространству Confluence и так далее.
  • Использование через браузер или приложение. Программа работает в вебе и на десктопе. Все, что необходимо для работы с ней – авторизация в уже существующем профиле и наличие стабильного интернет-соединения. Скачать редактор можно с соответствующего раздела официального сайта.
  • Многопользовательский режим. Одна из главных особенностей графического онлайн-редактора Фигма. Есть возможность создания собственной команды для дальнейшего сотрудничества в рамках сервиса.
  • Наличие фреймов. Причем с предустановленными размерами для разных устройств – телефонов, планшетов, компьютеров, смарт-часов и так далее. Плюс в том, что не придется запоминать какие-либо размеры. Просто выбираете подходящий вариант девайса и начинаете работать с ним.
  • Просмотр истории версий. Сервис сохраняет ранние версии файла на 30 дней, при необходимости можно возвращаться к ним и дублировать любую из них. Сохранение происходит автоматически после внесения последнего изменения в файл. Кстати, можно добавлять всем версиям названия и описания.
  • Хранение файлов в облаке. Нет необходимости скачивать проект каждый раз после внесения изменений – все сохраняется на диске автоматически.

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

Стоимость подписки на сервис Фигма

Минусы Figma

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

Как пользоваться Figma

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

Регистрация или авторизация

Если вы не зарегистрированы в данном сервисе, сперва нажмите на крайнюю кнопку «Sign up», введите электронную почту, придумайте пароль и жмите на кнопку «Create account». Можно также войти через сервисы Google.

Регистрация в онлайн-сервисе Figma

Я выбрала Google и авторизовалась через свой аккаунт. Следующий этап – ввод имени и выбор сферы. Также можно кликнуть по галочке для подписки на рассылку, далее  нажимаем по кнопке для создания аккаунта.

Ввод личных данных при регистрации в графическом редакторе

Уже зарегистрированным пользователям необходимо кликнуть по ссылке «Log in». В результате откроется немного другое поле, где вы сможете ввести данные и авторизоваться. 

Авторизация через сайт Figma

Следом откроется рабочее пространство с ранее созданными проектами (если они, конечно, у вас были). Новички пройдут краткий ознакомительный курс по основным функциям. Теперь можно приступать к работе!

Создание нового файла

Чтобы создать новый файл, жму на плюс в правом верхнем углу интерфейса. Выбираю подходящий формат для будущего дизайна и жму по кнопке «Create file» для старта. Если выбрать пункт «Blank canvas», откроется пустое рабочее пространство.

Как создать новый проект

Импорт файлов

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

Разработка прототипов в Figma

Перейдем к элементам разработки интерфейсов. Рассмотрим настройку фреймов, слоев, макетов и сеток, типографики и многого другого.

Макеты и сетки

Для создания макета необходимо выделить нужный слой, перейти в раздел «Design» в правой панели, а там уже найти пункт «Layout grid». Там выбираете размер, цвет и прозрачность. Можете поменять форму с сетки на столбцы или строчные ряды. Доступно применение сразу нескольких макетов, а для переключения между ними используется комбинация Ctrl + G.

Применение сеток в рабочем пространстве

Просмотр прототипов

Суть этой функции в том, что вы можете просматривать, как будет выглядеть созданный вами интерфейс на самых разных устройствах. Для этого в панели на правой части экрана выбираем раздел «Prototype». В категории «Device» подбираете нужное вам устройство с предустановленным размером экрана.

Настройка прототипирования под определенное устройство

При необходимости можно изменить цвет модели и расположение на горизонтальное или вертикальное. После того как настройка завершится, жмем на кнопку «Present», расположенную справа от «Share», для просмотра прототипа на выбранном девайсе.

Завершение настройки и презентация прототипа

Работа с изображениями

В Figma можно перемещать изображения из разных источников – перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее). 

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

Работа с изображениями в Figma

Работа с компонентами

Любой созданный вами элемент можно добавить в раздел «Компоненты» для повторного использования в других проектах. Чтобы пополнить библиотеку, следует выделить нужный объект и нажать на комбинацию Ctrl + Alt + K. В результате значок элемента в панели слоев поменяется.

Внесение изменений в таких компонентах согласовано – если поменять какие-либо детали в основном экземпляре, изменения будут внесены во все остальные копии. Добавленные в коллекцию объекты доступны во вкладке «Assets» в левой панели.

Добавление компонентов в коллекцию редактора Figma

Работа со стилями и цветами

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

Изменение и применение цветовых стилей

Слои и группы

Работа со слоями здесь похожа на таковую в Photoshop. Можно создавать отдельные группы, перетаскивать на верхний и задний план определенные элементы. И все это доступно в разделе «Layers» в левой части экрана.

Отображение слоев и работа с ними

Совместное использование

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

Когда вы регистрируетесь в сервисе, персональная команда создается сразу же. При необходимости ее название можно легко поменять, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт «Rename». Оттуда же можно удалить команду. Чтобы создать новую команду, необходимо нажать на пункт «Create new team» в самом низу левой панели.

Создание новой команды, изменение названия и удаление

Теперь о том, как пригласить людей в макет. Сначала выбираем нужную вам команду и в новом окне кликаем по кнопке «Invite» в правом верхнем углу. Вводим имя пользователя, даем ему права на просмотр/редактирование, отправляем приглашение.

Приглашение других пользователей в команду

Но есть и другой способ совместной работы над проектом без приглашения кого-либо в команду. В рабочем пространстве нужного проекта жмем по кнопке «Share», далее настраиваем права и отправляем приглашение. Можно также скопировать ссылку и отправить ее любому человеку.

Приглашение пользователей для работы над проектом

Типографика

По умолчанию в Фигма установлены шрифты Google. Для десктопной версии вы сможете установить специальный плагин Font Helper для использования локальных шрифтов с вашего компьютера. 

Уведомление для установки плагина и импорта локальных шрифтов

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

Работа с текстом, изменение шрифта и его размера

Установка плагинов

Фигма поддерживает установку плагинов для оптимизации работы. Полную коллекцию можно посмотреть в разделе «Community» на главной странице, перейдя в раздел «Explore».

Как установить плагины в Фигма

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

Просмотр установленных плагинов

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

Пример использования плагина Unsplash

Фреймы

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

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

Как работать с фреймами в Фигма

Заключение

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

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

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте