Custom-size component Figma | Изменение размера элементов внутри копий компонента фигмы

В Figma невозможно менять размер элементов внутри копий компонента. Один из способов решения этой трудности - изменение размера «‎начинки» через расстояние между объектами. 

Что такое custom-size component

Это компонент, размер которого меняется внутри копии компонента через увеличение или уменьшение расстояния между объектами.

Как его создать

Для начала давайте рассмотрим его структуру более подробно. 

У нас есть контейнер с двумя объектами, между которыми мы задаем расстояние. Первый объект, верхний, статичен. Он фиксирован по высоте [Fixed height]. Второй объект имеет динамическую высоту. Он заполняет доступную область по высоте [Fill container]. 

Таким образом, если мы увеличиваем расстояние между объектами, нижний становится меньше. Если уменьшаем - больше. 

То же самое можно делать с объектами в горизонтальной плоскости.

Примеры использования

Пример с линейным графиком: 

Пример со скроллом:

Пример со слайдером:

Как видите, инструмент достаточно несложный и полезный. 

Здесь стоит иметь ввиду, что если вам нужны адаптивные компоненты, здесь могут возникнуть трудности. Например, если у вас постоянно меняется размер графиков, его значения будут варьироваться в зависимости от размера [расстояние между объектами не меняется при растягивании или сужении элементов].

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

Надеюсь, что материал оказался для вас полезен. Обязательно оставьте обратную связь в комментариях - это поможет мне стать чуточку лучше. Я также готов ответить на ваши вопросы.

Я в telegram