Короткий выпуск про дизайн-системы:
1. Команда Sparkbox провела интересный эксперимент — они попросили группу разработчиков написать форму на базе дизайн-системы IBM Carbon (с которой они не были знакомы) и такую же — самим с нуля. С дизайн-системой вышло на 47% эффективнее. Они готовят более масштабное исследование ROI.
2. Storybook: Бета интерактивных историй для описания компонентов со сложным поведением, которое нужно симулировать пошаговым сценарием.
3. ЦФТ Elephas: Дизайн-система отечественной компании Центр Финансовых Технологий. Страница на сайте клуба отечественных дизайн-систем.
4. Дизайн-система компании Nord Health.
5. Обзор функции UXPin Merge. Она позволяет связать компоненты в коде и инструмент дизайна.
#designsystems
1. Команда Sparkbox провела интересный эксперимент — они попросили группу разработчиков написать форму на базе дизайн-системы IBM Carbon (с которой они не были знакомы) и такую же — самим с нуля. С дизайн-системой вышло на 47% эффективнее. Они готовят более масштабное исследование ROI.
2. Storybook: Бета интерактивных историй для описания компонентов со сложным поведением, которое нужно симулировать пошаговым сценарием.
3. ЦФТ Elephas: Дизайн-система отечественной компании Центр Финансовых Технологий. Страница на сайте клуба отечественных дизайн-систем.
4. Дизайн-система компании Nord Health.
5. Обзор функции UXPin Merge. Она позволяет связать компоненты в коде и инструмент дизайна.
#designsystems
Sparkbox
The Value of Design Systems Study: Developer Efficiency and Design Consistency
We tested the ROI of design systems and found that they increase developer efficiency, create design consistency, and might even have an impact on the accessibility of the code.
Свежая мини-подборочка про дизайн-системы:
1. Подробная методичка Storybook по тестированию компонентов.
Другие новости Storybook
— Готовят к запуску энциклопедию компонентов — она агрегирует дизайн-системы разных компаний на фреймворке. Можно посмотреть кучу реальных примеров для каждой ситуации.
— Разные способы настройки для описания принципов дизайна и других важных разделов помимо самих компонентов. Описание компонентов можно также встроить в любой другой живой гайдлайн.
— Обзор инструментов дизайна, которые работают в связке.
2. Open Props: Фреймворк для токенов.
3. Dan Mall: Особая ценность дизайн-систем при изменениях в компании — ребрендинг, слияние и другие масштабные обновления.
4. Brad Frost: Интервью, в котором он размышляет на тему того, что будет после атомарного дизайна.
5. Doctolib: Переделка цветовой палитры.
6. Дизайн-система компании Bank Soft System. Шаблоны в Figma и страница на сайте клуба отечественных дизайн-систем.
7. Shopify: Размышления на тему гибкости и роли дизайн-систем.
8. Brad Frost: Должны ли дизайн-системы включать информацию помимо интерфейсов.
9. Wanda: Дизайн-система сервиса Wonderflow.
10. Tamagui: Фреймворк для создания дизайн-систем на React Native.
#designsystems
1. Подробная методичка Storybook по тестированию компонентов.
Другие новости Storybook
— Готовят к запуску энциклопедию компонентов — она агрегирует дизайн-системы разных компаний на фреймворке. Можно посмотреть кучу реальных примеров для каждой ситуации.
— Разные способы настройки для описания принципов дизайна и других важных разделов помимо самих компонентов. Описание компонентов можно также встроить в любой другой живой гайдлайн.
— Обзор инструментов дизайна, которые работают в связке.
2. Open Props: Фреймворк для токенов.
3. Dan Mall: Особая ценность дизайн-систем при изменениях в компании — ребрендинг, слияние и другие масштабные обновления.
4. Brad Frost: Интервью, в котором он размышляет на тему того, что будет после атомарного дизайна.
5. Doctolib: Переделка цветовой палитры.
6. Дизайн-система компании Bank Soft System. Шаблоны в Figma и страница на сайте клуба отечественных дизайн-систем.
7. Shopify: Размышления на тему гибкости и роли дизайн-систем.
8. Brad Frost: Должны ли дизайн-системы включать информацию помимо интерфейсов.
9. Wanda: Дизайн-система сервиса Wonderflow.
10. Tamagui: Фреймворк для создания дизайн-систем на React Native.
#designsystems
storybook.js.org
UI Testing Handbook
Testing techniques used by leading engineering teams
Свежие материалы о дизайн-системах подоспели:
1. Storybook: «Энциклопедия компонентов» — это каталог открытых живых гайдлайнов крупных компаний на базе фреймворка. Анонс с обзором самых интересных.
2. Brad Frost: Плюсы и минусы двух подходов к версионированию — весь фреймворк или отдельные компоненты. Сам он обычно использует первый подход.
3. Beamery: Процесс добавления нового компонента.
4. Lukas Oppermann: Принципы именования токенов.
5. Matthew Ström: Разница между дизайн-системой как словарём с заранее определёнными требованиями и набором функций, которые генерируют значения для конкретной ситуации.
6. Storybook: Советы по организации живого гайдлайна.
7. Google: Как нашли подход к динамическому созданию цветовых палитр из основного цвета темы оформления в Material You.
8. Lukas Oppermann: Серия статей о поддержке accessibility. В первой части разбирает цвет.
Инструменты и фреймворки
— Supernova: Переосмыслили инструмент в сторону менеджера дизайн-систем. Он помогает хранить константы в едином месте и экспортировать их в Figma и компонентные фреймворки.
— Story to Design: Сервис генерирует шаблоны в Figma из компонентов на React, которые описаны в Storybook.
— NextUI: Фреймворк для дизайн-систем на React.
Примеры
— Сбербанк Онлайн для iOS и Android. Это промо-сайт со ссылками на ранее запущенный сайт и другие страницы, компоненты недоступны снаружи.
— Государственные органы Калифорнии.
#designsystems
1. Storybook: «Энциклопедия компонентов» — это каталог открытых живых гайдлайнов крупных компаний на базе фреймворка. Анонс с обзором самых интересных.
2. Brad Frost: Плюсы и минусы двух подходов к версионированию — весь фреймворк или отдельные компоненты. Сам он обычно использует первый подход.
3. Beamery: Процесс добавления нового компонента.
4. Lukas Oppermann: Принципы именования токенов.
5. Matthew Ström: Разница между дизайн-системой как словарём с заранее определёнными требованиями и набором функций, которые генерируют значения для конкретной ситуации.
6. Storybook: Советы по организации живого гайдлайна.
7. Google: Как нашли подход к динамическому созданию цветовых палитр из основного цвета темы оформления в Material You.
8. Lukas Oppermann: Серия статей о поддержке accessibility. В первой части разбирает цвет.
Инструменты и фреймворки
— Supernova: Переосмыслили инструмент в сторону менеджера дизайн-систем. Он помогает хранить константы в едином месте и экспортировать их в Figma и компонентные фреймворки.
— Story to Design: Сервис генерирует шаблоны в Figma из компонентов на React, которые описаны в Storybook.
— NextUI: Фреймворк для дизайн-систем на React.
Примеры
— Сбербанк Онлайн для iOS и Android. Это промо-сайт со ссылками на ранее запущенный сайт и другие страницы, компоненты недоступны снаружи.
— Государственные органы Калифорнии.
#designsystems
storybook.js.org
Component Encyclopedia | Storybook
Explore 1000s of components and libraries
Нет лучше для подборки темы,
чем тонна ссылок про дизайн-системы
1. SuperFriendly: Мини-книга «Design System in 90 Days», в дополнение к которой идут шаблоны для воркшопов. Стоит она прилично, $349. Но ребята — одни из лучших в теме.
2. Gabe Scholz: Годные советы по разработке компонентов. Многие из них полезны для управления процессом и дизайна.
3. Eric Bailey: Список всех возможных состояний компонентов интерфейса.
4. Adam Argyle: Все аспекты реализации кнопки в коде с учётом всех современных требований (состояния, accessibility, тёмная тема и т.п.).
5. Sehee Lee: Процесс добавления новых иконок в Material Design.
6. Shopify: Рассказ об обновлении дизайн-системы. Хотя компоненты были внедрены широко, покрытие токенами было сильно меньше и нужно было починить это.
7. Alex Bueno: Занятная концепция дизайн-систем в виде Евклидовой модели.
8. Storybook:
— Интерактивное тестирование компонентов.
— Автоматизированное тестирование accessibility.
— Переключатель темы оформления.
9. Dan Mall: Критика подхода, когда команда тратит слишком много сил на старте на определение «фундамента» — например, системы цветов и отступов. Для начинающих компаний проще взять хоть что-то, а потом дорабатывать — при правильной архитектуре дизайн-системы это быстро и недорого. Ну а вместо этого сфокусироваться на главном — покрытии в продуктах и вовлечении команд.
10. Nathan Curtis: Серия статей о процессе тестирования компонентов в Figma. Часть 2 и 3.
11. Nathan Curtis: Форматы общих библиотек в Figma. Как организовать команду и процесс обновления, а также разделить компоненты на отдельные частные библиотеки.
12. CSS-фреймворки и библиотеки:
— Коллекция компонентов интерфейса на чистом CSS.
— Spruce: Ещё один простой CSS-фреймворк.
13. Исследования рынка:
— Sparkbox: Опросили 219 специалистов на тему их главных задач и болей во внедрении.
— ZeroHeight: Опрос 500 специалистов, которые работают над дизайн-системами (как в коде, так и в дизайн-инструментах). Есть некоторое количество интересных моментов, хотя и ограниченное.
14. Примеры дизайн-систем:
— Gusto.
— Culture Amp.
15. Daniel Yuschick: Особенности нового свойства CSS color-contrast(), которое здорово поможет в повышении качества accessibility. Это позволит автоматически выбирать цвет шрифта для текущего фона из набора возможных.
16. UXPin: Новая функция управления компонентами в Merge позволяет импортировать реализацию в коде в инструмент дизайна, а дальше — собирать интерактивные прототипы.
17. Brad Frost: Беседа о текущем состоянии дизайн-систем и его работе со Storybook.
18. Цветовые палитры:
— WTTJ: Соответствие требованиям accessibility.
— Primer Prism: GitHub открыли наружу свой генератор цветовых палитр, который помогает создать тёмную тему оформления и другие темы, где основной цвет — не белый. Анонс и обзор.
— Adobe Spectrum: Очередное обновление, которое использует сотня приложений компании.
19. Рамблер: Тематизация виджета комментариев для разных сервисов. Как выделить общие и настраивающиеся элементы.
#designsystems
чем тонна ссылок про дизайн-системы
1. SuperFriendly: Мини-книга «Design System in 90 Days», в дополнение к которой идут шаблоны для воркшопов. Стоит она прилично, $349. Но ребята — одни из лучших в теме.
2. Gabe Scholz: Годные советы по разработке компонентов. Многие из них полезны для управления процессом и дизайна.
3. Eric Bailey: Список всех возможных состояний компонентов интерфейса.
4. Adam Argyle: Все аспекты реализации кнопки в коде с учётом всех современных требований (состояния, accessibility, тёмная тема и т.п.).
5. Sehee Lee: Процесс добавления новых иконок в Material Design.
6. Shopify: Рассказ об обновлении дизайн-системы. Хотя компоненты были внедрены широко, покрытие токенами было сильно меньше и нужно было починить это.
7. Alex Bueno: Занятная концепция дизайн-систем в виде Евклидовой модели.
8. Storybook:
— Интерактивное тестирование компонентов.
— Автоматизированное тестирование accessibility.
— Переключатель темы оформления.
9. Dan Mall: Критика подхода, когда команда тратит слишком много сил на старте на определение «фундамента» — например, системы цветов и отступов. Для начинающих компаний проще взять хоть что-то, а потом дорабатывать — при правильной архитектуре дизайн-системы это быстро и недорого. Ну а вместо этого сфокусироваться на главном — покрытии в продуктах и вовлечении команд.
10. Nathan Curtis: Серия статей о процессе тестирования компонентов в Figma. Часть 2 и 3.
11. Nathan Curtis: Форматы общих библиотек в Figma. Как организовать команду и процесс обновления, а также разделить компоненты на отдельные частные библиотеки.
12. CSS-фреймворки и библиотеки:
— Коллекция компонентов интерфейса на чистом CSS.
— Spruce: Ещё один простой CSS-фреймворк.
13. Исследования рынка:
— Sparkbox: Опросили 219 специалистов на тему их главных задач и болей во внедрении.
— ZeroHeight: Опрос 500 специалистов, которые работают над дизайн-системами (как в коде, так и в дизайн-инструментах). Есть некоторое количество интересных моментов, хотя и ограниченное.
14. Примеры дизайн-систем:
— Gusto.
— Culture Amp.
15. Daniel Yuschick: Особенности нового свойства CSS color-contrast(), которое здорово поможет в повышении качества accessibility. Это позволит автоматически выбирать цвет шрифта для текущего фона из набора возможных.
16. UXPin: Новая функция управления компонентами в Merge позволяет импортировать реализацию в коде в инструмент дизайна, а дальше — собирать интерактивные прототипы.
17. Brad Frost: Беседа о текущем состоянии дизайн-систем и его работе со Storybook.
18. Цветовые палитры:
— WTTJ: Соответствие требованиям accessibility.
— Primer Prism: GitHub открыли наружу свой генератор цветовых палитр, который помогает создать тёмную тему оформления и другие темы, где основной цвет — не белый. Анонс и обзор.
— Adobe Spectrum: Очередное обновление, которое использует сотня приложений компании.
19. Рамблер: Тематизация виджета комментариев для разных сервисов. Как выделить общие и настраивающиеся элементы.
#designsystems
Danmall
Design Systems, Design Process, and Design Leadership Products from Dan Mall
Courses, books, and tools to help you level up as a design leader.
Вал новостей по внедрению тёмной темы давно спал, но на пыльной полке завалялась эта мини-подборка и надо отпустить её на волю:
1. Brad Frost: Предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.
2. Figma: Создание тёмной темы. Ещё один пример того, что этот переход — один из главных драйверов перехода к семантическим токенам.
3. Danny Banks: Инструкция по созданию тёмной темы на фреймворке Style Dictionary, облегчающем поддержку токенов.
4. Поддержка в вебе:
— Lea Verou: Как быстро реализовать тёмную тему через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
— Chris Coyier: Проблема дёрганого автоматического переключения между обычной и тёмной темой в браузере.
— Bramus Van Damme: Переключение тёмной темы должно быть кнопкой в самом браузере, а не на конкретном сайте. Это сэкономит много лишнего кода. Он показывает своё предложение по реализации.
— Ryan Feigenbaum: Памятка по созданию переключателя тёмной темы на сайте.
5. Robin Rendle: Создание тёмной темы для сервиса Sentry.
Черновик подборки лежал аж с марта прошлого года, так что пшикните пару раз освежителем убрать запах нафталина.
#designsystems #darkmode
1. Brad Frost: Предлагает разделять тёмную тему и инвертированный режим в дизайн-системах. Они могут решать одинаковые задачи (например, смена цвета текста и иконок), но это вызвано разными ситуациями — общая настройка устройства пользователя или конкретный блок в интерфейсе.
2. Figma: Создание тёмной темы. Ещё один пример того, что этот переход — один из главных драйверов перехода к семантическим токенам.
3. Danny Banks: Инструкция по созданию тёмной темы на фреймворке Style Dictionary, облегчающем поддержку токенов.
4. Поддержка в вебе:
— Lea Verou: Как быстро реализовать тёмную тему через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.
— Chris Coyier: Проблема дёрганого автоматического переключения между обычной и тёмной темой в браузере.
— Bramus Van Damme: Переключение тёмной темы должно быть кнопкой в самом браузере, а не на конкретном сайте. Это сэкономит много лишнего кода. Он показывает своё предложение по реализации.
— Ryan Feigenbaum: Памятка по созданию переключателя тёмной темы на сайте.
5. Robin Rendle: Создание тёмной темы для сервиса Sentry.
Черновик подборки лежал аж с марта прошлого года, так что пшикните пару раз освежителем убрать запах нафталина.
#designsystems #darkmode
Brad Frost
"Dark Mode" vs "Inverted"
One thing we run into a fair amount in our design system work is the need to clarify the difference between "dark mode" and "components rendered on a dark background".
What is actual dark mode?
prefers-color-scheme is a CSS media feature that listens…
What is actual dark mode?
prefers-color-scheme is a CSS media feature that listens…
Ссылок о дизайн-системах новую пачку держите вы:
1. Salesforce: Новый язык анимации. Сам раздел и примеры. Как он внедряется на ключевых сайтах.
2. Nathan Curtis: Концепция субкомпонентов. Они полезны, если хочется дать командам возможность кастомизации типовых компонентов, но сделать её контролируемой.
3. Brad Frost: Подход к созданию тем оформления. В статье толковая классификация ситуаций, в которых тема нужна.
4. Gusto Workbench: Процесс создания нового компонента.
5. Storybook: Обзор обновлений интерфейса грядущей версии 7.0. В целом, конечно, требуется скорее качественный рывок вперёд.
6. Amy Hupe: Как правильно упоминать всех причастных к доработке дизайн-системы.
7. Shopify: Инициатива PolarisLab, которая призвана делать эксперименты с дизайн-системой вместе с продуктовыми командами.
#designsystems
1. Salesforce: Новый язык анимации. Сам раздел и примеры. Как он внедряется на ключевых сайтах.
2. Nathan Curtis: Концепция субкомпонентов. Они полезны, если хочется дать командам возможность кастомизации типовых компонентов, но сделать её контролируемой.
3. Brad Frost: Подход к созданию тем оформления. В статье толковая классификация ситуаций, в которых тема нужна.
4. Gusto Workbench: Процесс создания нового компонента.
5. Storybook: Обзор обновлений интерфейса грядущей версии 7.0. В целом, конечно, требуется скорее качественный рывок вперёд.
6. Amy Hupe: Как правильно упоминать всех причастных к доработке дизайн-системы.
7. Shopify: Инициатива PolarisLab, которая призвана делать эксперименты с дизайн-системой вместе с продуктовыми командами.
#designsystems
Medium
What You Need to Know About the New Salesforce Kinetics System
We developed an end-to-end motion language for Salesforce and its products.
Свежий мини-выпуск о дизайн-системах, которые цветут и пахнут — многие уже простудились на их похоронах:
1. Gov.uk: Переосмысление беклога. Как меняли ранжирование через опрос команд в организации.
2. Maximilian Speicher и Guido Baena Wehrmann: Формула расчёта ROI. Она достаточно сложная, но полезная точка зрения на проблему. Шаблон для расчётов.
3. Подкаст с Ben Callahan из Sparkox. Толковые мысли о их модели зрелости внедрения дизайн-системы и особенностях этого процесса.
4. Cole Peters: Разумные ограничения, реализованные через шкалы в токенах. Сказано не так много нового, но структурировано и подано удачно.
5. Salesloft: Адаптация под требования accessibility с помощью токенов.
6. Steve Dennis: Хорошие иллюстрации логики работы токенов. Он описывает только цвета, но общий подход понятен.
7. Docusaurus 2.0: Вышла вторая версия генератора сайтов-документаций и живых гайдлайнов. Много возможностей настройки, интеграция компонентов, тематизация и т.п.
8. Cloudscape: Команда Amazon Web Services опубликовала свою дизайн-систему.
9. System.css: Простой CSS-фреймворк, стилизованный под старые операционки MacOS.
#designsystems
1. Gov.uk: Переосмысление беклога. Как меняли ранжирование через опрос команд в организации.
2. Maximilian Speicher и Guido Baena Wehrmann: Формула расчёта ROI. Она достаточно сложная, но полезная точка зрения на проблему. Шаблон для расчётов.
3. Подкаст с Ben Callahan из Sparkox. Толковые мысли о их модели зрелости внедрения дизайн-системы и особенностях этого процесса.
4. Cole Peters: Разумные ограничения, реализованные через шкалы в токенах. Сказано не так много нового, но структурировано и подано удачно.
5. Salesloft: Адаптация под требования accessibility с помощью токенов.
6. Steve Dennis: Хорошие иллюстрации логики работы токенов. Он описывает только цвета, но общий подход понятен.
7. Docusaurus 2.0: Вышла вторая версия генератора сайтов-документаций и живых гайдлайнов. Много возможностей настройки, интеграция компонентов, тематизация и т.п.
8. Cloudscape: Команда Amazon Web Services опубликовала свою дизайн-систему.
9. System.css: Простой CSS-фреймворк, стилизованный под старые операционки MacOS.
#designsystems
designnotes.blog.gov.uk
How we prioritise additions to the GOV.UK Design System
The GOV.UK Design System have been looking at what their next priorities will be over the next financial year.
Свежий ссылочный выброс на тему дизайн-систем:
1. Material Design: Снова переработали сайт. Новый подход к подаче информации, навигации, описании стилей и т.п. Ну и активное использование принципов самой дизайн-системы. Сам сайт.
2. Knapsack: Калькулятор ROI на основе своих публикаций и исследований на тему. Он умеет считать по разным срезам — люди, компоненты, общий эффект.
3. Acronis: Плагины для Figma, которые помогают экспортировать макеты писем рассылки в HTML-код. Они нашли необычное решение — это не полноценный конвертер, а связка блоков в дизайне с мини-файлами HTML для каждого блока.
4. Square: Команда бренда вместе с агентством Athletics описала язык анимации, а потом создала свой инструмент Otto для работы с анимацией для маркетинга и интерфейсов.
5. Brad Frost: Опыт работы с веб-компонентами — он в целом топит за их использование. Он показывает их текущие ограничения и размышляет на тему их решения.
6. Societe Generale: Практика переиспользования бизнес-паттернов. Это целые сценарии из серии экранов.
7. Amplitude: Плагин для Figma помогает анализировать использование живого гайдлайна. Как сама компания анализирует свою дизайн-систему.
8. Lukas Oppermann: Памятка по дизайну тёмной темы оформления. Он проходится по основным аспектам: изображения, пиктограммы, тени, шрифты, цвета.
9. Token CSS (https://tokencss.com/): Генератор токенов. Описываете их в JSON, дальше он экспортирует их в разные форматы.
10. Storybook: Как сделать переключатель языков с помощью фреймворка i18next.
11. Примеры:
— DRUIDS: Дизайн-система сервисов компании Datadog.
— NewsKit: Дизайн-система британского подразделения компании News Corp.
#designsystems
1. Material Design: Снова переработали сайт. Новый подход к подаче информации, навигации, описании стилей и т.п. Ну и активное использование принципов самой дизайн-системы. Сам сайт.
2. Knapsack: Калькулятор ROI на основе своих публикаций и исследований на тему. Он умеет считать по разным срезам — люди, компоненты, общий эффект.
3. Acronis: Плагины для Figma, которые помогают экспортировать макеты писем рассылки в HTML-код. Они нашли необычное решение — это не полноценный конвертер, а связка блоков в дизайне с мини-файлами HTML для каждого блока.
4. Square: Команда бренда вместе с агентством Athletics описала язык анимации, а потом создала свой инструмент Otto для работы с анимацией для маркетинга и интерфейсов.
5. Brad Frost: Опыт работы с веб-компонентами — он в целом топит за их использование. Он показывает их текущие ограничения и размышляет на тему их решения.
6. Societe Generale: Практика переиспользования бизнес-паттернов. Это целые сценарии из серии экранов.
7. Amplitude: Плагин для Figma помогает анализировать использование живого гайдлайна. Как сама компания анализирует свою дизайн-систему.
8. Lukas Oppermann: Памятка по дизайну тёмной темы оформления. Он проходится по основным аспектам: изображения, пиктограммы, тени, шрифты, цвета.
9. Token CSS (https://tokencss.com/): Генератор токенов. Описываете их в JSON, дальше он экспортирует их в разные форматы.
10. Storybook: Как сделать переключатель языков с помощью фреймворка i18next.
11. Примеры:
— DRUIDS: Дизайн-система сервисов компании Datadog.
— NewsKit: Дизайн-система британского подразделения компании News Corp.
#designsystems
Material Design
Magic, utility, and redesigning Material.io
Pushing visual and interactive expression in design guidelines with Material Design 3
Кошечка говорит «мяу», собачка говорит «гав», дизайн-системы в дайджесте говорят «и снова здравствуйте»:
1. Romina Kavcic: Интерактивная мини-книга.
2. Опубликованы видео с конференции Figma Schema 2022 из Лондона, Токио и Нью-Йорка. А ещё черновик презентации Jacob Miller: он предлагает подходы к организации компонентов в дизайн-системе Figma, которые упростят управление большими проектами с разными темами оформления.
3. Erik D. Kennedy: Обзор гайдлайнов iOS 16 . Основные принципы и элементы, плюс пачка шаблонов.
4. Fox: Работа над двумя дизайн-системами медиахолдинга (для обычных пользователей и внутренних сервисов).
5. Alex Bueno: Правильная архитектура токенов, которая учитывает множество брендов.
6. Backlight: Платформа для работы над дизайн-системой, которая объединяет инструменты дизайна, разработки и тестирования. Многое встраивается через плагины/надстройки к уже известным вещам.
7. Nathan Curtis: Процесс рефакторинга токенов. Иногда они создаются и используются хаотично, что тормозит отдачу от них.
8. Henny Swan: Где и как описывать accessibility.
9. Ardena Flahavin: Советы по именованию токенов и компонентов.
10. Jan Klever: Процесс принятия решений по новым компонентам и токенам в дизайн-системе Zilla сервиса Quero Education. Он ссылается на полезную диаграмму процесса Vanilla Pattern.
11. Elena Searcy: Пример описания иконок и иллюстраций в дизайн-системе.
#designsystems
1. Romina Kavcic: Интерактивная мини-книга.
2. Опубликованы видео с конференции Figma Schema 2022 из Лондона, Токио и Нью-Йорка. А ещё черновик презентации Jacob Miller: он предлагает подходы к организации компонентов в дизайн-системе Figma, которые упростят управление большими проектами с разными темами оформления.
3. Erik D. Kennedy: Обзор гайдлайнов iOS 16 . Основные принципы и элементы, плюс пачка шаблонов.
4. Fox: Работа над двумя дизайн-системами медиахолдинга (для обычных пользователей и внутренних сервисов).
5. Alex Bueno: Правильная архитектура токенов, которая учитывает множество брендов.
6. Backlight: Платформа для работы над дизайн-системой, которая объединяет инструменты дизайна, разработки и тестирования. Многое встраивается через плагины/надстройки к уже известным вещам.
7. Nathan Curtis: Процесс рефакторинга токенов. Иногда они создаются и используются хаотично, что тормозит отдачу от них.
8. Henny Swan: Где и как описывать accessibility.
9. Ardena Flahavin: Советы по именованию токенов и компонентов.
10. Jan Klever: Процесс принятия решений по новым компонентам и токенам в дизайн-системе Zilla сервиса Quero Education. Он ссылается на полезную диаграмму процесса Vanilla Pattern.
11. Elena Searcy: Пример описания иконок и иллюстраций в дизайн-системе.
#designsystems
thedesignsystem.guide
The Design System Guide
Set Up a Design System. Guide, Resources, Useful Tools, Checklists
Пробка из непрочитанного свежего разбирается, но медленно. Выдам партию ссылок по дизайн-системам:
Derek Boman: Годнейшее мышление о модели зрелости дизайн-системы. Он взял за основу концепцию Джеффри Мура «преодоления пропасти» для стартапов и грамотно переложил на этапы внедрения дизайн-системы внутри организации.
Андрей Сундиев: Пилотный запуск в Beamery. Как выбрали часть продукта для него и упрощали процесс, чтобы не делать лишнего на раннем этапе.
Material Design: Все заметные обновления в 2022 году.
Storybook: Запускают свою конференцию Storybook Day. Первая 14 марта 2023 года в онлайне.
Они открыли бета-версию Storybook 7.0. Редизайн, новый формат описания компонентов, интеграции по API, документация через MDX 2, дополнительные возможности тестирования и многое другое.
Karat: Советы по менеджменту процесса. Пример плана.
Paavan Buddhdev: Канва. Она помогает описать цели, проблемы, команду и другие аспекты создания и внедрения.
Lukas Oppermann: Обзор черновика стандарта W3C для токенов. Как научить Style Dictionary понимать эту нотацию.
Alibaba: Перевод на дизайн-систему сервиса бронирования Atlas.
Kevin Muldoon: Интересный подход к описанию типографической сетки. Он ориентируется на ширину типовых колонок контента в разных состояниях адаптивности.
Wikimedia Codex (команда, которая делает Wikipedia). Как и зачем её создавали.
Amy Hupe: Дизайн-системы могут масштабировать как удачные, так и проблемные решения. И важно проверять это на берегу.
Mafs: Библиотека React-компонентов для визуализации данных.
#designsystems
Derek Boman: Годнейшее мышление о модели зрелости дизайн-системы. Он взял за основу концепцию Джеффри Мура «преодоления пропасти» для стартапов и грамотно переложил на этапы внедрения дизайн-системы внутри организации.
Андрей Сундиев: Пилотный запуск в Beamery. Как выбрали часть продукта для него и упрощали процесс, чтобы не делать лишнего на раннем этапе.
Material Design: Все заметные обновления в 2022 году.
Storybook: Запускают свою конференцию Storybook Day. Первая 14 марта 2023 года в онлайне.
Они открыли бета-версию Storybook 7.0. Редизайн, новый формат описания компонентов, интеграции по API, документация через MDX 2, дополнительные возможности тестирования и многое другое.
Karat: Советы по менеджменту процесса. Пример плана.
Paavan Buddhdev: Канва. Она помогает описать цели, проблемы, команду и другие аспекты создания и внедрения.
Lukas Oppermann: Обзор черновика стандарта W3C для токенов. Как научить Style Dictionary понимать эту нотацию.
Alibaba: Перевод на дизайн-систему сервиса бронирования Atlas.
Kevin Muldoon: Интересный подход к описанию типографической сетки. Он ориентируется на ширину типовых колонок контента в разных состояниях адаптивности.
Wikimedia Codex (команда, которая делает Wikipedia). Как и зачем её создавали.
Amy Hupe: Дизайн-системы могут масштабировать как удачные, так и проблемные решения. И важно проверять это на берегу.
Mafs: Библиотека React-компонентов для визуализации данных.
#designsystems
Derek Boman
Design System Maturity Levels — Derek Boman
Building a design system is not easy. It requires coordinating across multiple teams and their needs. Taking a scrappy, grassroots approach that follows a 5-level startup adoption model can be instructive for driving success within your organization.