Нет сомнений в том, что будущее дизайн-систем не зависит от инструментов.
Большинство из нас уже заметили возникшую проблему. По мере того, как команды дизайнеров меняются и растут, им необходим доступ к библиотеке компонентов и общему языку дизайна, чтобы обеспечить согласованность и быстро работать без ущерба качеству. Но когда они перемещаются по инструментам, элементы и атрибуты системы теряются.
Кроме того, остальным командам – тем, кто исторически был вынужден полагаться на сложные интрасети или использовать ненужные им инструменты проектирования – нужен доступ к большинству тех же элементов, что и команде дизайнеров. И это несмотря на то, что они не используют эти инструменты изо дня в день.
Это означает, что чрезмерная зависимость от самих инструментов проектирования для управления дизайн-системами становится проблемой.
Создание дизайн-системы в Sketch или Figma – это замечательно, но что произойдет, если вам потребуется доступ к тем же компонентам в Illustrator, InVision или Adobe XD? Что если продакт-менеджеры, работающие над слайдом или документом, захотят использовать ту же цветовую палитру или художественную библиотеку, что и команда дизайнеров продукта. Как им сделать это, не отправляя дюжину запросов дизайнерам?
То же самое касается разработчиков: как они могут синхронизироваться с дизайн-системой, не обращаясь к файлам Figma или Sketch каждый час? Аналогично: как команда дизайнеров может гарантировать, что то, над чем они работают в данный момент, совпадает с тем, что строят разработчики?
Будущее – это единый инструмент для дизайн-систем.
Представьте команду дизайнеров, в которой вы можете переключаться между инструментами дизайна без необходимости переносить дизайн-систему или атрибуты бренда.
Или представьте себе, что вы только что присоединились к новой команде и хотите использовать дизайн-систему, но не можете вспомнить URL-адрес внутренней сети, где она находится, или файл проекта, который вам нужно найти и синхронизировать, чтобы посмотреть последнюю цветовую палитру или дизайн всплывающего диалогового окна.
В некотором смысле это будущее уже настало.
Например, команда дизайнеров Facebook имеет мощный инструмент системного уровня, который автоматически синхронизирует дизайн-систему с компьютерами дизайнеров. И любой сотрудник компании может использовать свой инструмент для доступа к таким вещам, как рекомендации бренда, типографика и наборы иконок. Небольшая команда специалистов, сосредоточенная исключительно на дизайн-системе, и тратит время на создание, документирование и синхронизацию всего, от цветовых палитр или потребительских продуктов до сложных компонентов. Они работают в приложении, которое называется Design Pack.
Такие инструменты, как Specify обещают предоставить подобную функциональность любой команде дизайнеров в любом месте. С помощью специального приложения, созданного для того, чтобы не только получить доступ к дизайн-системе, но и управлять ею.
Многие команды дизайнеров в крупных компаниях также начинают строить это будущее. Эти команды обладают ресурсами и опытом для создания инструментов, обеспечивающих развитие и рост дизайн-системы, а также ее легкодоступности любому сотруднику компании.
Я давно увлечен идеей абстрагирования данных дизайн-системы от любого централизованного инструмента проектирования (такого как Sketch или Figma).
Я начал с изучения средств, облегчающих дизайнерам доступ к дизайн-системе, например, с помощью плагинов.
Эти кастомные плагины обеспечивали автоматическое обновление дизайн-системы и позволяли группам быстро получать доступ к элементам или компонентам, не беспокоясь о том, какой элемент использовать или откуда его извлечь. Но такие системы были ограничены инструментом дизайна, выбранным командой Sketch или Figma.
В последнее время я изучал, как упрощенный инструмент может помочь командам – и не только дизайнерам, но и целым командам продуктов – быть в курсе новейшей дизайн-системы и дать им возможность использовать ее, даже не открывая инструмент проектирования.
Подобный проект означал бы, что команды могут использовать элементы дизайна, такие как цвет, типографика, иконки и графика, в любом приложении: Google Slides, Excel, Slack, GitHub и т. д.
Кроме того, командам дизайнеров не нужно было бы беспокоиться о переходе своей системы на еще один инструмент всякий раз, когда появляется более новый и функциональный инструмент. Команда может управлять одной системой в одном месте.
Я начал работать над таким инструментом в октябре 2019 года, назвав его Superb.
Я планирую использовать полученный инструмент с командой дизайнеров в Gem, но надеюсь, что проект с открытым исходным кодом позволит другим командам использовать и улучшить его!
Идея проста: все элементы дизайн-системы размещаются где-то на сервере (AWS, GitHub) в виде файлов JSON. Это также согласуется с работой разработчиков, которым необходимо извлекать новейшие системные компоненты или элементы из общего репозитория.
Поскольку современный продуктовый дизайн использует векторные форматы, даже размещение сложных компонентов в формате JSON довольно просто. Такие приложения, как Figma и Sketch, позволяют копировать + вставлять raw-компоненты или экспортировать их в виде SVG-файлов, которые затем можно отправить в файл JSON.
Superb проверяет последние системные файлы каждый раз, когда они используются, затем загружает копию на компьютер пользователя, поэтому, если он выходит в автономный режим, у него всегда есть последняя версия ресурсов.
Приложение существует в виде строки состояния в верхней части экрана. Вы можете открыть приложение, нажав на его иконку или используя глобальную команду с помощью горячих клавиш. Вам не нужно открывать другое приложение, чтобы вставить в Figma последние цветовые коды или перетаскивать изображения в вашу колоду Keynote. Просто используйте строку состояния, чтобы скопировать и вставить элементы или перетащить готовые компоненты в ваш проект.
С помощью панели вкладок в верхней части приложения Superb разбит на несколько категорий: цвета, иконки, шрифт и интерфейс (в котором размещены иллюстрации, а также сложные компоненты).
В будущем могут быть добавлены другие вкладки для таких вещей, как: макет, движение, взаимодействия, фигуры и многое другое.
Когда вы открываете приложение, поиск становится активным, и вы можете мгновенно выполнять поиск по всем категориям. Поиск работает не только по именам элементов или компонентов, но и по метаданным, таким как: цветовые коды (hex или rgb), метаданные (категории, рекомендации, рекомендации по использованию) и даже синонимы (поэтому поиск «notification» на вкладке иконок покажет иконки, похожие на колокольчики, бейджи и всплывающие окна).
Все можно настраивать в файле JSON. Пользователи инструмента могут дополнительно подстраивать под себя отображаемую и копируемую информацию (например, копирование имени компонента для разработчиков или векторное копирование для дизайнеров) и многое другое.
А поскольку приложение является нативным (встроенным в Swift и SwiftUI), использование Superb можно отслеживать с помощью любых инструментов аналитики, которые в настоящее время использует команда дизайнеров. Google Analytics, Firebase или пользовательский трекер.
Такая аналитика полезна для команд дизайнеров, чтобы узнать, кто использует какие компоненты и как часто. То есть команды дизайн-систем теперь могут предоставить реальные показатели своей работы, и то, насколько она ценна.
Дизайн-системы заслуживают отдельного места, оторванного от инструментов, которые мы используем для реального проектирования. Это позволит использовать их большему количеству людей, само использование будет гибким, а поддержание актуальности наших систем станет намного проще.
Перевод статьи tannerchristensen.com
Топ коментарі (0)