Компоненты в Фигме — часть вторая. Наследование и замена компонента
В прошлой части мы разобрались с темя, как создавать компоненты Figma и проводить с ними базовые манипуляции. В этой заметке мы рассмотрим некоторые дополнительные действия, связанные с компонентами.
Как заменить родительский компонент для уже созданного элемента
Если вы создали экземпляр компонента, а потом решили изменить его родителя (например, текст H1 на H2), вам требуется выполнить следующие действия:
- Выберите нужный элемент
- В окне Design слева найдите поле Instance
- Выберите из выпадающего списка нужный компонент
Аттентион: вам будет доступен список вообще всех компонентов, и очевидно, что большая часть их не сможет корректно примениться. Заблаговременно создайте компонент с аналогичным набором стилей.
Смена через меню Swap Component
Перейти в статью Быстрая смена экземпляров компонента
Обновление от 17 сентября 2020 года добавляет в Figma новое меню для быстрой смены экземпляра компонента. При этом доступен поиск по названию и представление в виде списка и карточек.
Как воспользоваться
- Выберите элемент в вашем макете
- Если это экземпляр компонента, в правой панели с параметрами появится подменю Swap Instance
- Выберите из списка или начните вводить название в поле поиска, чтобы сделать фильтр по названию
Создать компонент, наследующий стили другого компонента
Чтобы не переопределять свойства для компонентов, похожих на уже существующие, вы можете сделать компонент, наследующий свойства какого-то другого уже существующего компонента.
Например, вы создали компонент текста Paragraph, а потом решили создать еще и компонент для шрифта цитаты. В таком случае вы можете создать клона исходного Paragraph, но сделать его шрифт жирным и наклонным. Таким образом, если в дальнейшем вам потребуется заменить семейство шрифта или его размер, вам потребуется отредактировать только исходный компонент, и эти изменения коснутся и параграфа, и цитаты.
Итак, для этого:
- Делаем экземпляр уже имеющегося компонента
- Назначаем этот экземпляр компонентом
- Меняем необходимые свойств. Эти свойства более не зависят от исходного компонента, но те, которые мы не трогали, будут меняться вместе со свойствами исходного
