Изменение размера элемента внутри инстанса. Приёмы и фишки
Что такое “Custom size component” или как изменить размер элемента в инстансе компонента?
Всем привет, меня зовут Андрей Насонов я работаю UI/UX дизайнером, это моя серия статей про фишки, трюки и прочие штуки в Figma 🙂
Другие статьи из этой серии
- Разметка элементов в Figma
- Компонент в Figma с нулевыми размерами
- Изменение размера элемента внутри инстанса (Эта статья)
Что такое “Custom size component”?
Это компонент в котором размер изменяется за счёт отступов “spacing” между двумя элементами с шириной или высотой 0px.
Про элементы с нулевыми размерами я писал ранее в статье “Компонент в Figma с нулевыми размерами”
Зачем это нужно?
На данный момент в фигме всё ещё нельзя задавать размер фреймов внутри инстансов. Это доставляет некоторые неудобства, и из-за этого приходится либо создавать много одинаковых компонентов разного размера, либо делать детач инстанса и изменять размер элемента вручную. Чтобы избежать и того и другого я придумал приём который всё-таки позволяет это делать.
Задавать размер фреймов внутри инстансов можно благодаря “Custom size component”.
Важно! Речь идет именно о том, чтобы задавать элементу конкретный размер в пикселях, а не абстрактный размер с помощью настойки автолейаутов “Fill container” или настроек “Left and right” и “Scale”.
Типы Custom size component
Заполняемый — Внутри такого компонента можно разместить другой фрейм или другой компонент который будет расширяться вместе с “Custom size component”.
Не заполняемый — Такой компонент является самостоятельным и внутри него ничего не размещается кроме нулевых компонентов. Чаще всего к такому компоненту применяют заливку, скругления углов и прочие стили.
Примеры применения
Изображение внутри компонента
Используя “Сustom size component” можно изменять размер изображения внутри каждого инстанса. Это заполняемый компонент. Пример в Figma
Линия прогрессбара
Хендлер скроллбара
В элементах “Линия прогрессбара”, “Хендлер скроллбара” — “Custom size component” является самостоятельным.
Как сделать Custom size component?
Ниже описан процесс создания заполняемого сustom size компонента. Либо просто используйте готовый компонент.
Создание структуры:
- Создайте Auto Layout и назовите его “Custom size component”.
- Внутри “Custom size component” создайте Auto Layout с вертикальным направлением и назовите его “1”.
- Внутри “1” создайте еще один Auto Layout но с горизонтальным направлением и назовите его “2”.
- Далее внутри “2” поместите элемент размер которого вы хотите изменять внутри инстансов.
- Отдельно создайте Auto Layout с горизонтальным направлением и назовите его “Horizontal size”.
- Внутри “Horizontal size” создайте два фрейма, выделите их и в полях ширины и высоты впишите значение “0.0001”.
- Так же отдельно создайте Auto Layout с вертикальным направлением и назовите его “Vertical size”.
- Внутри “Vertical size” создайте два фрейма, выделите их и в полях ширины и высоты впишите значение “0.0001”.
- Переместите “Horizontal size” в “1” а “Vertical size” в “2”.
После проделанных действий вы должны получить вот такую структуру слоев:
Настройка Auto Layout:
Примените к слоям такие же настройки как на скриншотах. Начнем настройку слоев снизу вверх.
Теперь, вместо того чтобы создавать множество одинаковых компонентов с разным размером, вы можете создать один компонент с кастомным размером и вносить изменения уже в инстансы.
Спасибо
Если вы узнали что-то новое или статья была вам полезна — жмите клапс 👏 (можно несколько раз). А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.
