Все
Истории
Дизайн
Код
Геймдев
Бизнес
Маркетинг
Управление
Кино
Музыка
Проектная фотография
Развитие
Здоровье
Деньги
Образование
EdTech
Корп. обучение
Блог Skillbox
Глоссарий
Спецпроекты
Профориентация
Большой гид по Figma: что это, её возможности и как работать с программой
Рассказываем, с чего начать знакомство с графическим редактором и как выйти на продвинутый уровень.
Один из главных инструментов дизайнера сегодня — Figma. В ней готовят макеты, создают интерфейсы приложений и сайтов и тестируют пользовательские сценарии.
В этой статье мы рассказали об основных возможностях Figma и собрали наши полезные материалы, которые помогут погрузиться в особенности этого графического редактора.
Читайте в материале:
- что такое Figma и зачем она нужна;
- как начать работать в Figma;
- как устроен интерфейс Figma;
- какие инструменты Figma ускоряют работу над проектом;
- зачем в Figma нужны плагины;
- какие есть новые продукты в Figma;
- как научиться работать в Figma.
Что такое Figma и зачем она нужна
Если коротко, Figma — графический редактор, в котором проектируют цифровые продукты. Здесь можно создавать дизайн прямо в браузере в режиме совместной работы с коллегами. Специалисты и команды, которые занимаются созданием приложений, сайтов, визуалом для разных целей, ценят её за универсальность и удобство в работе. Вот для чего используют Figma:
- Разработка UI/UX-дизайна сайтов и приложений. Дизайнер может оформить в Figma структуру будущего продукта и сразу протестировать, как будет выглядеть путь пользователя.
- Прототипы и сценарии пользователя. В Figma можно показать, как будет происходить переход между экранами приложения, например как после нажатия на карточку товара пользователь попадёт на страницу с его описанием, а после клика по кнопке откроется корзина.
- Режим Dev Mode. С помощью него разработчики могут внутри Figma переводить дизайн проекта в код и редактировать его.
Читайте также:
Как начать работать в Figma
Начать работу в Figma можно с web-версии — скачивать программу необязательно. Для постоянной работы можно установить приложение на ПК. Интерфейс и функции в онлайн- и десктоп-Figma устроены одинаково.
Для работы онлайн создайте аккаунт на figma.com. Зарегистрироваться можно по электронной почте, например через Google-профиль. После авторизации вы попадёте в рабочее пространство — здесь находятся все файлы, проекты и документы, которыми с вами поделились.
Есть приложения Figma для Windows и macOS, а также мобильные на Android и iOS. Они работают отдельно от браузера и подходят тем, кто регулярно использует редактор. Скачать их можно на сайте Figma.
После авторизации в Figma открывается окно с проектами, с которыми пользователь работал и к которым у него есть доступ. Чтобы создать новый файл, в верхнем правом углу нужно кликнуть на кнопку Design — откроется редактор с большим пустым холстом.
Интерфейс Figma: основные элементы
Чтобы начать работу, достаточно разобраться с базовыми частями интерфейса.
Панель инструментов находится в нижней части редактора. Здесь располагаются основные функции для создания фреймов, текста, фигур и других объектов. Каждый созданный объект отображается в левой части в списке слоёв. Если макет состоит из нескольких элементов, панель слоёв помогает понять их структуру и быстро выбрать нужный объект.
Холст — рабочая область в центре экрана, на которой находятся фреймы и объекты. Здесь собирают макеты.
Свойства объектов находятся справа. В этой панели можно менять размеры, положение, цвет, шрифт, обводку, скругление и другие параметры выбранного элемента.
Логика работы проста: выберите объект → найдите нужное свойство справа → измените его настройки. Например, если вы кликнете на текст, на панели справа появятся настройки шрифта, размера и цвета. Если выбрать прямоугольник, панель покажет параметры фигуры.
Читайте также:
Что можно делать в Figma
У Figma много возможностей, но начать знакомство лучше с пяти основных направлений.
Создавать интерфейсы сайтов и приложений
Это основная задача Figma. В редакторе можно собрать отдельные экраны, страницы сайта или целый набор интерфейсов. Макеты можно собрать из базовых элементов: текста, изображения, фигур и других объектов. Их можно менять по размеру, выравнивать, группировать и объединять в более сложные элементы: автолейауты, компоненты для повторяющихся блоков, рабочие прототипы.
Делать прототипы
По сути, это уже работающие приложения/страницы, которые можно создать и потестировать в рамках графического редактора. Пользователь может объединить несколько отдельных экранов в интерактивный сценарий, где элементы интерфейса будут реагировать на нажатие, между фреймами будут настроены переходы так, как это происходило бы в готовом продукте.
Читайте также:
Работать с графикой и изображениями
В Figma можно добавлять изображения, создавать простые векторные объекты, менять заливку и обводку, применять скругления, прозрачность и эффекты.
Создавать дизайн-системы
В Figma десятки одинаковых компонентов (карточки, кнопки, поля и так далее) можно превратить в компоненты и использовать в проекте повторно. Так постепенно собирается дизайн-система — набор компонентов и правил, которые помогают сохранять единый стиль продукта.
Использовать плагины и автоматизацию
Плагины помогают лучше работать с текстами и изображениями, автоматизировать рутинные операции, генерировать контент и использовать AI-инструменты.
Инструменты Figma, которые ускоряют работу
Когда базовая работа с объектами понятна, можно переходить к функциям, с которыми создавать интерфейсы становится быстрее.
Фреймы и сетки
Фрейм — это рабочее пространство (рамка), внутри которого находятся элементы интерфейса. Например, весь экран мобильного приложения или страница сайта может быть отдельным фреймом.
Фреймы помогают организовать макет и управлять его содержимым. Внутри такой рамки можно разместить как отдельные элементы, например текст, изображения, кнопки, так и другие фреймы.
Выравнивать элементы и структурировать интерфейс помогают сетки. Особенно это полезно в макетах сайтов, где важная чёткая вёрстка.
Читайте также:
Компоненты и варианты
Компонент — элемент, который можно многократно использовать в макете.
Допустим, в интерфейсе есть десять одинаковых кнопок. Если каждая создана отдельно, изменение дизайна придётся повторять десять раз. Компонент позволяет сделать один исходный элемент и использовать его дубли (экземпляры) на других участках экрана.
Варианты помогают объединять разные состояния одного компонента (Property). Например, у кнопки могут быть состояния Default («Обычная»), Hover («При наведении») и Disabled («Неактивная»).
Компоненты и варианты помогают дизайнеру поддерживать продукт в актуальном состоянии и не вносить одинаковые изменения во всём проекте: достаточно будет внести правки в исходный элемент, и они автоматически применятся к связанным экземплярам.
Читайте также:
Auto Layout
Инструмент Auto Layout помогает автоматически выстраивать элементы с учётом их размеров и отступов.
Например, в вашем проекте есть кнопка с текстом «Войти». Если заменить текст на «Войти в аккаунт», кнопка с включённым Auto Layout может сама расшириться, сохранив заданные отступы вокруг текста.
Эта функция особенно полезна для интерфейсов, где содержимое меняется. Вместо того чтобы вручную передвигать элементы после каждого изменения, дизайнер задаёт правила, как эти элементы должны быть расположены.
Читайте также:
Эффекты и оформление
В Figma к созданным объектам можно применять заливки, обводки, прозрачность, скругления, тени и другие эффекты, чтобы получить нужный результат. Например, обычный прямоугольник можно превратить в карточку: добавить цвет фона, скруглить углы и настроить тень.
Эти инструменты помогают создавать полноценное визуальное оформление прямо в Figma. Однако сложную обработку изображений лучше доверить профильным программам.
Эрик Шевченко
Ведущий коммуникационный дизайнер Газпромбанка, арт-директор Rize
— Упростить работу помогут AI-функции. В бесплатной версии Figma доступен ИИ-агент, который хорошо понимает русский язык и запросы в свободном стиле. Чтобы им воспользоваться, нужно выделить любой фрейм и нажать синюю звёздочку в верхнем правом углу.
Агент умеет заполнять готовые макеты информацией, подходящей по контексту, а также создавать новые макеты (вы можете редактировать их сами или попросить это сделать ИИ). Кроме того, агент может создать тёмную тему для всего вашего интерфейса, превратить скриншот таблицы в полностью редактируемый фрейм с данными или нарисовать иконку/иллюстрацию.
Если вы планируете работать с графикой и коммуникациями, обратите внимание на новую функцию Figma — Shader. Она находится в списке эффектов в самом низу. С её помощью ко всему содержимому фрейма можно применять огромное количество визуальных приёмов.
Вам сразу доступна библиотека готовых эффектов, а также есть возможность сделать собственный с помощью ИИ-агента. Для этого достаточно своими словами описать ему, что должен делать ваш шейдер, и можно добавить несколько картинок с примерами. Агент задаст уточняющие вопросы и выдаст результат за 5–10 минут.
Готовые шейдеры можно редактировать в любое время, написав агенту, что нужно добавить или убрать.
Как создавать прототипы в Figma
Прототип — это интерактивная версия макета. С помощью него можно спроектировать не только внешний вид интерфейса, но и сценарии использования с переходами между экранами. Например, если вы создали в Figma главную страницу, каталог и карточку товара, в режиме прототипирования вы можете связать кнопку или карточку с нужным экраном и после нажатия перейти на него.
Готовый прототип можно запустить в режиме просмотра и пройти как обычный интерфейс. Эта функция нужна, чтобы заметить проблемы в навигации ещё до разработки или презентовать проект заказчику/руководителю.
Работу с прототипами можно начать с простых задач — научиться связывать фреймы и задавать переходы. И уже постепенно учитесь настраивать сложную анимацию и состояния компонентов — например, по нашим пошаговым инструкциям.
Плагины Figma: зачем нужны и какие бывают
Расширить возможности Figma можно с помощью плагинов — программных модулей, которые устанавливают дополнительно. Они могут добавлять нужный контент и компоненты, упрощать работу над объектами или автоматизировать повторяющиеся действия.
Найти их можно в Figma Community. Условно плагины можно разделить на несколько групп — в зависимости от задач, которые они выполняют.
Плагины для ускорения работы помогают пользователю быстрее выполнять рутинные повторяющиеся действия: переименовывать слои, выравнивать объекты и так далее. Например, Remove BG может автоматически удалить фон сразу с нескольких изображений.
Читайте также:
Плагины для текстов нужны, чтобы редактировать, генерировать и заменять содержимое фреймов, заполнять макеты реалистичными данными и создавать варианты текстовых блоков. Например, SBOL Typograph автоматически исправляет типографику: меняет тире, проставляет букву «ё», убирает лишние пробелы. А с помощью плагина Figmoji можно добавлять эмодзи, которые будут отображаться без искажения формата.
С помощью плагинов для изображений можно быстро искать и добавлять в макет фотографии, аватары, иллюстрации из готовой коллекции.
Скриншот: Figma Community / Skillbox Media
Скриншот: Figma Community / Skillbox Media
Читайте также:
Плагины с AI-инструментами в Figma помогают генерировать контент, работать с макетами и быстрее переходить от идеи к прототипу. Однако результат генерации всё равно необходимо проверять.
Читайте также:
Ещё есть плагины для автоматизации, которые запускают цепочку простых действий вместо дизайнера или помогают обрабатывать сразу много объектов. Например, есть плагины, которые могут распознать и выделить в проекте все одинаковые объекты, вставить в нужные поля данные из таблицы, импортировать в макет логотипы из готовой подборки. Так, с последним может помочь Brandfetch.
Новые возможности Figma: AI, автоматизация, Dev Mode и новые продукты
Одно из заметных нововведений — AI-инструмент Figma Make. С помощью него по промпту можно генерировать интерактивные прототипы, отдельные компоненты и даже целые интерфейсы. Результат генерации можно (и нужно) редактировать. Чтобы создать такой файл, нужно в личном кабинете выбрать в верхнем правом углу опцию Make.
Скриншот: Figma / Skillbox Media
Ещё один важный инструмент — Dev Mode. Он упрощает передачу дизайна в разработку, позволяя программистам:
- быстро сканировать структуру макета;
- извлекать точные размеры, отступы и свойства элементов;
- генерировать чистый код для запуска интерфейса.
Читайте также:
Есть и другие продукты экосистемы. Например, FigJam — он предназначен для совместной работы на онлайн-доске, Figma Slides — для презентаций, или Figma Sites — для создания и публикации сайтов.
Как научиться работать в Figma
Если вы совсем новичок, начните с интерфейса Figma: создайте файл, добавьте фрейм, текст и несколько фигур. Научитесь перемещать объекты, менять их размеры, цвета и другие свойства.
Если вы уже разобрались с базовыми функциями Figma, лучше сфокусироваться на более продвинутых инструментах: компонентах, вариантах, Auto Layout, стилях, отточите навыки работы с эффектами и плагинами. Они позволяют перейти от отдельных объектов к структурированным интерфейсам.
Познакомившись с основными инструментами, попробуйте собрать небольшой прототип из нескольких экранов. Хорошее упражнение — повторить в Figma знакомый интерфейс. Например, выберите один экран мобильного приложения и попробуйте воспроизвести его самостоятельно. Так вы будете учиться не абстрактным кнопкам, а решению конкретной дизайнерской задачи.
Отдельно стоит изучить прототипирование и Dev Mode, если вы работаете в продуктовой команде.
Скриншот: Figma / Skillbox Media
Если вы хотите связать карьеру с интерфейсами и продуктовым дизайном, начните изучать UI/UX-дизайн. Есть много курсов, которые дают системные знания от основ композиции и типографики до пользовательских сценариев и проектирования интерфейсов.
Начать знакомство с сервисом можно и с бесплатных материалов: обучающих статей и видео, обзоров на функции. Часто этого достаточно, чтобы разобраться в интерфейсе Figma и собрать первые макеты.
Частые вопросы
Что такое Figma простыми словами?
Figma — графический редактор, в котором можно собирать макеты, работать с графикой, создавать прототипы и готовить дизайн к передаче разработчикам. Figma также поддерживает совместную работу: несколько человек могут одновременно редактировать один файл и оставлять комментарии.
Figma бесплатная или платная?
У Figma есть бесплатный тариф, возможностей которого достаточно для знакомства с редактором и небольших проектов. Платная подписка стоит от 15 долларов и даёт дополнительные функции для командной работы, управления проектами и более сложных рабочих процессов. Однако на момент написания статьи (август 2026 года) оплатить подписку картой российского банка не получится.
Подходит ли Figma новичкам?
Да. Для начала достаточно освоить несколько базовых инструментов: фреймы, текст, фигуры, слои и свойства объектов. После этого можно постепенно переходить к компонентам, Auto Layout и прототипированию. Необязательно изучать все функции редактора сразу — удобнее осваивать их на практике, по мере усложнения задач.
Можно ли работать в Figma без установки?
Да. Figma работает в браузере, поэтому для начала достаточно открыть веб-версию и войти в аккаунт. Отдельное приложение для Windows или macOS устанавливать необязательно. Основные возможности в браузерной и десктопной версиях одинаковы.
Чем Figma отличается от Photoshop?
Figma в первую очередь предназначена для проектирования интерфейсов и цифровых продуктов: в ней удобно создавать макеты сайтов и приложений, компоненты и прототипы, а также работать над проектом вместе с командой.
Photoshop больше ориентирован на сложную обработку растровых изображений: ретушь фотографий, цветокоррекцию, сложный монтаж и работу с графикой. Поэтому дизайнер может использовать обе программы, но для создания интерфейсов Figma обычно удобнее.
