Никита Семёнов
10 июля 2026
Figma с нуля: бесплатная программа обучения для начинающих дизайнеров
Менторство по подписке — 7 дней бесплатно
Чтобы освоить Figma с нуля, необязательно сразу покупать большой курс. В интернете уже есть сильные бесплатные статьи и видео, которые подробно объясняют основные возможности программы.
Проблема в другом: начинающему дизайнеру сложно понять, с чего начать, какие уроки действительно пригодятся и в каком порядке их проходить. В результате человек смотрит случайные видео, перескакивает между темами и всё равно остаётся с пробелами в знаниях.
Поэтому мы собрали лучшие, на наш взгляд, открытые материалы по Figma и расположили их от простого к сложному. Получилась бесплатная программа обучения для начинающих дизайнеров и джунов.
Это не единый авторский курс по Figma, записанный X-Mentors. Все статьи и видео создавали другие специалисты и образовательные проекты. Мы не присваиваем себе их работу: только отобрали полезные материалы, объединили их в последовательную программу и объяснили, на что стоит обращать внимание во время обучения.
Пройдя программу и самостоятельно применяя знания на практике, ты разберёшься в интерфейсе Figma, фреймах, сетках, тексте, стилях, Auto Layout, компонентах и прототипировании. Эти инструменты пригодятся при создании макетов сайтов и мобильных приложений.
При этом важно понимать: посмотреть урок и правильно применить инструмент — не одно и то же. Видео может показать, как устроен Auto Layout, но не заметит лишние вложения, случайные отступы или неправильно собранные компоненты именно в твоём макете. Об этом тоже поговорим ниже.
Содержание программы
Знакомство с Figma и интерфейсом.
Фреймы, группы, секции, слои и сетки.
Текст, стили, Auto Layout и адаптивность.
Компоненты и повторно используемые элементы.
Прототипирование и интерактивность.
Что такое Figma и для чего она нужна дизайнеру
Figma — это инструмент для проектирования цифровых продуктов. В ней дизайнеры создают макеты сайтов, мобильных приложений, интернет-магазинов, личных кабинетов и других интерфейсов.
В Figma можно:
собирать экраны сайтов и приложений;
работать с текстом, цветами, изображениями и графикой;
выстраивать элементы по сетке;
создавать повторно используемые компоненты;
адаптировать макеты под разные размеры экранов;
связывать экраны в интерактивные прототипы;
совместно работать над проектом;
передавать макеты разработчикам.
Сама Figma позиционирует продукт как совместную платформу для дизайна, прототипирования и создания цифровых продуктов.
Макет в Figma — это ещё не готовый сайт или приложение. Он показывает, как должен выглядеть интерфейс, из каких элементов он состоит и как пользователь будет с ним взаимодействовать.
Для начала обучения не нужно уметь программировать или работать в других графических редакторах. Программа начинается с регистрации, знакомства с интерфейсом и базовых действий.
Как проходить программу обучения
Материалы расположены последовательно: от знакомства с инструментом до компонентов и интерактивных прототипов. Лучше проходить их именно в этом порядке.
Не пытайся посмотреть всё за один день. После каждого материала открой Figma и попробуй применить новый инструмент самостоятельно. Механически повторить действия за автором недостаточно: важно понять, какую задачу решает инструмент и когда его стоит использовать.
Также учитывай, что интерфейс Figma со временем меняется. Внешний вид панелей и расположение отдельных настроек в видео могут отличаться от актуальной версии программы. В таком случае ориентируйся на название функции и принцип её работы.
Этап 1. Знакомство с Figma: регистрация, вход и интерфейс
На первом этапе не нужно запоминать все функции программы. Твоя задача — понять, как устроено рабочее пространство, создать первый файл и научиться выполнять базовые действия.
Ты познакомишься с:
регистрацией и входом;
созданием нового файла;
рабочей областью;
основными панелями;
инструментами создания объектов;
выделением и перемещением элементов;
изменением размеров;
масштабированием рабочей области.
Материал для изучения
Это один материал, в котором последовательно разбираются назначение Figma, регистрация, вход и основные части интерфейса.
Этап 2. Фреймы, группы, секции, слои и сетки
После знакомства с интерфейсом можно переходить к структуре макета.
Одна из распространённых ошибок начинающих — складывать элементы в случайные группы и не следить за порядком в слоях. Пока в файле один экран, это почти не мешает. Но когда появляются десятки экранов, компоненты и адаптивные версии, работать с такой структурой становится сложно.
Группы, фреймы и секции
Группа объединяет несколько объектов. Фрейм — это более функциональный контейнер, внутри которого можно настраивать размеры, направляющие, привязки, Auto Layout и другие параметры.
Секции помогают объединять крупные части проекта. Например, в одной секции можно разместить экраны авторизации, в другой — личный кабинет, а в третьей — компоненты.
Перо, линия и карандаш
Эти инструменты используются для создания линий, контуров и собственных векторных форм.
Чтобы проектировать интерфейсы, необязательно уметь рисовать сложные иллюстрации. Но базовое понимание векторных инструментов пригодится, когда нужно создать простую форму, изменить иконку или отредактировать контур.
Scale
Обычное изменение размера объекта и его масштабирование работают по-разному.
При обычном растягивании отдельные свойства объекта могут сохранить прежние значения. Инструмент Scale помогает пропорционально изменить объект вместе с его параметрами.
Поиск и панель слоёв
В рабочем проекте могут быть сотни объектов. Если все они называются Rectangle 12, Frame 45 и Group 8, ориентироваться в файле будет сложно и самому дизайнеру, и его коллегам.
Полезно сразу привыкать:
давать слоям понятные названия;
соблюдать логичную вложенность;
объединять связанные элементы;
не создавать лишние контейнеры;
удалять неиспользуемые объекты;
одинаково организовывать похожие экраны.
Сетки и направляющие макета
Сетки помогают выстраивать элементы последовательно, соблюдать поля и поддерживать единую структуру страницы.
В актуальной терминологии Figma прежнее название Layout grid заменили на Layout guide — направляющие макета. При этом в русскоязычных статьях и видео по-прежнему часто используется привычное слово «сетка». Это разные названия одной и той же темы, поэтому при поиске настроек учитывай оба варианта.
Для сайтов часто используют колоночные сетки. В мобильных интерфейсах могут применяться фиксированные внешние поля и базовая система отступов.
Сетка не создаёт хороший дизайн автоматически. Она только помогает сохранять порядок и выравнивать элементы по понятным правилам.
Эффекты
В Figma можно добавлять тени, размытие и другие визуальные эффекты. Они помогают отделять элементы от фона, создавать глубину и подчёркивать визуальную иерархию.
При этом большое количество эффектов не делает интерфейс профессиональнее. Каждый эффект должен решать понятную задачу, а не просто украшать макет.
Результат этапа
После прохождения этого блока ты сможешь:
отличать фреймы от групп;
объединять экраны с помощью секций;
поддерживать порядок в слоях;
использовать базовые векторные инструменты;
масштабировать объекты;
работать с сетками и направляющими;
добавлять визуальные эффекты.
Почему в интерфейсах всё часто строится вокруг числа 4
Изучая макеты, ты можешь заметить, что размеры и отступы часто кратны четырём:
4 пикселя;
8 пикселей;
12 пикселей;
16 пикселей;
24 пикселя;
32 пикселя.
Такой подход помогает создать ограниченную и предсказуемую систему значений. Вместо случайных отступов в 13, 17 или 29 пикселей дизайнер использует заранее выбранный шаг.
Это упрощает работу:
интервалы выглядят последовательнее;
элементы проще выравнивать;
компоненты легче поддерживать;
в макете становится меньше случайных значений;
разработчику проще понять заложенную систему.
Это не значит, что абсолютно каждое значение обязано делиться на четыре. Размер шрифта, высота строки, толщина обводки или особенности конкретного элемента могут требовать других значений.
Система, построенная вокруг числа 4, — полезный ориентир, а не нерушимый закон.
Этап 3. Текст, стили, Auto Layout, привязки и адаптив
Ты разберёшься с настройками текста, повторно используемыми стилями, Auto Layout и поведением элементов при изменении размеров.
На этом этапе начинается работа с инструментами, которые постоянно используются при создании макетов сайтов и приложений.
Работа с текстом
Текст — одна из основных частей интерфейса. Пользователь взаимодействует с заголовками, описаниями, кнопками, полями ввода, подсказками и сообщениями.
При работе с текстом в Figma важно понимать:
семейство шрифта;
начертание;
размер;
межстрочный интервал;
межбуквенное расстояние;
выравнивание;
настройки абзаца;
размеры текстового блока.
Даже в небольшом макете лучше использовать ограниченный и последовательный набор размеров и начертаний, а не настраивать каждый текстовый блок отдельно на глаз.
Формулы в числовых полях
В числовых полях Figma можно выполнять вычисления. Это помогает быстро изменить значение относительно текущего: прибавить отступ, разделить ширину или увеличить размер в несколько раз.
Такая возможность не относится к основным инструментам, но заметно ускоряет повторяющиеся действия
Копирование объектов и свойств
В Figma можно копировать не только сами объекты, но и отдельные свойства. Также можно дублировать элементы, сохраняя расстояние между копиями.
При этом не стоит создавать десятки независимых копий одного и того же элемента. Если объект повторяется на разных экранах и должен обновляться централизованно, позднее его лучше превратить в компонент.
Цвета, эффекты и стили
Стили помогают сохранять выбранные параметры и повторно использовать их в проекте.
Например, вместо ручного выбора оттенка синего на каждом экране можно создать единый цветовой стиль. Если цвет изменится, его не придётся искать и исправлять во всём макете.
Стили можно создавать для текста, цветов, эффектов и направляющих макета.
Auto Layout
Auto Layout, или автолейаут, помогает создавать элементы, которые подстраиваются под содержимое и изменение размеров контейнера.
Представь кнопку. Если нарисовать прямоугольник и отдельно положить поверх него текст, после изменения надписи придётся вручную менять ширину кнопки и заново выравнивать текст.
В Auto Layout контейнер может автоматически учитывать длину надписи и сохранять заданные внутренние отступы.
Автолейаут используют при создании:
кнопок;
карточек;
списков;
меню;
форм;
секций сайтов;
повторяющихся блоков;
целых экранов.
Во время обучения важно разобраться с:
горизонтальным и вертикальным потоком;
grid-потоком;
расстоянием между элементами;
внутренними отступами;
выравниванием;
фиксированными размерами;
Hug contents;
Fill container;
вложенными Auto Layout.
В актуальной версии Figma Auto Layout поддерживает горизонтальный, вертикальный и grid-потоки, а параметры Hug contents и Fill container управляют тем, как контейнеры и вложенные элементы изменяют размеры.
Привязки и Auto Layout
Привязки управляют поведением объектов внутри фрейма при изменении его размеров.
Например, элемент может:
сохранять расстояние от левого края;
оставаться у правого края;
находиться по центру;
растягиваться вместе с контейнером;
сохранять расстояние сразу от двух сторон.
Привязки и Auto Layout решают связанные, но не одинаковые задачи. Поэтому важно понимать, когда достаточно привязки, а когда структуру лучше собирать с помощью автолейаута.
Адаптив в Figma
Figma не превращает десктопный макет в мобильный автоматически. Дизайнеру всё равно нужно решить:
какие элементы растягиваются;
какие блоки перестраиваются;
что переносится на новую строку;
как меняются внешние и внутренние отступы;
какие элементы скрываются;
когда нужен отдельный вариант компонента.
Auto Layout упрощает эту работу, но результат зависит от того, насколько правильно собрана структура.
Создание стилей
Когда основные цвета и текстовые параметры определены, их стоит сохранить в виде стилей. Это помогает поддерживать единообразие и быстрее вносить изменения.
Результат этапа
После этого блока ты сможешь:
настраивать текст;
использовать единые цвета и стили;
применять формулы в числовых полях;
копировать объекты и свойства;
собирать элементы на Auto Layout;
настраивать привязки;
создавать структуру, которую проще адаптировать под разные размеры.
Урок показывает инструмент, но не проверяет твой макет
По видео можно разобраться, где находится Auto Layout и как работают его настройки. Но урок не увидит, почему именно в твоём макете карточка разваливается, появились лишние фреймы или неправильно настроены размеры.
Иногда элемент визуально выглядит нормально, но его внутренняя структура собрана так, что любое изменение текста приводит к новым проблемам.
Ментор может открыть твой файл, показать конкретные ошибки и помочь перестроить решение. Менторы X-Mentors разбирают макеты в Figma, оставляют комментарии и записывают видеоразборы решений.
Этап 4. Компоненты и повторно используемые элементы
Компоненты помогают не собирать одинаковые элементы заново на каждом экране.
Представь, что в проекте используется одна и та же кнопка. Если на десяти экранах находятся десять независимых копий, изменение цвета, высоты или скругления придётся вносить вручную.
Вместо этого можно создать основной компонент и использовать его экземпляры. Изменения в основном компоненте будут применяться к связанным экземплярам.
Основы компонентов
Сначала разберись:
что такое основной компонент (мастер);
что такое экземпляр (инстанс);
как создать компонент;
как найти его оригинал;
какие изменения распространяются на экземпляры (инстансы);
какие свойства можно менять отдельно.
Что стоит превращать в компонент
Не каждый объект нужно делать компонентом.
Компонент особенно полезен, если элемент:
повторяется;
используется на разных экранах;
имеет несколько состояний;
должен обновляться централизованно;
сохраняет одинаковую структуру при разном содержимом.
Типичные примеры:
кнопки;
поля ввода;
карточки;
пункты меню;
табы;
чекбоксы;
элементы навигации.
Избыток компонентов тоже усложняет файл. Если превращать в компонент каждую случайную группу объектов, библиотеку будет трудно поддерживать.
Замена вложенных элементов
В экземпляре компонента можно заменять вложенные элементы. Например, менять иконку в кнопке или изображение в карточке, сохраняя общую структуру.
Варианты
Variants позволяют объединять разные состояния или типы одного компонента.
Например, у кнопки могут быть варианты:
основная и второстепенная;
маленькая и большая;
обычная и неактивная;
с иконкой и без неё.
Вместо набора разрозненных компонентов можно создать одну систему с понятными свойствами.
Свойства компонентов
Свойства компонентов помогают управлять экземплярами. С их помощью можно изменять текст, показывать и скрывать элементы, переключать варианты и заменять вложенные экземпляры.
Slots
Slots — это гибкие области внутри компонентов. В экземпляр можно добавлять, удалять и перестраивать содержимое, не отсоединяя его от основного компонента.
Слоты особенно полезны для элементов с изменяемым составом: карточек, списков, модальных окон и других контейнеров. Это продвинутая тема, поэтому переходи к ней после того, как разберёшься с экземплярами, переопределениями, вариантами и свойствами компонентов.
Результат этапа
После изучения компонентов ты сможешь:
создавать основные компоненты;
использовать их экземпляры;
централизованно обновлять повторяющиеся элементы;
менять содержимое экземпляров;
объединять состояния в варианты;
настраивать свойства компонентов;
собирать небольшие библиотеки элементов.
Этап 5. Прототипирование в Figma
Статичный макет показывает, как выглядит отдельный экран. Прототип помогает продемонстрировать, как пользователь будет перемещаться между экранами и взаимодействовать с интерфейсом.
В Figma можно настроить:
переходы между экранами;
открытие модальных окон;
возврат назад;
смену состояний;
анимацию;
прокрутку;
интерактивные компоненты;
фиксированное или липкое поведение элементов.
Прототип не заменяет разработку. Он помогает показать сценарий и проверить логику взаимодействия до того, как интерфейс начнут реализовывать в коде.
Прототипирование и анимация
Начни с простого сценария. Например:
Пользователь открывает главный экран.
Нажимает кнопку.
Переходит к форме.
Завершает действие.
Видит экран с результатом.
Примеры и полезные приёмы
После базовых переходов можно переходить к более сложным сценариям и дополнительным возможностям прототипирования.
Интерактивные компоненты
Интерактивные компоненты позволяют настраивать взаимодействия между вариантами одного компонента.
Например:
переключение чекбокса;
изменение состояния кнопки;
раскрытие элемента;
переключение таба;
изменение выбранного параметра.
Фиксированные и липкие элементы при прокрутке
Некоторые элементы интерфейса должны оставаться на экране во время прокрутки. Например, шапка сайта, панель действий или навигация.
В настройках прототипа Figma для элементов доступны варианты поведения Scroll with parent, Fixed и Sticky.
Результат этапа
После прохождения блока ты сможешь:
связывать экраны;
настраивать переходы;
показывать основной пользовательский сценарий;
создавать интерактивные состояния;
добавлять прокрутку;
настраивать фиксированное и липкое поведение элементов;
демонстрировать работу интерфейса до разработки.
Что ты будешь уметь после прохождения программы
Если последовательно изучить материалы и применять знания на практике, ты сможешь:
ориентироваться в интерфейсе Figma;
создавать и организовывать фреймы;
поддерживать порядок в слоях;
работать с сетками и направляющими;
настраивать текст;
использовать цвета, эффекты и стили;
собирать элементы на Auto Layout;
настраивать привязки;
создавать базовые адаптивные структуры;
работать с компонентами, экземплярами и вариантами;
связывать экраны в интерактивные прототипы;
технически собирать базовые макеты сайтов и приложений.
При этом владение Figma и умение создавать качественные интерфейсы — не одно и то же.
Можно хорошо знать инструменты, но допускать ошибки в композиции, визуальной иерархии, пользовательском сценарии или логике продукта. Эта программа посвящена прежде всего работе в Figma, а не всему UX/UI-дизайну целиком.
Где самостоятельного обучения может быть недостаточно
Открытый урок отвечает на общий вопрос: где находится функция, как она работает и в каких ситуациях её можно использовать.
Но видео не знает:
какую задачу решаешь именно ты;
как устроен твой файл;
почему в твоём макете не работает адаптив;
зачем ты выбрал конкретную структуру;
какие элементы стоит объединить;
где появились лишние вложения;
насколько удобно будет работать с файлом дальше.
Например, карточка может выглядеть нормально, но внутри неё окажутся лишние фреймы и неправильные настройки размеров. Пока текст короткий, проблема будет незаметна. После изменения содержимого вся структура начнёт разваливаться.
Или ты создашь десятки компонентов, хотя часть из них вообще не нужна. Технически функция будет использована правильно, но сам файл станет сложнее и неудобнее.
Бесплатные уроки помогают понять возможности Figma. Самостоятельная практика помогает закрепить знания. А обратная связь помогает увидеть ошибки, которые сложно заметить в собственной работе
Как может помочь ментор
Ментор не заменяет самостоятельное обучение и не делает работу вместо тебя. Его задача — помочь быстрее разобраться в ошибках и не застревать надолго.
Во время обучения ментор может:
оценить твой текущий уровень;
помочь выстроить последовательный план;
ответить на вопросы по инструментам;
открыть твой макет в Figma;
оставить комментарии к конкретным элементам;
показать проблемы в Auto Layout;
помочь упростить компоненты;
проверить сетку и отступы;
объяснить, как лучше организовать файл;
предложить более подходящий способ решения.
В X-Mentors можно изучать открытые материалы самостоятельно, а свои макеты, вопросы и ошибки разбирать вместе с практикующим дизайнером. В пробный период команда помогает подобрать ментора, составить план и получить первую обратную связь
Вместо вывода
Освоение Figma — это не соревнование по количеству просмотренных видео. Важнее последовательно изучать инструменты и сразу применять их в собственных макетах.
Не пытайся использовать все возможности Figma в первом же проекте. Хорошо собранный макет — не тот, в котором больше всего сложных функций, а тот, который понятно устроен, предсказуемо изменяется и не мешает дальнейшей работе.
Статью подготовил:
Никита Семёнов
Principal Product Designer с 6+ годами опыта, основатель X-Mentors