1 800x440 - Как будут выглядеть инструменты для создания дизайн-систем в будущем

Нет сомнений в том, что будущее дизайн-систем не зависит от инструментов.

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

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

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

Создание дизайн-системы в Sketch или Figma – это замечательно, но что произойдет, если вам потребуется доступ к тем же компонентам в Illustrator, InVision или Adobe XD? Что если продакт-менеджеры, работающие над слайдом или документом, захотят использовать ту же цветовую палитру или художественную библиотеку, что и команда дизайнеров продукта. Как им сделать это, не отправляя дюжину запросов дизайнерам?

То же самое касается разработчиков: как они могут синхронизироваться с дизайн-системой, не обращаясь к файлам Figma или Sketch каждый час? Аналогично: как команда дизайнеров может гарантировать, что то, над чем они работают в данный момент, совпадает с тем, что строят разработчики?

Будущее – это единый инструмент для дизайн-систем.

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

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

В некотором смысле это будущее уже настало.

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

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

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

Я давно увлечен идеей абстрагирования данных дизайн-системы от любого централизованного инструмента проектирования (такого как Sketch или Figma).

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как будут выглядеть инструменты для создания дизайн-систем в будущем

Эти кастомные плагины обеспечивали автоматическое обновление дизайн-системы и позволяли группам быстро получать доступ к элементам или компонентам, не беспокоясь о том, какой элемент использовать или откуда его извлечь. Но такие системы были ограничены инструментом дизайна, выбранным командой Sketch или Figma.

В последнее время я изучал, как упрощенный инструмент может помочь командам – ​​и не только дизайнерам, но и целым командам продуктов – быть в курсе новейшей дизайн-системы и дать им возможность использовать ее, даже не открывая инструмент проектирования.

Подобный проект означал бы, что команды могут использовать элементы дизайна, такие как цвет, типографика, иконки и графика, в любом приложении: Google Slides, Excel, Slack, GitHub и т. д.

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

Я начал работать над таким инструментом в октябре 2019 года, назвав его Superb.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как будут выглядеть инструменты для создания дизайн-систем в будущем

Я планирую использовать полученный инструмент с командой дизайнеров в Gem, но надеюсь, что проект с открытым исходным кодом позволит другим командам использовать и улучшить его!

Идея проста: все элементы дизайн-системы размещаются где-то на сервере (AWS, GitHub) в виде файлов JSON. Это также согласуется с работой разработчиков, которым необходимо извлекать новейшие системные компоненты или элементы из общего репозитория.

Поскольку современный продуктовый дизайн использует векторные форматы, даже размещение сложных компонентов в формате JSON довольно просто. Такие приложения, как Figma и Sketch, позволяют копировать + вставлять raw-компоненты или экспортировать их в виде SVG-файлов, которые затем можно отправить в файл JSON.

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

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

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

В будущем могут быть добавлены другие вкладки для таких вещей, как: макет, движение, взаимодействия, фигуры и многое другое.

Когда вы открываете приложение, поиск становится активным, и вы можете мгновенно выполнять поиск по всем категориям. Поиск работает не только по именам элементов или компонентов, но и по метаданным, таким как: цветовые коды (hex или rgb), метаданные (категории, рекомендации, рекомендации по использованию) и даже синонимы (поэтому поиск «notification» на вкладке иконок покажет иконки, похожие на колокольчики, бейджи и всплывающие окна).

Все можно настраивать в файле JSON. Пользователи инструмента могут дополнительно подстраивать под себя отображаемую и копируемую информацию (например, копирование имени компонента для разработчиков или векторное копирование для дизайнеров) и многое другое.

А поскольку приложение является нативным (встроенным в Swift и SwiftUI), использование Superb можно отслеживать с помощью любых инструментов аналитики, которые в настоящее время использует команда дизайнеров. Google Analytics, Firebase или пользовательский трекер.

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

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

Свежие вакансии
                        Skywaylab Skywaylab After Effects- 2D аниматор на проектные работы удаленно! Фриланс Москва до 20 000 руб за ролик ₽
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
Все вакансии

Оригинал: tannerchristensen.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом руководстве мы рассмотрим основы определения пространственных базовых единиц и создание правил отношений с помощью сеток

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma

Хардкорное применение Figma Auto layout — большой гайд

В этой статье я покажу хардкорное применение последнего нововведения в Figma –Auto layout