Компонент — это переиспользуемый элемент. Если что-то встречается в проекте несколько раз, пора делать компонент. Компонент можно сделать из объектов и элементов, которые вы разработали. Если сделать копию компонента, мы получим экземпляр. Экземпляры связаны с компонентом-родителем, и любые изменения в родительском компоненте отразятся на экземпляре. Но вы можете изменить в экземпляре цвет, текст, эффекты, размер всего компонента, если вам это нужно, т. е. можно его настроить по-своему. Экземпляры компонентов можно вкладывать в другие компоненты.

Как создать компонент.

  1. Выберите слои, которые хотите включить в компонент.

  2. Щелкните правой кнопкой мыши и выберите «Создать компонент» (или Сmd + Аlt + K).

Снимок экрана 2021-09-10 в 23.26.07.png

Вокруг компонента появится фиолетовая рамка — значит, он создан. Теперь обязательно дайте ему название.

Проверьте, из чего состоит ваш компонент. Если там есть текстовые слои, дайте им обобщенные названия, например, heading, text.

Если у вас есть текст, определитесь с тем, как он будет вести себя внутри компонента. Нужно поставить Auto height, если вы хотите, чтобы контейнер подстраивался под объем текста.

Теперь время определить Сonstraints, чтобы было понимание, как компонент или отдельные его части будут себя вести при расширении и сужении. Например, если надо, чтобы картинка растягивалась, выбираем по горизонтали и вертикали: Scale. У текста, если вы ранее уже поставили в настройках текста Auto height, значение по вертикали будет Hug contens.

Снимок экрана 2021-09-11 в 13.24.39.png

Снимок экрана 2021-09-11 в 13.25.32.png

Чтобы задать расстояния между элементами, лучше использовать Auto layout. Можно задать равные или различные расстояния или использовать несколько группировок Auto layout, если вы хотите использовать разные расстояния.

Снимок экрана 2021-09-10 в 23.27.34.png

Не забываем, что любому блоку надо поставить Hug contents, если вы хотите, чтобы контейнер подстраивался под объем.

Обязательно посмотрите подробное руководство Figma по компонентам: https://help.figma.com/hc/en-us/sections/4403935997847-Components

Еще полезную статью про Auto layout: https://ux.pub/kak-rabotaet-novaya-funktsiya-auto-layout-v-figma-noyabr-2020-ray-adaptivnogo-dizayna/