Дизайн-системы для разработчиков

Для разработки дизайн-системы требуется нечто большее, чем библиотека компонентов пользовательского интерфейса и Storybook. Как разработчик, работающий над системой дизайна, вы отвечаете за извлечение спецификаций дизайна из файлов дизайна и преобразование их в код. Если этот код не может масштабироваться во всех приложениях, использующих дизайн-систему, или в тех, которые будут использовать дизайн-систему в будущем, страдает компания. Вы можете легко застрять в создании очень узких инструментов, таких как библиотека компонентов React, без прочной основы. Потому что библиотека компонентов React — это здорово, но это может дорого обойтись, если вы сделаете это слишком рано. В любой компании приложения могут различаться в зависимости от платформы (например, веб) и технологии (например, React). Если все, что у вас есть, это библиотека компонентов React, как только вы представляете приложение с другой технологией (например, Vue), вам нужно найти способ поделиться спецификациями дизайна между библиотекой компонентов React и библиотекой компонентов Vue. Таким образом, вы можете создать библиотеку CSS-in-JS, которая может инкапсулировать спецификации дизайна и использоваться библиотеками компонентов React и Vue соответственно.

Но что происходит, когда возникает запрос на инкапсуляцию спецификаций дизайна таким образом, чтобы он работал на простом HTML-сайте? Что ж, вы можете перенести инкапсуляцию спецификаций дизайна из библиотеки CSS-in-JS в простой файл CSS. Тем не менее, это ограничивает разработчиков React и Vue в использовании предпочитаемых ими технологий и нарушается, когда вводится не веб-приложение (например, мобильное приложение для Android). Обычно разработчики React и Vue носят с собой библиотеку CSS-in-JS, а разработчики простого HTML — с обычным файлом CSS. Проблема в том, что ваши спецификации дизайна представлены в коде в нескольких местах. Вы больше не можете знать, какой из них является «источником истины». Вы создаете повышенный риск того, что различные приложения в компании не синхронизированы с официальной системой проектирования и друг с другом.

В конце концов, вам нужно представить свои проектные спецификации в коде в одном месте. Из этого единственного «источника правды» вы можете затем генерировать результаты платформы (т. е. переменные CSS, модули JS и т. д.). чтобы все потребители этих результатов были синхронизированы с системой дизайна и друг с другом.

Оказывается, многие компании занимались этими проблемами, включая Shopify, Adobe, Discovery Education, Morningstar, Orbit, Salesforce, Bloomberg и другие.

Решение заключается в создании токенов дизайна и управлении словарем стилей.

«Системы дизайна для разработчиков» — это глубокое погружение в необходимость токенов дизайна, их объяснение и практические решения по их использованию для запуска инструментов системы дизайна в производство.

Более того, я подчеркиваю тот факт, что инструменты и автоматизация полезны только в том случае, если в первую очередь происходит хорошее общение между дизайнерами и разработчиками.

Из этой книги вы узнаете не только о технических навыках, необходимых для создания инструментов системы проектирования для производства, но и о навыках межличностного общения, необходимых для совместной работы дизайнеров и разработчиков.

Являетесь ли вы дизайнером или разработчиком, эта книга для вас.

Я верю, что после прочтения этой книги разработчики смогут работать над дизайн-системой для любой компании, независимо от количества приложений, платформы и технологий, для которых предназначены эти приложения.

Я также верю, что дизайнеры лучше поймут свою роль в сотрудничестве с разработчиками для создания надежной системы дизайна.

В этой книге мы обрисуем проблемы, связанные с созданием инструментов, таких как библиотека компонентов пользовательского интерфейса React, для инкапсуляции стилей дизайн-системы, например, негибкость масштабирования при появлении новых приложений, ориентированных на другую платформу и технический стек.

Оттуда мы рассмотрим, как эти проблемы могут быть решены путем создания токенов дизайна, представлений спецификаций дизайна в коде и словарей стилей, центральной системы управления для хранения токенов дизайна и преобразования их в результаты платформы.

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