{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","buttonText":"","imageUuid":""}

Почему boolean property лучше не использовать в компонентах?

Boolean property — это свойство компонента, которое позволяет показывать/скрывать элемент внутри другого компонента

В итоге получаем свитчер который переключает видимость элемента

И вроде бы все хорошо но есть ряд минусов:

  • Скрытые компоненты грузят фигму. Если проект небольшой — то это некритично, если масштабный — может вырасти в проблему
  • Нельзя кастомизировать отступы. Представим что есть кнопка с иконкой. Внутри контейнера иконки есть 2px отступа от краев до самой иконки. Логично что если у кнопки без иконки отступы 16-16 то желательно у кнопки с иконкой учесть те 2 пикселя что внутри иконки. Соответственно 14-16. С вышеуказанным свойством этого сделать не получится
  • Неудобно документировать в фигме и описывать варианты (субъективно)

Как быть?

Для себя понял что лучше старых добрых вариантов пока ничего нет

Создаете вариант кнопки без иконки (Добавляете ему свойство% Nameproperty% и ставите значение OFF или FALSE)

На варианте с иконкой меняете значение на ON или TRUE

У дочернего компонента будет такой же свитчер но будут отсутствовать те минусы что перечислил выше

Это моя первая небольшая статья на vc и я буду рад услышать любое мнение. Если статья понравилась то заглядывайте ко мне в телегу

0
4 комментария
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Виталий Разраз
Автор

Спасибо, вы абсолютно правы.

Ответить
Развернуть ветку
Alina B.

Тоже пришла к такому выводу

Ответить
Развернуть ветку
Осипов Сергей

На мой взгляд, вариант сильнее нагрузит фигму и вот почему:

Компонент с булевым свойством — это слой текста + скрытый слой иконки. Допустим, два слоя

Вариант - это два компонента. В первом слой с текстом, во втором слои с текстом и иконкой. Три слоя. К тому же два компонента вместо одного.

Компонент с булевым свойством можно настроить и под необходимые отступы. К тому же есть nested instances. Можно использовать хоть все варианты иконок, не нагружая родительский компонент вариантами

Ответить
Развернуть ветку
1 комментарий
Раскрывать всегда