Последовательность — это ключ — как создать дизайн-систему Figma

Среди дизайнеров общеизвестно, что хорошая система дизайна может иметь огромное влияние на качество продуктов, которые мы поставляем, и скорость, с которой мы можем их разрабатывать. Поскольку доводы в пользу создания комплексной системы проектирования неоднократно подтверждались такими компаниями, как Google, GitHub, IBM и другими, использующими их для более быстрого создания более качественных продуктов, вопрос сместился с «Почему у нас должен быть дизайн система?" на «Как мы можем создать отличную дизайн-систему?»

Так что же такое дизайн-система? Уилл Фэнгай определяет его как «набор повторно используемых компонентов, руководствуясь четкими стандартами, которые можно собрать для создания любого количества приложений». Дизайн-система может включать в себя не только библиотеку компонентов пользовательского интерфейса и библиотеку шаблонов, но и руководство по стилю, лучшие практики, код и многое другое. Точно так же, как проект архитектора для здания, система проектирования также служит «единым источником истины» для команды разработчиков при создании продуктов, а также помогает поддерживать согласованность.

GitHub даже зашел так далеко, что поделился своей библиотекой компонентов Figma — отличным примером системы проектирования на основе Figma. Более обширные инструменты, такие как Storybook и Component-Driven Development, также являются чрезвычайно полезными ресурсами для реализации и документирования системы дизайна.

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

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

Сила библиотеки компонентов

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

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

Дизайн-система — это, прежде всего, набор инструментов

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

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

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

Почему Figma отлично подходит для создания библиотеки компонентов

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

• Стили — это цвета и стили шрифта (шрифт, размер, вес и т. д.), которые определяются в одном месте и могут применяться ко многим объектам.
• Компоненты — это такие вещи, как кнопки или пузыри чата, которые могут быть созданы из стилей, объектов, таких как фигуры и текст, и других компонентов.
• Файлы библиотеки позволяют совместно использовать стили и компоненты для нескольких файлов, а также для группы или организации.

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

Создание файла библиотеки

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

Это имеет несколько ключевых преимуществ:

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

Организация

При построении дизайн-системы в Figma полезно проводить параллели между инструментами и теорией. Например, Styles в Figma можно считать самым базовым уровнем, даже более базовым, чем Atoms в модели Atomic Design Брэда Фроста. Такие вещи, как цвет и шрифт, помогают создать эстетику продукта.

Простой компонент Figma будет считаться атомом в модели Atomic Design, например, кнопкой. Более сложным компонентом Figma будет считаться молекула или организм , который затем используется для создания шаблонов и страниц .

Некоторые из наиболее полезных вещей, которые нужно иметь в библиотеке компонентов:

• Цвета
• Шрифты
• Активы бренда, логотип и т. д.
• Навигация
• Кнопки
• Уведомления
• Модальные
• Элементы формы и проверка

Создание дизайн-системы в Figma — начало работы

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

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

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

Создайте файл библиотеки Figma

Создайте новый файл и опубликуйте его как библиотеку. После создания нового файла щелкните вкладку « Активы », щелкните значок « Библиотека » и нажмите « Опубликовать ». Это публикует стили и компоненты в файле библиотеки, чтобы их можно было использовать в других файлах.

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

Как создать стиль Figma

Создание стилей в файлах библиотеки такое же, как и в любом другом файле, описанное ниже.

• Выберите объект, из которого вы хотите создать стиль. Стили могут быть цветами, свойствами текста, эффектами и сетками макета.
• Нажмите кнопку «Стили» (четыре точки в квадрате) рядом со свойством, которое будет использоваться в новом стиле, затем нажмите кнопку «плюс» во всплывающем окне, чтобы создать новый стиль.

• Это покажет модальное имя стиля. Часто полезно использовать семантическое имя, а не презентационное, например, «Основной цвет» вместо «Зеленый», чтобы было понятнее, для чего предназначен стиль.
• Опубликуйте стиль в вашей командной библиотеке, используя всплывающее окно, которое появляется в правом нижнем углу экрана, или повторите шаги, предпринятые для публикации библиотеки в первый раз.

Вот учебник Figma о том, как создать стиль .

Как создать компонент Figma

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

Компоненты публикуются в Коллективной библиотеке так же, как и Стили.

Вот учебник Figma о том, как создать компонент .

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

Использование библиотеки Figma

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

Теперь библиотека компонентов готова к использованию. Компоненты можно разместить, перетащив их в файл проекта с вкладки «Активы» в левой части экрана. Стили библиотеки можно использовать так же, как и локальные стили, при изменении стилей текста, цветов заливки, штрихов, эффектов и сеток макета.

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

Помимо создания библиотеки компонентов в Figma

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

Руководство по стилю контента Mailchimp — отличный пример, подробно описывающий тон голоса и брендинг через контент. На GitHub есть отличная документация о том, как их библиотека компонентов работает в коде, а в системе дизайна материалов Google также есть несколько отличных примеров документирования логики, лежащей в основе системы дизайна.

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Сила Figma как инструмента дизайна
• Оптимизируйте совместный дизайн с Figma
• Мини-учебник — Использование возможностей Figma для всего процесса проектирования
• Мини-учебник — Работа с компонентами кнопок Figma
• Совершенствуйте свое мастерство с помощью этих лучших инструментов UX