Стопка ссылок для тех, кто внедряет дизайн-системы в коде, а | Дайджест продуктового дизайна
Стопка ссылок для тех, кто внедряет дизайн-системы в коде, а не просто Фигме:
1. Дизайн-система сервиса B2B Center. Всё на месте — компоненты в коде, токены, редактура.
2. Varun Vachhar: Основные способы тестирования. Он разделил их на предмет тестирования (визуальное, композиция, взаимодействие, accessibility, сценарии), а не инструменты.
3. Storybook: Памятка по визуальному тестированию компонентов. Как настроить процесс и почему они рекомендуют оставлять его наполовину ручным.
4. Каталог типовых компонентов, для каждого из которых есть куча примеров из реальных внедрений. Здорово помогает быстро сравнить подходы.
5. Lukas Oppermann: Одна из самых полных и толково описанных статей о пользе внедрения.
6. Container queries появились в одной из веток Chrome. Они позволяют задавать адаптивность на уровне отдельного компонента, а не всей страницы — это здорово облегчает работу над дизайн-системой. Ahmad Shadeed и Stephanie Eckles сделали обзоры самой концепции и текущего состояния.
7. James Gilyead: Система размеров, которая позволяет реализовать гибкую адаптивную сетку как всего экрана, так и отдельных компонентов.
8. Alan Weibel: Критерии, которым должен удовлетворять новый компонент, чтобы попасть в дизайн-систему Salesforce Lightning.
9. Bootstrap 5 вышел из беты. Обзор изменений.
10. Matt Deco из Peacock: Как синхронизировать стили в компонентах в коде и Figma.
11. Mantine: Фреймворк для создания дизайн-системы на React.
#designsystems
