Принципы вложенности компонентов

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

Что такое вложенность компонентов?

Вложенность компонентов — это когда вы создаёте новые, сложные компоненты из уже готовых, простых. Представьте, что вы собираете конструктор LEGO: из базовых кубиков (атомарных компонентов) получаются крупные детали, а из них — целые модели.

В Figma это значит, что вы берёте готовый компонент (например, кнопку) и помещаете его внутрь другого фрейма или компонента. Это даёт три преимущества:

• Повторное использование. Меняете базовый компонент — и все его экземпляры, вложенные в другие компоненты, обновляются автоматически.
• Единообразие. Все части вашей дизайн-системы выглядят и работают одинаково.
• Быстрая разработка. Не нужно каждый раз создавать элементы с нуля. Вы просто собираете их из готовых «кирпичиков».

Как сделать вложенность в Figma?

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

1. Подготовьте атомарные компоненты. Убедитесь, что у вас есть:

   • Button (кнопка)
   • Текстовые стили (для названия и цены)
   • ImagePlaceholder (компонент для изображения)

2. Создайте новый фрейм. Это будет основа для карточки. Задайте ему размеры, фоновый цвет или тень.

3. Добавьте элементы с автолейаутом.

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

4. Организуйте с помощью автолейаута.

   • Выделите все элементы внутри фрейма (изображение, текст, кнопку) и примените Автолейаут (Shift + A).
   • Настройте направление (вертикальное), отступы между элементами и внутренние отступы (padding) для всего фрейма. Используйте переменные отступов, которые мы создавали раньше.
   • Возможно, название и цену стоит сгруппировать в отдельный фрейм с автолейаутом, чтобы они располагались рядом или имели свои отступы.

5. Превратите во вложенный компонент. Когда структура готова, выделите весь фрейм и создайте из него компонент (Alt + Ctrl + K или правая кнопка мыши → «Create component»).

Теперь у вас есть компонент ProductCard, который использует Button и другие элементы. Если вы измените дизайн кнопки (например, цвет или радиус скругления), все экземпляры ProductCard обновятся автоматически.

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

Вложенность и Next.js

В Next.js компоненты — основа интерфейса. Вложенность в Figma напрямую отражает структуру вашего кода.

• Параллели с React-компонентами. Каждый компонент Figma (атомарный или сложный) — это аналог React-компонента. Вложенность в Figma соответствует вложенности компонентов в JSX-коде.
• Удобство для разработчиков. Разработчики, видя сложный компонент в Figma, легко поймут, из каких частей он состоит, и быстро найдут нужные React-компоненты в коде.
• Легкость поддержки. Изменения в базовом компоненте (например, Button) в Figma приводят к изменениям везде, где он используется. В коде это значит, что изменение одного React-компонента автоматически распространяется на все его использования. Это снижает ошибки и ускоряет поддержку.

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

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