Дизайн-система
Типовые настройки блоков, кнопок и шрифтов
2
Дизайн-система кнопок
Рассмотрим на примере кнопок. Вы можете в рамках проекта настроить дизайн 4 стилей кнопок.
Каждую кнопку описывает:
1. Дизайн кнопки
2. Тень
3. Дизайн кнопки при наведении
4. Тень при наведении
5. Вид кнопки на мобильных
6. Тень у кнопки на мобильных
1. Дизайн кнопки
2. Тень
3. Дизайн кнопки при наведении
4. Тень при наведении
5. Вид кнопки на мобильных
6. Тень у кнопки на мобильных
Для каждой кнопки есть до 50 параметров. И если вы хотите сделать такую настройку, то это делается в общих стилях, а потом применяется в каждом конкретном блоке.
4
Глобальные изменения
Если обновить настройку дизайн-системы, она обновится везде, где применена. Иногда, особенно, если блоков с настройкой дизайн-системы много, требуется перезагрузка страницы, чтобы новые стили отобразились.
Использование настроек дизайн-системы делает сайт таким, как будто он сделан в соответствии с определённым фирменным стилем. Иногда приходится посидеть над настройками, чтобы универсальный стиль подходил ко всем элементам. Но после этого задачи вида "Давайте сделаем кнопки оранжевыми" решаются за минуты, а не дни работы.