Вы открываете Figma, видите сотни одинаковых кнопок по всему проекту — и вдруг клиент просит изменить радиус скругления. Паника? Нет. Если вы работаете с компонентами, это одно действие на 2 секунды. Если нет — готовьтесь к часам монотонной правки. Компоненты в Figma — это не просто удобство, это основа профессионального подхода к дизайну интерфейсов. Они экономят время, устраняют ошибки и делают вашу работу масштабируемой. Сегодня разберём, как превратить хаос из повторяющихся элементов в чёткую систему, которая работает на вас 🚀
Пошаговая инструкция создания компонента в Figma
Создание компонента в Figma — процесс элементарный, но требующий понимания логики. Компонент (Master Component) — это эталонный объект, от которого создаются все копии. Изменения в мастер-компоненте автоматически применяются ко всем его экземплярам. Это фундамент любой дизайн-системы.
Шаг 1: Подготовка элемента
Прежде чем создавать компонент, убедитесь, что ваш объект готов. Это может быть кнопка, иконка, карточка товара — любой повторяющийся элемент интерфейса. Важно, чтобы элемент был структурирован: все слои названы понятно, группировка логична, отступы и размеры выверены. Небрежность на этом этапе приведёт к путанице в дальнейшем.
Шаг 2: Превращение объекта в компонент
Выделите ваш элемент (фрейм, группу или отдельный объект). Затем используйте один из способов:
- Нажмите сочетание клавиш
Ctrl+Alt+K(Windows) илиCmd+Option+K(Mac) - Кликните правой кнопкой мыши → "Create Component"
- Используйте верхнюю панель инструментов — иконка с четырьмя ромбами
После этого вокруг объекта появится фиолетовая рамка — признак того, что перед вами мастер-компонент. В панели слоёв слева иконка объекта изменится на четыре ромба.
Шаг 3: Настройка свойств компонента
Откройте правую панель Properties. Здесь вы можете:
- Переименовать компонент — используйте понятную структуру названий (например, Button/Primary/Large)
- Добавить описание — поясните назначение компонента для других членов команды
- Настроить Auto Layout — если компонент должен адаптироваться к содержимому
- Установить constraints — чтобы элементы внутри компонента вели себя предсказуемо при изменении размеров
Шаг 4: Создание первого экземпляра
Скопируйте ваш мастер-компонент (Ctrl+C → Ctrl+V) или зажмите Alt и перетащите его. Новый объект будет экземпляром (Instance) — его рамка будет не фиолетовой, а обычной синей. Любые изменения в мастере автоматически применятся к этому экземпляру.
Дмитрий Соколов, ведущий UI/UX дизайнер: Помню свой первый крупный проект — приложение для банка с 80+ экранами. Я не знал о компонентах и рисовал каждую кнопку вручную. Когда потребовалось изменить цвет бренда, я провёл три дня в правке. После этого я изучил компоненты — и следующий проект занял в два раза меньше времени. Теперь я создаю компонент даже для элементов, которые встречаются дважды. Это дисциплина мышления 💼
| Действие | Горячая клавиша (Mac) | Горячая клавиша (Windows) |
| Создать компонент | Cmd+Option+K | Ctrl+Alt+K |
| Отделить экземпляр от мастера | Cmd+Option+B | Ctrl+Alt+B |
| Перейти к мастер-компоненту | Cmd+Option+E | Ctrl+Alt+E |
| Сбросить изменения экземпляра | Option+R | Alt+R |
Основные виды компонентов и их особенности
Figma предлагает несколько типов компонентов, каждый из которых решает определённые задачи. Понимание различий между ними — признак зрелого дизайнера, который проектирует не просто картинки, а системы.
Базовый компонент (Base Component)
Это простейший тип — один мастер, множество экземпляров. Подходит для статичных элементов: логотипы, иконки, декоративные элементы. Не имеет вариаций состояний. Если вам нужна иконка корзины в 20 местах интерфейса — это ваш выбор.
Компонент с вложенными компонентами (Nested Components)
Более сложная структура: внутри главного компонента используются другие компоненты. Классический пример — карточка товара, которая включает компоненты кнопки, изображения-заглушки, рейтинга звёздами. Изменения в дочерних компонентах автоматически обновляются во всех родительских. Это мощный инструмент для построения модульных систем.
Компонент с вариантами (Component with Variants)
Революционная функция Figma — возможность объединить множество состояний одного элемента в единый компонент. Вместо Button_Primary, Button_Secondary, Button_Disabled вы создаёте один компонент Button с переключаемыми свойствами. Это радикально упрощает работу и делает библиотеку компонентов чистой и управляемой.
Интерактивный компонент (Interactive Component)
Компоненты с настроенными переходами между состояниями прямо внутри мастера. Например, кнопка с эффектом hover, который работает в прототипе без дополнительных настроек. Создаёте анимацию один раз — она работает для всех экземпляров. Экономия времени на прототипировании колоссальная.
| Тип компонента | Сложность создания | Гибкость | Применение |
| Базовый | Низкая | Низкая | Иконки, логотипы |
| Вложенный | Средняя | Высокая | Карточки, списки |
| С вариантами | Средняя | Очень высокая | Кнопки, формы |
| Интерактивный | Высокая | Максимальная | Прототипирование UX |
Работа с экземплярами компонентов (instances)
Экземпляр — это живая копия мастер-компонента. Он наследует все свойства родителя, но при этом обладает определённой автономией. Умение управлять экземплярами отличает дизайнера-ремесленника от дизайнера-инженера.
Переопределение свойств (Overrides)
Вы можете изменять отдельные свойства экземпляра, не затрагивая мастер-компонент. Например, у вас есть мастер-компонент кнопки синего цвета. В конкретном экземпляре вы меняете текст с "Купить" на "Добавить в корзину" — это переопределение. Цвет, размер, скругление останутся привязанными к мастеру, но текст будет уникальным для этого экземпляра.
Что можно переопределить:
- Текстовое содержимое
- Изображения (замена картинок в рамках)
- Цвет заливки и обводки (но лучше использовать стили)
- Видимость вложенных слоёв (скрыть/показать элементы)
- Вложенные компоненты (заменить на другой компонент)
Сброс переопределений
Если экземпляр был изменён и нужно вернуть его к исходному состоянию мастера — кликните правой кнопкой → "Reset all changes" или используйте Alt+R. Это отменит все локальные изменения. Удобно, когда в процессе экспериментов вы запутались в правках.
Отсоединение экземпляра (Detach Instance)
Иногда нужно превратить экземпляр в обычный объект, разорвав связь с мастером. Это делается через Ctrl+Alt+B (Windows) или Cmd+Option+B (Mac). После этого объект перестаёт реагировать на изменения мастер-компонента. Используйте эту функцию осторожно — чаще всего она признак того, что ваша система компонентов недостаточно гибка.
Замена экземпляра (Swap Instance)
Мощная функция, позволяющая заменить один экземпляр на другой компонент с сохранением позиции и размера. В правой панели, когда выбран экземпляр, есть выпадающий список со всеми доступными компонентами. Это удобно для быстрого переключения между вариациями — например, заменить обычную кнопку на кнопку с иконкой.
Анна Крылова, продуктовый дизайнер: Работала над редизайном маркетплейса. Клиент хотел A/B-тестировать 3 варианта карточки товара на 200+ страницах. Благодаря экземплярам я просто меняла один мастер-компонент — и все 200 карточек обновлялись мгновенно. Тест показал победителя, я внедрила изменения за 5 минут. Без компонентов это было бы недели работы. Клиент был в восторге от скорости итераций 🎨
Создание вариантов (variants) для гибких компонентов
Варианты (Variants) — это функция, которая изменила подход к проектированию дизайн-систем в Figma. До их появления дизайнеры создавали десятки отдельных компонентов для разных состояний одного элемента. Варианты объединяют все состояния в один логический компонент с переключаемыми свойствами.
Зачем нужны варианты
Представьте кнопку, у которой есть:
- 3 типа: Primary, Secondary, Ghost
- 3 размера: Small, Medium, Large
- 3 состояния: Default, Hover, Disabled
Это 27 возможных комбинаций. Без вариантов вам пришлось бы создать 27 отдельных компонентов и мучиться с их выбором. С вариантами — это один компонент с тремя переключателями. Выбираете нужные свойства в панели справа — и готово.
Пошаговое создание вариантов
Шаг 1: Создайте все необходимые версии вашего элемента. Например, три кнопки — синяя, серая, прозрачная. Каждая уже должна быть компонентом.
Шаг 2: Выделите все эти компоненты (зажмите Shift и кликните по каждому). Кликните правой кнопкой → "Combine as Variants" или используйте иконку с ромбами на панели сверху.
Шаг 3: Figma автоматически создаст контейнер вариантов (он выглядит как пунктирная рамка вокруг всех версий). В правой панели появится раздел Properties.
Шаг 4: Настройте свойства. По умолчанию Figma создаёт свойство "Property 1" со значениями "Variant 1", "Variant 2" и т.д. Переименуйте их осмысленно. Например, свойство назовите "Type", а значения — "Primary", "Secondary", "Ghost".
Шаг 5: Добавьте дополнительные свойства. Кликните на "+" рядом с Properties. Создайте свойство "Size" со значениями "Small", "Medium", "Large". Теперь вам нужно будет создать недостающие комбинации — скопируйте существующие варианты и измените их размеры.
Шаг 6: Для булевых свойств (вкл/выкл) используйте тип "Boolean". Например, свойство "Disabled" со значениями true/false. Это удобнее переключателя с двумя текстовыми значениями.
Оптимизация вариантов
Несколько правил для эффективной работы с вариантами:
- Используйте Auto Layout внутри каждого варианта — это позволит контенту адаптироваться автоматически
- Называйте свойства коротко и понятно: Type, State, Size, Icon — не "Тип кнопки для формы регистрации"
- Группируйте родственные варианты визуально внутри контейнера — это облегчает навигацию
- Не создавайте избыточные комбинации — если кнопка Disabled всегда серая, нет смысла делать варианты Disabled+Primary, Disabled+Secondary
- Используйте слой Default для наиболее частого состояния — он будет выбран по умолчанию при вставке компонента
Интеграция компонентов в дизайн-систему проекта
Создание отдельных компонентов — это только начало. Настоящая сила раскрывается, когда вы объединяете их в целостную дизайн-систему. Это превращает хаотичный набор элементов в согласованную, масштабируемую инфраструктуру, которой могут пользоваться все члены команды.
Структура библиотеки компонентов
Профессиональная дизайн-система требует продуманной архитектуры. Создайте отдельный файл Figma исключительно для компонентов. Организуйте его по категориям:
- Foundations — цветовые стили, типографика, сетки, отступы
- Atoms — базовые неделимые элементы (кнопки, поля ввода, чекбоксы)
- Molecules — комбинации атомов (поле поиска = input + кнопка + иконка)
- Organisms — сложные блоки (шапка сайта, карточка товара, форма регистрации)
- Templates — макеты страниц с компонентами-заглушками
Эта структура основана на методологии Atomic Design Брэда Фроста. Она зарекомендовала себя в тысячах проектов и считается индустриальным стандартом.
Именование компонентов
Используйте slash-нотацию для создания иерархии. Примеры:
Button/Primary/LargeForm/Input/DefaultNavigation/Header/Desktop
Слэш создаёт вложенность в меню выбора компонентов. Первый уровень — категория, второй — тип, третий — вариант. Это делает навигацию интуитивной даже в библиотеке с сотнями компонентов.
Публикация библиотеки
Когда ваша библиотека компонентов готова, её нужно опубликовать, чтобы другие файлы могли её использовать. Откройте файл с компонентами, в верхнем меню выберите "Assets" → "Publish library". Укажите описание изменений — это важно для версионирования.
После публикации другие дизайнеры смогут подключить вашу библиотеку через меню "Assets" → иконка книги → "Team library". Все компоненты станут доступны для вставки, и будут автоматически обновляться при публикации новых версий.
Управление версиями
При каждой публикации Figma сохраняет версию библиотеки. Вы можете:
- Просмотреть историю версий через меню файла
- Вернуться к предыдущей версии при необходимости
- Сравнить изменения между версиями
- Отклонить обновления в отдельных файлах, если новая версия ломает макеты
Это критично для крупных команд — разработчики могут продолжать работать со старой версией компонентов, пока дизайнеры дорабатывают новую.
Документирование системы
Компоненты без документации — это половина работы. Создайте в вашем файле-библиотеке отдельную страницу Documentation. Для каждого компонента опишите:
- Назначение и контекст использования
- Доступные варианты и их применение
- Правила комбинирования с другими компонентами
- Ограничения и антипаттерны (как НЕ надо использовать)
Используйте визуальные примеры правильного и неправильного применения. Это сэкономит часы объяснений новым членам команды.
| Уровень сложности | Количество компонентов | Время создания | Команда |
| Базовый набор | 15-30 | 1-2 недели | 1 дизайнер |
| Средняя система | 50-100 | 1-2 месяца | 2-3 дизайнера |
| Корпоративная DS | 150-300 | 3-6 месяцев | Команда 5+ человек |
| Enterprise-уровень | 500+ | 6-12 месяцев | Выделенная команда + поддержка |
Синхронизация с разработкой
Дизайн-система живёт по-настоящему, только когда она синхронизирована с кодом. Используйте плагины вроде Figma Tokens или интеграции с инструментами вроде Storybook. Называйте компоненты так же, как они будут называться в коде — это устранит недопонимание между дизайнерами и разработчиками.
Регулярно проводите синхронизационные встречи с фронтенд-командой. Обсуждайте, какие компоненты требуют обновления, какие избыточны, какие отсутствуют. Дизайн-система — это не статичный артефакт, а живой организм, требующий постоянной эволюции.
Компоненты в Figma — это не просто техническая функция, это философия системного мышления. Вы проектируете не страницы, а правила. Не картинки, а язык, на котором говорит продукт. Один час, вложенный в создание качественного компонента, экономит десятки часов в будущем. Дизайн-система из 50 продуманных компонентов позволяет собрать сотни экранов за считанные дни. Освойте эту систему — и ваша скорость работы вырастет на порядок, а качество останется стабильно высоким независимо от масштаба проекта 🚀
