В Figma невозможно менять размер элементов внутри копий компонента. Один из способов решения этой трудности - изменение размера «начинки» через расстояние между объектами.
Что такое custom-size component
Это компонент, размер которого меняется внутри копии компонента через увеличение или уменьшение расстояния между объектами.
Как его создать
Для начала давайте рассмотрим его структуру более подробно.
У нас есть контейнер с двумя объектами, между которыми мы задаем расстояние. Первый объект, верхний, статичен. Он фиксирован по высоте [Fixed height]. Второй объект имеет динамическую высоту. Он заполняет доступную область по высоте [Fill container].
Таким образом, если мы увеличиваем расстояние между объектами, нижний становится меньше. Если уменьшаем - больше.
То же самое можно делать с объектами в горизонтальной плоскости.
Примеры использования
Пример с линейным графиком:
Пример со скроллом:
Пример со слайдером:
Как видите, инструмент достаточно несложный и полезный.
Здесь стоит иметь ввиду, что если вам нужны адаптивные компоненты, здесь могут возникнуть трудности. Например, если у вас постоянно меняется размер графиков, его значения будут варьироваться в зависимости от размера [расстояние между объектами не меняется при растягивании или сужении элементов].
В качестве статичного объекта можно использовать нулевой фрейм, о котором я говорил в прошлой статье. А материал этой статьи можно посмотреть в видеоформате в моем Youtube-канале.
Надеюсь, что материал оказался для вас полезен. Обязательно оставьте обратную связь в комментариях - это поможет мне стать чуточку лучше. Я также готов ответить на ваши вопросы.
Я в telegram
#фигма #дизайн #вебдизайн #ux #ui #uxui #custom-size component #custom size #component #figma