Figma: Component

Figma позволяет разрабатывать собственные компоненты (component), на основе которых можно создавать отдельные экземпляры.

Здесь следует сразу запомнить важную вещь. Компонент является родительским элементом для всех созданных экземпляров. Если мы поменяем какие-то свойства у компонента, то изменения затронут все экземпляры. Но если мы будем менять свойства у экземпляра, они никак не подействуют на родительский компонент.

Кнопка

Рассмотрим создание нового компонента на основе кнопки. Кнопка состоит из двух слоёв. Первый слой - прямоугольник, который предоставляет компоненту фон и фигуру. Второй слой - текст для надписи в кнопке.

Для создания прямоугольника выбираем инструмент Rectangle (горячая клавиша R). Рисуем произвольный прямоугольник на холсте. Для установки точных размеров используйте Панель свойств в правой части редактора.

Далее следует добавить текст. Выбираем инструмент Text (T) и печатаем текст Button поверх прямоугольника.

Настроим свойства текста через панель свойств. Установим размер шрифта 18 pt. Выбираем шрифт Gothic A1. Также установим значения Medium для веса шрифта, выравнивание по центру (Text align center).

Далее нам нужно выравнять надпись и прямоугольник относительно друг друга. Выбираем оба слоя, удерживая клавишу Shift и применяем выравнивание Align horizontal centers и затем Align vertical centers.

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

Поменяем цвет текста на белый (FAFAFA). Поменяем цвет у прямоугольника - 0D88DC. Установим радиус закругления углов Corner radius в значение 4.

Для удобства переименуем названия слоёв. Слой Rectangle переименуем в background. Слой Text - в label.

Выделим два слоя в левой части редактора и на панели инструментов в верхней части нажимаем кнопку Create component. В результате у нас появится первый компонент с фиолетовым значком из четырёх ромбиков.

Созданный родительский компонент можно раскрыть, чтобы увидеть его составные части - background и label. Переименуем родительский компонент в button/primary. На этом создание компонента завершено.

Экземпляр компонента

Установите курсор над родительским компонентом и нажмите клавишу Alt, значок курсора изменится на две стрелки, что свидетельствует о создании копии компонента. Перетащите копию вниз. На панели слоёв созданный экземпляр компонента будет помечен белым одиночным ромбом.

Теперь вы можете увидеть взаимосвязь между родительским компонентом и его экземпляром. Если, к примеру, поменять цвет у родительского компонента, то цвет также поменяется у экземпляра.

Выполним противоположную задачу. Мы поменяем свойства у экземпляра, которые никак не повлияют на родительский компонент. Выберем у экземпляра кнопки текст и поменяем на Add to Cart. При этом текст в родительской кнопке не поменяется. Но обратите внимание, что если мы теперь поменяем текст на родительском компоненте, то у экземпляра текст не изменится. Дело в том, что экземпляр класса переопределил свойство и сохраняет его. Поэтому важно следить за очерёдностью, чтобы правильно переопределять свойства.

Существует набор свойств, которые можно переопределять.

Созданные компоненты также доступны через вкладку Assets.

Мы рассмотрели только базовые вещи для создания компонента Кнопка. Также можно создать дополнительные эффекты для кнопки - кнопка в фокусе, недоступна, курсор над кнопкой и т.д.

Видео по теме (англ.)

Реклама