Если вы до сих пор дублируете кнопки вручную — срочно читайте!
Если вы только начали работать в Figma, то наверняка сталкивались с понятием «компоненты». Кто-то о них говорит с благоговением, кто-то — просто как об удобной функции. Но все сходятся в одном: компоненты — это ключ к быстрой, чистой и профессиональной работе. Разберём, что это такое, как они работают и почему без них сегодня не обходится ни один UI-дизайнер.
Что такое компонент в Figma простыми словами
Компонент — это шаблон. Один раз создаёте элемент (например, кнопку), превращаете его в компонент — и потом используете его копии, которые называются инстансы.
Представьте себе формочку для печенья. Вы сделали одну, и теперь штампуете идеальные пряники. То же самое с компонентами: вы создаёте идеальный образец — и используете его в любом месте проекта.
Зачем нужны компоненты?
Если коротко — чтобы не сходить с ума.
Вот несколько причин, почему все любят компоненты:
- Экономия времени. Изменили что-то в компоненте — обновились все инстансы.
- Единый стиль. Все элементы одного типа выглядят одинаково.
- Чистая структура. Макет не превращается в хаос из вручную нарисованных копий.
- Удобство для команды. Разработчик и дизайнер всегда знают, что где используется.
- Поддержка дизайна. Изменения происходят централизованно, ничего не теряется.
Где и как применяют компоненты
Компоненты используют везде, где что-то повторяется:
- Кнопки и формы
- Карточки товаров
- Модальные окна
- Иконки
- Меню и навигация
- Элементы UI-кита
- Повторяющиеся секции сайта
Компоненты можно вкладывать друг в друга, превращая макет в модульную систему, которую легко масштабировать и обновлять.
Как создать компонент в Figma
- Выделите нужные элементы (например, кнопку).
- Нажмите Cmd/Ctrl + Alt + K или кликните правой кнопкой и выберите "Create component".
- Готово — теперь у вас есть Main Component (основной компонент).
- Чтобы использовать копию, нажмите Alt + drag или скопируйте и вставьте — получится Instance.
Главное: менять нужно только основной компонент. Все инстансы будут автоматически обновляться.
Что можно и нельзя редактировать в инстансах
Инстансы можно немного настраивать:
Можно:
- Менять текст
- Заменять иконки
- Подставлять изображения
- Изменять цвет отдельных элементов (если задано правильно)
- Переключать видимость слоёв
Нельзя:
- Удалять элементы внутри
- Передвигать внутренние слои (если не разрешено)
- Полностью ломать структуру
Если нужно больше гибкости — используйте Variants (варианты компонентов).
Что такое Variants (варианты компонентов)
Variants — это расширение компонентов. Вместо 10 отдельных кнопок («красная», «зелёная», «с иконкой», «без») вы делаете один компонент с переключателями.
Figma сама покажет удобную панель, где вы сможете выбрать нужный тип без копаний в слоях.
Пример:
Компонент Button
- Variant 1: Primary
- Variant 2: Secondary
- Variant 3: Disabled
Такой подход делает ваш дизайн-систему гибкой и понятной для всей команды.
Компоненты + Auto Layout = любовь
Когда вы создаёте компонент, не забывайте про Auto Layout. Это позволяет кнопке адаптироваться под длину текста, сохранять отступы, автоматически выравниваться и не разваливаться при изменениях.
Это особенно важно для:
- Кнопок
- Меню
- Карточек
- Форм
Главные ошибки новичков
- Создают копии вручную, не используя компоненты.
Потом правят один и забывают про остальные. - Не дают названия компонентам.
В итоге появляется "Component 17", "Component 18" — никто не понимает, что к чему. - Делают десятки одинаковых компонентов вместо Variants.
Это усложняет структуру и мешает переиспользованию. - Не используют Auto Layout.
Компоненты получаются нефункциональными и неадаптивными.
Заключение
Компоненты — это не просто удобная функция. Это фундамент современной работы в Figma. Они помогают не только ускорить дизайн, но и навести порядок, наладить совместную работу и подготовить макеты к разработке. Научившись работать с компонентами, вы перейдёте на качественно новый уровень как дизайнер.
Полезные ресурсы:
Не тратьте время на ручные доработки. На сайте LF-CODE вы найдёте готовые модификации для Тильды — от эффектных анимаций до полезных скриптов. Команда LF-CODE поможет адаптировать их под ваш сайт или реализовать нужную доработку с нуля.
🔧 Есть техподдержка — пишите в Telegram , мы поможем разобраться.
📢 Подписывайтесь на Telegram канал, чтобы получать свежие обновления для сайтов!