Основной хайп по дизайн-системам сходит на нет и начинается лучший этап в жизни любой технологии ― крутые внедрения, решающие реальные проблемы. Внедрения с компонентами в коде в современном понимании «что такое хорошо» были давно, ещё в 2012-2013 годах.

За последние год-полтора идея приросла крепкими примерами в двух ключевых местах ― токены и интеграция с инструментами дизайна:

1. Мощный рассказ Benjamin Martin из TeleTracking о том, как их дизайн-система собирает компоненты и шаблоны в Sketch из токенов ― https://medium.com/teletracking-design/mosaic-design-system-living-solution-d5df4a752e9b. В статье отличная диаграмма последовательности сборки с упоминанием всех нужных инструментов.

2. Cristiano Rastelli из Badoo рассказывает о том, как токены используются в их дизайн-системе Cosmos ― https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa. Они базируются на фреймворке Style Dictionary ― https://amzn.github.io/style-dictionary/. Презентация автора, Danny Banks из Amazon — https://dbanksdesign.github.io/style-dictionary-presentation/. Ещё немного про токены:

― Токены дизайн-системы Firefox Proton ― https://github.com/FirefoxUX/design-tokens.

― Простой фреймворк для создания дизайн-систем с использованием токенов ― https://github.com/mrmartineau/design-system-utils.

3. В другой статье Cristiano Rastelli из пишет об экспорте иконок из Sketch ― https://medium.com/@didoo/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part1-82f438c7e16c. У компании несколько продуктов, так что подход поддерживает тематизацию. Часть 2 ― https://medium.com/@didoo/generating-multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part2-8d02e8bb915a.

4. Судя по всему, тёмные темы оформления станут хитом следующего года ― https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode. Andy Clarke показывает, как поддержать её на сайте через media queries.

У нашей команды на подходе статья о токенах в дизайн-системе Paradigm (особо находчивые уже могут посмотреть бету вживую), там же будет рассказ о раздаче иконок.

А если вы ещё на более ранних стадиях внедрения, то спецом для вас Brad Frost, Dan Mall и Josh Clark подготовили серию образовательных видео по работе над дизайн-системами для InVision ― https://www.invisionapp.com/design-system-manager/expert-advice. Анонс ― https://bigmedium.com/ideas/design-systems-mastering-design-at-scale-video.html. Удачи в систематизации себя и продуктов!

#designsystems #tokens

​Если вы открыли этот выпуск мини-дайджеста в поисках идей по развитию своей дизайн-системы, значит я не зря читал эти статьи для вас. Пара примеров, отличных инструкций и инструментов:

1. Шикарная памятка по описанию анимации от Caleb Barclay. Аудит существующих решений, ключевые переменные и шкалы, характер и принципы, спецификация.

2. Adam Doti из Salesforce рассказывает об описании интерфейсных звуков в их дизайн-системе Lightning. Принципы, паттерны и отличная модель уместности.

3. Дизайн-система ВКонтакте для мобильных приложений. Поддерживает тематизацию на базе токенов (репозиторий). Михаил Лихачёв рассказывает о создании тёмной темы для мобильных приложений. Для этого им потребовалось перевести часть переменных на токены, так что улучшили основу для дизайн-системы.

4. Дизайн-система Uber. Анонс.

5. Nathan Curtis показывает, как описывать несколько плотностей компонентов и типографику.

6. Обзор синтаксиса MDX и популярных фреймворков (Docusaurus, Gatsby, Docz, Storybook, Styleguidist, VuePress, MkDocs, GitBook) для создания живых гайдлайнов и описания компонентов.

Последние выпуски микро-дайджеста тянут на жёсткое макро, которое читать обычно нету сил. Попробую сдерживать себя и оставаться в рамках 5-7 ссылок (хохма.jpeg).

#designsystems

​В дайджесте много любимых тем, особенно — обзоры дизайн-систем. Немного статей подобралось затем, чтоб было с дизайном у вас je t'aime:

1. Nathan Curtis: Мощнейший разбор принципов именования токенов. Все возможные варианты и подходы в одной статье.

2. Spotify: Истории развития дизайн-систем в компании и текущем подходе Encore.

3. Google: Как появилась фирменная плавающая кнопка в Material Design. Она стала одним из самых ярких элементов интерфейса, усилившим этот внутренний бренд.

4. IBM: Анализируют опыт работы над дизайн-системой Carbon. Она даёт серию советов начинающим — местами очевидных, но всё равно полезных.

5. Lyft: Особенности работы с цветом.

6. WebNL: Неудачная попытка старта и успех со второй.

7. Ahmad Shadeed: Подробная памятка по переменным в CSS, самой простой реализации токенов в дизайн-системах.

На концовку дурацкого стишка нет, но это и хорошо.

#designsystems