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

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

Что такое Фигма и для чего она нужна

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

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

Что можно создать в Фигме:

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

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

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

Настройки Фигмы

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

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

Открыв редактор, вы попадете в главное меню программы. 

Во вкладке «Recents» будут находиться все последние открытые проекты, включая те, которые были созданы другими пользователями и доступны вам для просмотра и комментирования. 

Следующие пункты — «Your teams» и «Drafts». Здесь собраны проекты, которые созданы вами и вашей командой. Чтобы открыть любой из них, кликните дважды левой кнопкой мыши на нужную миниатюру.  

Если у вас новый аккаунт и ранее вы не работали в Figma, то вкладки «Recents» и «Drafts» будут пустые до тех пор, пока вы не создадите новый проект.  

В нижнем левом углу главного экрана находится ссылка на раздел «Community».

В нем собраны все плагины, шаблоны, иконки, прототипы и иллюстрации, которые можно использовать при работе над проектами.

Чтобы вернуться на главный экран из раздела «Community», просто кликните по иконке в виде домика в верхнем меню.

Теперь переходим к настройке аккаунта. 

Настройки профиля

Для настройки личного профиля кликните на иконку со своим именем, а затем нажмите «Settings».

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

Например, чтобы поменять имя, нажмите «Change name» и введите новое значение. Для сохранения изменений не забудьте нажать «Save». 

Создание команды для совместной работы

В Фигме можно вести совместные проекты. Чтобы создать свою команду, перейдите на главный экран редактора, найдите раздел «Teams» в левом боковом меню и нажмите «Create new team». 

Введите название команды и нажмите «Create team».

Укажите email участников. Если нужно добавить больше трех человек, то кликните «Add another», чтобы включить дополнительные поля. Все пользователи получат пригласительную ссылку на указанную вами почту. 

После добавления электронных адресов нажмите «Continue».

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

Теперь все готово! Новая команда появится в разделе «Teams», а ваши совместные проекты будут храниться в папке «Team Project». 

Внутри команды можно создавать несколько проектов (их количество зависит от тарифного плана). Чтобы добавить новый, нажмите на значок «+» в разделе «Team project» либо на кнопку «+Project» справа. 

Для приглашения других участников в команду кликните на кнопку «Invite» справа. 

Вы можете скопировать и самостоятельно отправить человеку пригласительную ссылку (Copy link) либо выслать инвайт на указанный email (Send Invite). 

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

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

Настройки всей команды можно изменить во вкладке «Settings». Например, поменять название группы и добавить описание. Для удаления команды нужно нажать «Delete team». 

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

Создание нового проекта

Перейдите на главный экран редактора. Нажмите «+ Design file» вверху справа, если хотите работать над проектом индивидуально, или на значок «+», если хотите создать проект для команды. 

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

По умолчанию проект называется «Untitled». Чтобы изменить название, кликните по нему дважды левой кнопкой мыши и введите новое имя. 

Чтобы добавить новую страницу, нажмите на «Page» в левой колонке, а затем на «+». Это удобно, если вам нужно распределить объекты по разным вкладкам, а не держать все в одном поле. Например, на одной странице можно работать с дизайном главной сайта, а на другой — проектировать интерфейс этого же ресурса или рисовать баннеры. 

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

Для создания рабочей области нажмите на иконку в виде решетки в главном меню проекта и выберите «Frame».

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

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

Чтобы изменить высоту или ширину фрейма, потяните за его стороны. Для пропорционального изменения размеров потяните за углы.

Если вы знаете ширину и высоту фрейма в пикселях (например, при создании прототипа сайта для определенных размеров экранов), то укажите эти значения в пикселях в меню настроек справа. За это отвечают параметры H (height — высота) и W (width — ширина). 

Фрейм готов. Теперь переходим к изучению базового функционала Figma.

Инструменты и возможности Фигмы

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

Как пользоваться фигурами в Фигме

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

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

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

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

В левой колонке находятся параметры фигуры. Вы можете изменить размеры объекта (параметры «H» и «W») цвет и степень прозрачности заливки (Fill), добавить обводку (Stroke), эффект тени и размытия (Effects). 

Помимо фигур в проект можно добавить любую картинку или видео. Для этого кликните на команду «Place image/video» или используйте комбинацию горячих клавиш Ctrl+Shift+K. Затем выберите и загрузите нужный файл с вашего компьютера. 

Как пользоваться слоями в Фигме

Каждый созданный фрейм или элемент появляется на новом слое. Панель слоев «Layers» находится слева. 

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

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

Например, можно объединить слои в группу, чтобы в дальнейшем применить к ним одинаковые стили и эффекты. Для этого выделите нужные объекты, щелкните правой кнопкой мыши и выберите «Group Selection» либо нажмите Ctrl+G.

Выбранные фигуры объединились в одну группу, и теперь их можно одновременно редактировать, перемещать в другое место и так далее.  

Чтобы объединить слои в один фрейм, повторите вышеописанные действия, но вместо «Group Selection» выберите «Frame selection» либо нажмите Ctrl+Alt+G.

Как пользоваться пипеткой в Фигме

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

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

Выберите инструмент «Пипетка», нажав на иконку, как на скриншоте ниже.

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

Как пользоваться текстом в Фигме

Чтобы добавить на макет текст, нажмите на иконку в виде буквы «T» и выделите область для его написания. 

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

Как пользоваться пером в Фигме

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

Чтобы создать новый объект, нажмите на иконку в виде пера и выберите «Pen». 

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

Когда закончите рисовать, нажмите кнопку «Done», чтобы отключить перо и приступить к дальнейшей работе с фигурой. 

До тех пор, пока вы не нажмете «Done», перо будет активно и вы сможете дорисовывать новые элементы. 

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

Как пользоваться маской в Фигме

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

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

1. Выберите на панели инструментов «Ellipse» и нарисуйте круг — это будет область, внутрь которой нужно вставить картинку.

2. Включите инструмент «Place image/video» и добавьте в проект изображение (видео тоже можно). 

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

4. На панели слоев слева тоже поставьте картинку над кругом. 

5. Выделите оба объекта на панели и нажмите кнопку «Use a mask» либо комбинацию клавиш Ctrl+Alt+M. 

Готово! 

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

Как пользоваться автолейаутом в Фигме

Auto Layout (автолейаут, авто лейаут) — это инструмент, с помощью которого можно быстро выровнять элементы и автоматически настроить расстояния между ними. Например, AutoLayout выручает, когда нужно создать дизайн для разных разрешений экрана и не хочется рассчитывать все размеры и отступы вручную. 

Для примера нарисуем прямоугольник и напишем внутри него текст.

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

Для этого выделите слои фигуры и текста, нажмите правой кнопкой мыши и выберите команду «Add Auto Layout».

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

Как пользоваться компонентами в Фигме

Компоненты в Figma — это объекты, которые можно массово изменять и добавлять в разные проекты. Например, вы можете создать кнопку, сделать из нее компонент, а затем использовать ее на других фреймах и страницах. Если изменить первоначальную кнопку (она считается главным компонентом), то остальные копии тоже автоматически поменяются. 

Чтобы создать компонент, выберите нужный объект и нажмите «Create a component» на верхней панели либо комбинацию клавиш Ctrl+Alt+K. 

Кнопка появится в списке компонентов во вкладке «Assets». Отсюда вы сможете перетаскивать ее в свой проект. 

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

В списке слоев основной компонент отмечен иконкой в виде четырех ромбиков, а второстепенные — в виде одного. 

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

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

Если вы хотите убрать отдельный объект из списка компонентов и превратить его в независимый элемент, то просто кликните по нему правой кнопкой мыши и нажмите «Detach Instance». Функция работает только для дополнительных компонентов. Отсоединить главную кнопку таким образом не получится. 

Если у вас много компонентов и нужно быстро найти главный, то кликните правой кнопкой по любому дочернему объекту и нажмите «Go to main component». 

Как пользоваться слайсом в Фигме

Инструмент Slice (срез, слайс) используется для экспорта произвольной прямоугольной области макета в формате JPG, PNG или SVG. 

Чтобы воспользоваться им, выберите «Slice» на верхней панели либо нажмите горячую кнопку «S». Затем выделите на макете область, которую хотите экспортировать, укажите формат изображения и нажмите «Export Slice». Далее останется только сохранить картинку на компьютере. 

Как пользоваться плагинами в Фигме

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

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

Установить расширение можно двумя способами:

• Из рабочего проекта.

Нажмите на иконку «Resources» в верхнем меню и выберите вкладку «Plugins». 

Вбейте название нужного плагина в строке поиска или выберите дополнение из списка. Нажмите «Run» для установки и запуска.

• Из раздела «Community».

Перейдите на главную страницу редактора Figma и выберите «Explore Community».

Опустите страницу вниз до раздела «By the community, for the community» и во вкладке «All resources» выберите «Plugins».

Найдите нужный инструмент и кликните «Try it out», чтобы установить расширение. 

Готово! Теперь плагин можно использовать при работе над своими проектами. Найти его вы сможете в разделе «Resources» на панели инструментов. 

Как пользоваться мокапами в Фигме

Мокапами называют шаблоны, с помощью которых можно посмотреть, как будет выглядеть дизайн на реальных объектах — кружках, футболках, экранах устройств, страницах журналов или рекламных листовках. Используя мокапы, вы можете «примерить» свой макет на любой предмет.

Шаблон можно создать с нуля, но это займет много времени и подойдет разве что для уникальных и сложных проектов, мокапов которых пока нет в сети. Однако для большинства предметов шаблоны уже есть и, чтобы протестировать их, достаточно просто установить нужный плагин (Angle Mockups, Artboard Studio, Mockups, Clay Mockups 3D, Figmockups, Mockup или любой другой).

Давайте рассмотрим применение мокапов на примере плагина Mockup. Остальные расширения работают по аналогии и отличаются только наборами шаблонов и интерфейсом.

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

Далее запускаем плагин Mockup и выбираем нужный шаблон. Допустим, экран Macbook Air (M2). 

Кликаем на шаблон, а затем на кнопку «Choose frames».

Выбираем фрейм, который хотим поместить на мокап. 

При необходимости корректируем положение картинки и нажимаем «Crop». 

Готово! Изображение появилось на шаблоне. 

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

Дополнительные инструменты и возможности Figma

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

Как экспортировать отдельные элементы и весь проект

Экспорт отдельных элементов 

Выделите нужные объекты и выберите команду «Export» в боковом меню.

Укажите масштаб и формат для сохранения изображения.

Далее нажмите «Export x layers» и сохраните файл.

Экспорт всего проекта

Способ 1. Кликните по пустой области, чтобы убрать все выделения. В разделе «Export» выберите масштаб и формат файла, нажмите «Export *название вашего проекта*» и сохраните документ.  

Способ 2. Кликните на стрелочку рядом с названием проекта и выберите «Export», либо используйте комбинацию клавиш Ctrl+Shift+E. Выберите объекты и слои, которые хотите сохранить, и еще раз нажмите «Export». 

Как переместить объекты в другие проекты или команды

Для перемещения отдельных объектов или целых групп слоев в другие объекты и команды пользуйтесь стандартной функцией «Копировать/Вставить». 

Для этого выделите нужные элементы и нажмите Ctrl+C, чтобы скопировать их. Далее откройте другой проект и нажмите Ctrl+V для вставки. 

Как посмотреть историю версий проекта

Нажмите на стрелочку рядом с названием проекта и выберите «Show version history». 

Справа появится колонка, в которой отображены все версии проекта за последние 30 дней. Для просмотра любой из них нажмите на соответствующую строку. 

Как пользоваться Фигмой на телефоне и в приложении

Фигму можно установить не только на компьютер, но и на телефон. Приложение называется «Figma Mirror» и доступно для пользователей устройств на Android и iOS. 

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

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

Как пользоваться Фигмой без интернета офлайн

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

При первой связи с интернетом приложение автоматически синхронизируется с сервером и сохранит все внесенные изменения. 

Где можно научиться пользоваться Фигмой

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

Бесплатные курсы: 

• «FigmaFigma. Начальный уровень» от GeekBrains. Длится 1 месяц, включает 5 уроков. Подойдет для новичков, на лекциях изучают базовые инструменты и функционал редактора.  
• «Видеокурс по Фигме» от Алексея Бычкова. Состоит из 23-х уроков, разбитых по темам. На курсе рассматриваются разные функции и инструменты, от простых до более сложных. Подойдет как начинающим, так и тем, у кого уже есть имеет небольшой опыт использования Figma.
• «Основы Figma» от Нетологии. Состоит из 3-х видеолекций, на которых разбираются все основные инструменты и возможности редактора. Подойдет для новичков. 
• «Figma» от канала «Наука дизайна» на Youtube. Видеокурс состоит из 15 уроков, длительность которых от 5 до 25 минут. Разбираются базовые инструменты и функционал редактора, подойдет для начинающих. 

Платные курсы: 

• «Figma с нуля до PRO» от Skillbox. Обучение длится 2 месяца, доступ к урокам остается навсегда. Подойдет тем, кто хочет быстро пройти путь от новичка до профессионала. Ученикам обещают много практики, несколько проектов в портфолио и помощь кураторов.
• «Figma для UI/UX дизайнерадизайнера». Можно учиться онлайн либо очно, если вы находитесь в Москве. Длится 24 академических часа, доступно индивидуальное обучение. На курсе обещают научить создавать интерфейсы и дизайны сайтов для десктопов и мобильных устройств. Для обучения нужны навыки работы в любой графической программе (Adobe Photoshop, Illustrator).
• «Основы дизайна в FigmaFigma» от «Яндекс Практикум». Рассчитан на 3 недели, есть бесплатная вводная часть. Можно выбрать тариф с наставником или без него. На курсе учат создавать логотипы, баннеры, дизайны лендингов и интерактивные прототипы приложений. Подойдет для новичков и тех, у кого уже есть небольшой опыт.  
• «Figma» от школы дизайна «Contented». Длится в течение двух недель, доступ к курсу остается навсегда. Подойдет для новичков. В процессе обучения научат создавать карточки товаров, иконки и прототипы сайтов для разных устройств. 

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

Заключение

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

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