Figsight #18: Погружаясь в Overrides
Сегодня без трюков. Эта статья — небольшое исследование принципов овверайдов в Фигме. Попробуем разобраться, что именно происходит под капотом.
Потестируем?
Для тестирования перезаписи я использую два компонента и вручную меняю их через Swap. Параллельно сделал аналогичный стенд, который переключает варианты компонента.
Всё готово, можно начинать эксперименты.
Текстовые слои
Начнем с самого простого: перезаписи значений текстовых слоев. Стенд примитивный — текстовые слои в разных комбинациях и пустые фреймы.
Первый тест показывает, что значение текстового слоя прекрасно заменяется, даже если слои называются по-разному. Важен только тип. Но это справедливо, пока такой тип в компоненте один.
Когда слоев становится больше, названия уже начинают играть роль. Причём поиск вхождения делается только один раз. В итоге общее правило такое: Фигма ищет первое совпадение по названию и типу слоя и заменяет его значение. Иерархия расположения слоя при этом не имеет значения.
Теперь усложним: привяжем значения к проперти. Тут всё снова меняется — Фигма перестаёт обращать внимание на названия слоев и ориентируется только на название свойства. Как бы ни назывался слой, приоритет у проперти. Если в принимающем компоненте свойство существует, а в отправляющем его нет — работает обычный принцип перезаписи.
В вариантах логика полностью повторяется.
Цвета и остальное
С цветами — то же самое. Алгоритм идентичен: берётся только первое совпадение по названию слоя, иерархия снова не важна.
Любопытное наблюдение: если поместить фрейм внутрь другого фрейма, и у обоих будут разные цвета, то при перезаписи — когда эти же фреймы уже лежат отдельно — цвета всё равно перезапишутся корректно. Это ещё раз подтверждает ранее полученное правило.
Другие параметры, которые можно перезаписывать, ведут себя аналогично.
Вложенные компоненты
Теперь — самое интересное: что происходит с вложенными компонентами?
Смоделируем ситуацию, близкую к реальной. Есть компонент с вариантами, внутри которых используются разные вложенные компоненты. И нам нужно передать значение перезаписанного изображения глубже внутрь.
Первый тест — полное совпадение названий и вложенности. Всё ожидаемо работает. Добавляем сложность: вложенность на уровне вариантов — тоже всё в порядке. Добавляем ещё вложенность внутрь вложенных компонентов — и снова никаких проблем.
Значит, правило можно расширить: Фигма ищет первое совпадение по названию вложенного компонента — без учёта вложенности — затем внутри него ищет первое совпадение по названию и типу слоя и уже после заменяет значение.
Пока контрпримеров не нашлось, будем считать это рабочей моделью.
Надеюсь, это прояснит некоторые странности в поведении овверайдов. А скоро рассмотрим очередной интересный компонент!