Полное введение в Figma для начинающих дизайнеров

Всем привет, меня зовут Юлия. Я старший веб-дизайнер в компании «КодАвтоматизации». В этой статье я расскажу, как работать с Figma: с чего начать новичкам и как использовать её эффективно, если вы не дизайнер, но сталкиваетесь с макетами в работе. Материал будет полезен тем, кто хочет разобраться в инструменте без лишней теории и сложных терминов.

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

Кому и зачем нужна Фигма

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

Какие типы проектов можно создавать в Фигме

Прототип

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

Пример создания прототипа

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

Пример прототипа в полном масштабе

Элементы интерфейса

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

Примеры интерфейса, созданные в фигме

Векторные объекты в Figma

Фигма оснащена всеми необходимыми функциями и инструментами для работы с векторной графикой. Она поддерживает экспорт в формат SVG и позволяет загружать векторные объекты, созданные в Adobe Illustrator или Sketch.

Дополнительные задачи, которые решает Фигма

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

Шаблон организационной структуры в фигме

Предприниматели, SMM-специалисты и проектные менеджеры могут использовать Figma для ведения проектов с помощью диаграммы Ганта и создавать рекламные объявления, используя готовые шаблоны для Facebook.

Шаблон компании Facebook для соц. сетей

Для разработчиков Figma предлагает специальный режим — Dev Mode. Это отдельный интерфейс, оптимизированный для инспекции макетов и передачи дизайна в код. Он работает как мощный инспектор, показывая стили (CSS, SwiftUI, XML), расстояния, ресурсы (шрифты, изображения) и предоставляя готовые фрагменты кода. Dev Mode также улучшает коммуникацию: разработчики могут оставлять технические комментарии, видеть историю изменений конкретного компонента и использовать интеграции с Jira, GitHub и другими инструментами. Важное уточнение: Dev Mode доступен как платная надстройка к тарифам Professional и Organization. В качестве альтернативы можно использовать плагины для Figma — например, Inspect Styles, который частично заменяет функциональность Dev Mode и помогает разработчикам работать с макетами напрямую внутри Figma. Однако у этого решения есть ограничения: плагин работает только при наличии прав на редактирование макета и в ряде стран может быть недоступен без использования VPN.

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

Кнопка перехода в Dev Mode

Как организована командная работа в Figma

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

Почему стоит использовать Figma для совместной работы:

1. Кроссплатформенность – сервис доступен через браузер на любом устройстве и ОС. Не требуется установка дополнительных программ для согласования дизайна.
2. Облачное хранение – все правки сохраняются онлайн, доступны каждому члену команды, а при необходимости можно восстановить предыдущую версию макета.
3. Простая обратная связь – участники могут комментировать макеты, оставлять фидбек и быстрее согласовывать изменения, сохраняя всю историю обсуждений.

Первые шаги с Figma

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

Как установить Figma

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

Начальный экран регистрации на сайте Figma.com

Вы можете бесплатно установить Figma на компьютер – это позволит работать без лишних вкладок в браузере. Для скачивания перейдите на figma.com/downloads и выберите версию приложения для Windows или macOS.

Для просмотра макета на телефоне или планшете используйте мобильное приложение Figma или откройте figma.com/mirror в браузере.

Обзор интерфейса Фигмы

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

Фото интерфейса фигмы

Профиль

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

Фото профиля пользователя

Поиск

Функция Search помогает находить все проекты и файлы, к которым у вас есть доступ.

Панель поиска в фигме

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

Недавние файлы

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

Панель недавних файлов в фигме

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

Плагины

В меню Plugins вы найдете расширения, которые значительно ускорят вашу работу в Figma. Так, Unsplash дает возможность подбирать стоковые картинки без перехода на сторонние сервисы, а Iconify предлагает огромную коллекцию из более чем сотен тысяч иконок. Все плагины разделены по категориям: рекомендуемые, популярные и установленные. Чтобы увидеть весь каталог, выберите Browse all plugins.

Вкладка плагины

Новый файл

Чтобы создать новый файл воспользуйтесь пунктом Drafts или кнопкой New File в правом верхнем углу. Стандартное имя нового файла – Untitled.

Пример создания нового файла

Команда

Чтобы запустить совместный проект – создайте команду: нажмите New Team и дайте ей название.

Пример создания новой команды

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

Проекты

При добавлении команды Figma создает новый проект – своего рода папку для всех файлов, связанных с конкретным заданием. Это помогает организовать работу, если у вас десятки файлов. На бесплатном тарифе у вас неограниченное количество созданий Drafts (личные рабочие файлы), но есть ограничения на количество файлов/проектов, создаваемых внутри команды.

Вкладка проектов в фигме

Для создания нового проекта внутри команды нажмите New Project. В проекте можно создавать файлы с нуля или загружать сюда SVG, PNG и JPEG.

Пример создания нового проекта внутри команды

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

Пример кнопки Share в фигме

Структура и особенности редактора файлов Фигмы

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

Пример основных областей интерфейса в фигме

Поиск

Функция Search выполняет поиск по пунктам меню, а не по объектам, которые вы добавили в проект.  Это удобно, если вы ищите конкретную команду, если вы забыли, где она находится.

Пример поиска внутри файла

Панель File

Инструменты на панели помогают применять различные действия к текущему файлу. Например, команда New file from Sketch используется для импорта проектов, созданных в графическом редакторе Sketch.

Панель File

Figma – платформа для совместной работы, которая автоматически сохраняет все изменения. При необходимости можно зафиксировать версию вручную через команду Save to Version History или просмотреть историю правок коллег с помощью Show Version History.

Чтобы выгрузить файл Фигмы в PDF, воспользуйтесь командой Export Frames to PDF – это удобно для оформления презентаций.

Панель Edit

Панель помогает работать с любыми элементами файла. Действия применяются только к выделенным объектам. С помощью команды Copy As можно скопировать элемент в формате CSS, SVG или PNG, а Paste Over Selection вставляет его поверх другого объекта – в его левый верхний угол.

Панель Edit

Новые объекты создаются серого цвета, но если вам нужен другой цвет по умолчанию, примените Set Default Properties – скопируйте свойства нужного объекта, и все новые элементы будут создаваться уже с этим цветом.

Пипетка Pick Color помогает быстро подобрать нужный цвет.

Пример работы с пипеткой

Команды Select All with выделяют все элементы, похожие по свойствам: заливке, шрифту, эффектам и другим параметрам.

Пример вкладки Select All With

Панель View

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

Панель View

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

Пример работы функции Pixel Preview

Увеличить и уменьшить масштаб можно с помощью команды Zoom In и Zoom Out.

Пример вкладки Zoom In/Zoom Out

Для отображения линеек и создания направляющих используйте Rules.

Пример вкладки Rules

При необходимости расширить рабочую область можно скрыть панель слоев и интерфейс через Layers Panel и Show/Hide UI.

Пример вкладки Layers Panel и Show/Hide UI

Панель Preferences

Панель отвечает за навигацию по файлу. Первые три пункта: Snap to Geometry, Snap to Pixel Grid и Snap to Objects – регулируют привязку элементов. Они помогают слегка «примагнитить» объекты и сохранять ровную сетку, даже если вы работаете быстро.

Панель Preferences

Функцию Highlight Layers on Hover рекомендуется оставлять включенной: она подсвечивает мелкие элементы дизайна при наведении: кнопки, буквы, иконки и значки.

Пример работы функции Highlight Layers on Hover

Функция Keyboard Zoom into Selection изменяет масштаб относительно выбранного элемента, упрощая детальную работу с макетом.

Пример работы функции Keyboard Zoom into Selection

Основные инструменты и функции Фигмы

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

Фреймы

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

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

Пример вкладки создания фрейма

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

Пример слоев внутри фрейма

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

Windows	MacOS
Ctrl + Alt + G	Cmd + Opt + G	объединить объекты во фрейм
Ctrl + Shift + G	Cmd + Shift + G	разбить фреймы на объекты

Для выравнивания объектов по оси X/Y или настройки расстояния между ними используйте панель инструментов справа. 

Пример панели выравнивания

Объекты внутри фрейма можно группировать. Например, если создаете несколько страниц сайта и на каждой из вниз внизу располагаются контакты (телефон, адрес, часы работы и email), объедините эти элементы через команду Object – Group Selection или комбинацией клавиш Ctrl (Cmd) + G. В панели слоев появится новая группа, и вы сможете перемещать все связанные объекты одновременно.

Пример группы внутри фрейма

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

Пример работы инструмента Constraints

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

Модульная сетка

Сетка в фигме помогает упорядочивать элементы внутри фрейма и упрощает адаптацию дизайна под разные устройства. Для веб-дизайна удобно использовать 12-колоночную модульную сетку в стиле Bootstrap.

Пример модульной сетки в фигме

Чтобы добавить сетку, нажмите «+» в блоке Layout Grid. 

Пример добавления модульной сетки

Затем настройте количество колонок, их цвет, прозрачность и тип сетки – адаптивную, выровненную по центру или по краям. Если вы создаете сайты на Тильде, используйте такие параметры: 12 колонок, отступ между колонками – 40 px, боковые поля экрана – 103 px. 

Пример настроек сетки

Некоторые дизайнеры добавляют вертикальный ритм для удобного перемещения объектов и контроля расстояний между элементами. Для этого снова нажмите «+» в Layout Grid – появится дополнительная сетка с шагом 10 пикселей. 

Пример вертикального ритма

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

Для удобства настройте параметр Gutter=0, чтобы превратить колонку в тонкую линию с одним видимым краем.

Пример параметра Gutter при значении 0

Векторные формы

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

Пример вкладки создания векторных форма

Основные векторные фигуры – прямоугольник, линия, треугольник, стрелка, круг и звезда. Объекты произвольной формы можно рисовать свободно, а при зажатой клавише Shift фигура будет пропорциональной. Если удерживать Alt – объект будет масштабироваться из центра. Панель свойств объекта расположена справа. Разберем основные инструменты и на их примере создадим иконку «Закладка» из прямоугольника произвольной формы.

Пример панели свойств объекта

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

В верхней части панели можно менять положение объекта и растягивать его по оси X/Y. Параметр Corner Radius отвечает за скругление углов – именно он понадобится, если вы хотите придать форме закладки плавные верхние углы. По умолчанию радиус применяется ко всем углам, но при выборе Independet Radius можно менять каждую сторону отдельно. 

Пример работы параметра Corner Radius

Далее настроим обводку: толщина линии регулируется в блоке Stroke, а заливку можно отключить в разделе Fill, нажав на кнопку «глаз».

Пример работы параметра Stroke

Чтобы придать фигуре форму флага, вытяните нижнюю часть прямоугольника. Дважды кликнув по объекту, вы перейдете в режим редактирования – он автоматически включает инструмент Pen Tool. Но он нем поговорим подробнее дальше. 

Пример работы инструмента Pen Tool

В блоке Effects можно добавить тень или размытие. Когда иконка будет готова, сохраните ее через Export, выбрав формат SVG.

Пример блоков Effects и Export

Кривые

Pen Tool позволяет создавать изогнутые линии и простые векторные формы – например, иконки или небольшую графику. Если же вам нужны более сложные фигуры, удобнее подготовить их в Adobe Illustrator или Sketch и импортировать в Figma.

Пример вкладки создания кривых

Для дополнительной обработки используйте инструмент Bend Tool, чтобы плавно скруглять кривые, или Paint Bucket, чтобы заливать замкнутые контуры.

Пример использования инструмента Bend Tool

Изображения

Добавляйте изображения в макет через панель File, инструмент Place Image или простым перетаскиванием с рабочего стола. 

Пример использования в панели File вкладки Place image

В Figma фото вставляется как Shape, то есть как прямоугольник с заливкой. Изображение фактически становится фоном фрейма, поэтому его отображение регулируется через параметры Fill, Crop, Fit и Tile.

Пример вкладки настроек изображения

Параметр Fill позволяет картинке заполнять весь фрейм, но может потерять пропорции или обрезаться. 

Пример использования параметра Fill

Crop – позволяет обрезать ненужные части или выбрать нужный ракурс. 

Пример использования параметра Crop

При включённой опции Fit изображение полностью помещается во фрейме. Если пропорции фрейма отличаются от пропорций картинки, вокруг неё появится пустое пространство.

Пример использования параметра Fit

Параметр Tile повторяет изображение, создавая узор или паттерн. 

Пример использования параметра Tile

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

Пример панели изменения яркости и других настроек изображения

Чтобы добавить градиент, нажмете «+» в панели свойств и выберите тип: Linear, Radial, Angular или Diamond. Настройте цвета и расположение градиента, чтобы получить нужный визуальный эффект. 

Пример добавления градиента на изображение

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

Пример режимов смешивания изображения

Также можно применять векторные объекты как маски. Создайте форму, разместите ее под фотографией, выделите оба слоя и выберите Object – Use as Mask (Windows: Ctrl+Alt+M, Mac: Cmd+Opt+M)

Пример использования параметра Use as Mask

В Figma поддерживается импорт SVG-файлов – их можно загрузить с компьютера или вставить напрямую из Adobe Illustrator/Sketch через сочетание клавиш Ctrl-C (тут стрелка) Ctrl-V. Обычно такие файлы вставляются как фреймы: перейдите в слои, сгруппируйте векторные элементы (Ctrl+G) и поднимите группу выше фрейма.

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

Эффекты и маски

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

Пример панели с заливкой

В фигме доступно шесть типов заливки:

• Solid – сплошной цвет (данный режим настроен по умолчанию)
• Linear – линейный градиент
• Radial – радиальный градиент
• Angular – угловой градиент
• Diamond – градиент в форме ромба
• Image – заливка изображением.

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

Пример линейного градиента

У линейного градиента есть дополнительная скрытая ручка. Если удерживать Alt (Opt) и потянуть за нее, переход будет выстраиваться перпендикулярно этой ручке – так проще задать нужное направление. Меняя положение крайних точек и ползунков, вы управляете углом наклона градиента и степенью плавности перехода.

Подсказка: При необходимости можно добавить дополнительные точки цвета – просто кликните по линии над палитрой. Чтобы удалить лишнюю точку, нажмите Delete.

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

Пример использования режимов смешивания между разными объектами

Текст

По умолчанию в Figma доступна коллекция шрифтов Google Fonts. Если нужно использовать собственные шрифты, установите десктопную версию фигмы или поставьте Font Installers для Windows/Mac OS – это позволит загружать шрифты и работать с ними в версии браузера.

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

Пример панели работы с текстом

Подсказка: Если вы готовите дизайн для Тильды, задавайте межстрочное расстояние и трекинг в процентах: межстрочный интервал – 0-160%, межбуквенный – 0-30%.

В параметрах Advanced Type доступны три режима изменения размеров текстового блока:

• Width – ширина автоматически подстраивается под содержимое
• Fixed – фиксированная ширина текстового блока
• Height – высота блока автоматически подстраивается под текст.

Подсказка: Создавайте отдельные текстовые блоки для заголовков и основного текста – так удобнее редактировать структуру и управлять стилями.

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

Пример преобразования текста в кривые с помощью инструмента Flatten

Компоненты

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

Например, если в макете на 50 страниц нужно изменить цвет всех кнопок, достаточно изменить цвет у родительского компонента – и изменения автоматически применятся ко всем его экземплярам.

Чтобы создать компонент, выделите объект или группу и нажмите Create Component (Ctrl+Alt+K). 

Пример вкладки создания компонентов

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

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

Пример работы родительского компонента и его копий

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

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

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

Пример возврата дочернему компоненту настроек по умолчанию

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

Пример организации компонентов в фигме

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

Подсказка: Создайте набор компонентов и стилей, чтобы получить собственную мини-библиотеку и использовать ее в будущих проектах.

Текст – Сформируйте стили для всех типов текста в макете: заголовков, параграфов, подписей, тегов. Настройки задаются в правой панели.

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

Соберите все варианты в отдельный фрейм – так их будет проще применять и поддерживать.

Пример готовых текстовых стилей

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

Пример готовых цветовых стилей

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

Пример применения эффектов к объекту

Чтобы упростить работу с компонентами, Фигма предлагает инструмент под названием Auto Layout. Он помогает избежать проблем, когда изменяется контент, а размер компонента остается прежним. Например, вы добавили новую надпись в дочерний компонент кнопки, но ее размер не изменился – из-за этого дизайн выглядит некорректно.

Пример инструмента Auto Layout

Открепите дочерний элемент от родительского с помощью Detach Instance, затем примените к нему Auto Layout. Теперь кнопка будет автоматически подстраиваться под содержимое.

Пример создания кнопки через Auto Layout

Auto Layout позволяет управлять изменением размеров по горизонтали и вертикали. Доступны три режима:

• Fixed – фиксированный размер. Элемент не реагирует на изменение контента
• Hug – подстраивается под содержимое: увеличивается или уменьшается в зависимости от текста или вложенных элементов
• Fill – доступно для элементов внутри Auto Layout. Элемент заполняет доступное пространство контейнера по ширине или высоте.

Параметр Fixed

Параметр Hug

Параметр Fill

Для удобной работы с фреймами и адаптивными версиями дизайна через Auto Layout также доступны дополнительные функции:

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

Пример работы функции Wrap

Min/Max – позволяет задавать минимальные и максимальные размеры для фреймов и их дочерних элементов: минимальное значение не даст элементу стать меньше указанного, когда максимальное – не позволит перерасти допустимый размер. Такие ограничения помогают тестировать дизайн на разных устройствах и избегать искажений: элементы не будут сжиматься слишком сильно или, наоборот, растягиваться.

Пример работы функции Min/Max

Расширенные возможности и полезные опции Figma

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

Плагины в Figma

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

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

• Grid for Tilda Publishing

Плагин Grid for Tilda Publishing

Плагин автоматически генерирует сетку для проектов на Tilda. Раньше приходилось помнить все параметры сетки или копировать ее вручную. Теперь достаточно одного нажатия.

• Unsplash

Плагин Unsplash

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

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

• Iconify

Плагин Iconify

Библиотека с более чем 40 000 векторных иконок: Material Design, FontAwesome, Jam Icons, Twitter Emoji и многие другие. Идеально подходит для быстрой работы с иконографикой.

• Figmotion

Плагин Figmotion

Инструмент для создания базовых анимация прямо внутри фигмы, без необходимости переходить в Principle, After Effects или CapCut.

• Design Lint

Плагин Design Lint

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

• Human to Figma

Плагин Human to Figma

Библиотека иллюстраций людей, созданная Пабло Стэнли – дизайнером InVision Studio. Можно использовать готовые персонажи или комбинировать элементы, собирая собственные вариации.

Горячие клавиши в Фигме

Список сочетаний горячих клавиш можно открыть в разделе Keyboard Shortcuts. Он находится в меню Help and Account, либо его можно вызвать комбинацией Ctrl+Shift+? (Cmd+Shift+?).

Подсказка: Figma подсвечивает используемые вами сочетания синим цветом, а те, которыми вы не пользуетесь – серым.

Экспорт в Figma

В Фигме можно экспортировать как отдельные элементы, так и целые фреймы. Панель экспорта находится в панели справа.

Пример панели экспорта из фигмы

Горячие клавиши для вызова окна экспорта:

• Windows: Ctrl + Shift +E
• MacOS: Cmd + Shift + E

Перед сохранением вы можете добавить суффикс к имени файла (Suffix) и настроить масштаб, например, экспорт в х2.

Выберите формат, подходящий под задачу: для иконок и векторных элементов подойдет SVG, JPEG/PNG – для изображений, а формат PDF подойдет для векторных макетов, которые нужно масштабировать без потери качества.

Пример форматов экспорта

FigJam

FigJam – это интерактивная белая доска для командной работы. Она подходит для мозговых штурмов, визуализации процессов, создания схем и аналитики.

В ней можно:

• Обсуждать проекты – команда может работать на общей доске, оставлять стикеры, создавать комментарии, подключаться к голосовому чату и даже включать музыку. В FigJam уже встроены инструменты ИИ: «Сортировка» - группирует автоматически стикеры по темам, а «Сводка» автоматически собирает информацию из стикеров в единый текст.

Пример обсуждения проектов в FigJam

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

Пример конспекта интервью в FigJam

• Строить Customer Journey Map – CJ map помогает визуализировать путь клиента. Его действия, эмоции, ожидания и барьеры. На карту легко добавлять стикеры, эмодзи, стрелки и другие виджеты.

Пример CJ map в FigJam

Тарифы

На бесплатном тарифе (Starter) в Фигме можно работать с неограниченным количеством (Drafts), а редактировать файлы вместе с вами сможет еще один пользователь, если дать ему роль редактора. Просматривать проекты могут все желающие, а история версий хранится 30 дней.

Профессиональный тариф (Professional) открывает доступ к неограниченному количеству проектов, позволяет сохранять историю изменений без ограничений и использовать командную библиотеку элементов. Данный тариф использует модель типов мест (seats): Collab, Dev, Full. Тариф подойдет для фрилансеров, небольших команд, где используется один крупный проект или продукт. Professional предоставляет full seats примерно за 16$ в месяц при годовой оплате.

Для компаний из нескольких человек предусмотрен корпоративный план (Organization). Данный тариф использует модель типов мест (seats): Collab, Dev, Full – он стоит 55 долларов в месяц за каждого редактора и включает расширенные возможности для командной работы.

Тариф Enterprise предусмотрен для масштабных проектов, крупных компаний или агентств – ориентирован на масштаб и безопасность, включает в себя все функции из тарифа Organization + расширенное управление (кастомные рабочие пространства, управление пользователями и доступом и другое).

Пример тарифов в фигме

Ограничения Фигмы

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

• Фигма поддерживает ограниченную офлайн-работу: можно редактировать ранее открытые файлы, но синхронизация и доступ к библиотекам недоступны без интернета.
• Падение производительности на больших/сложных файлах. Если проект содержит много слоев, компонентов, сложные векторные графики – Фигма может тормозить, лагать, медленно загружать файлы. Это неудобно при работе над крупными дизайн-системами или сложными интерфейсами.Для новичков – крутая кривая обучения. Несмотря на относительно дружелюбный интерфейс, освоить все, что Фигма умеет (компоненты, Auto Layout, вариантные компоненты, прототипирование и тд) может быть непросто. Особенно если раньше не работали с дизайн-инструментами.

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

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

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