Сегодня попробуем собрать компонент неожиданным способом и разберемся, как работают оверрайды в Figma.
Первый столп фигмы
Оверрайды — один из ключевых механизмов Figma, позволяющий переопределять свойства наследуемых элементов. В документации можно найти, какие именно свойства поддаются изменению: цвет и заливка, выравнивание и значение текстового слоя, видимость и прозрачность, обводка, эффекты, стили, размер, поворот и параметры автолейаута.
Спускаемся ниже
Чем глубже вложенность компонентов, тем сложнее становится работа с оверрайдами. Например, если компонент вложен в другой, его свойства могут меняться несколько раз на разных уровнях.
Экспериментальным путем можно выяснить, что большая часть параметров, таких как цвет, эффекты, обводка, текст и прозрачность, перезаписываются корректно. Однако у видимости есть нюанс — изменяется только исходный вариант, а свойства размера, поворота и component properties вообще не поддаются изменению на более глубоких уровнях.
Чтобы добиться полного контроля, нужно найти способ эмулировать перезапись этих свойств с помощью доступных инструментов. Звучит сложно? Не переживайте, у меня есть пара интересных решений.
Зачем всё это?
Допустим, у вас есть меню с пунктами, количество которых заранее не определено. Каждый пункт может быть активным или неактивным. Нужно сделать компонент, который будет поддерживать два состояния: полное и свернутое.
Если собрать такой компонент стандартными методами, возникнут проблемы. Меню либо не будет сохранять количество пунктов и их стейты, либо будет сохранять только частично.
Я попробовал разные варианты организации: с одним компонентом для пункта, с двумя, с одним компонентом для списка, с разными комбинациями. Ни одна из классических схем не дала желаемого результата — что-то всегда ломалось. Значит, пора искать альтернативный подход.
Свап-машина
Если на третьем уровне вложенности вынести выбор количества пунктов в swap, заметно уменьшается вероятность ошибок. Это наводит на мысль, что механика вариантов работает не как обычная перезапись: только ручной выбор компонента через swap приводит к настоящему оверрайду.
Однако компонент всё еще работает не как задумано. Если изменить состояние пунктов (например, сделать их активными), то при переключении вида меню они остаются неизменными.
Решение оказалось довольно простым: вместо использования вариантов пункта можно управлять его состоянием через отключение видимости текстовых слоев на уровне с количеством. Это позволяет корректно сохранять изменения и обновлять отображение.
Эмуляция невозможного
Мы разобрались с видимостью и цветом, но что делать с теми свойствами, которые Figma изначально не позволяет перезаписывать?
Например, если нужно контролировать размер элемента первого уровня на втором, можно использовать автолейаут и трюк Resizable Instance из Figsight #0. Размер можно задать через gap внутри автолейаута.
А если речь идёт о квадратном элементе, можно применить необычный подход. Внутренний фрейм Size поворачивается на 45°, а внешний Wrapper — на −45°. В итоге изменение одного параметра позволяет управлять размером элемента.
Этот метод — скорее забавный лайфхак, чем универсальное решение, но он расширяет арсенал возможных подходов.
Примеры к статье можно найти здесь.
