1 2 800x440 - Как маленькая команда создала дизайн-систему сайта figma.com

Figma – это инструмент для совместного проектирования интерфейсов, он улучшает процесс проектирования отдельных дизайнеров и команд. Но проведя аудит нашего сайта мы обнаружили, что не прислушиваемся к собственным советам. Он содержал много несоответствий. Мы насчитали более десяти различных цветов, размеров заголовков и кнопок. Что еще хуже, всякий раз, когда мы хотели создать новую страницу, мы начинали с нуля. Наш подход к созданию веб-сайтов не был современным, и нам нужно было найти лучшее решение.

Отсутствие согласованности

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

Работа с небольшой, разнообразной командой

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

Инвентаризация

Вместо того, чтобы продолжать изобретать велосипед, мы внимательно рассмотрели ранее созданные элементы. Это означало, что у нас уже была коллекция компонентов. Конечно, она не была должным образом организована и маркирована, но у нас было с чего начать. Нашим первым шагом была инвентаризация имеющихся элементов – шрифты, размеры, цвета, ширина столбцов, макеты и так далее. Мы начали собирать всю эту информацию в документ, где было легко увидеть совпадения или, другими словами, повторные применения паттернов. Мы также увидели компоненты, которые использовались только раз, и поэтому они не попали в наше руководство по стилю.

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

Мы также искали похожие, но не идентичные элементы, и собирали их в один стиль. Таким образом, в нашем предыдущем примере вместо 12 различных размеров заголовков мы установили стандарт H1-H6 с одним размером для каждого типа заголовка.

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

Упрощенная, гибкая дизайн-система

В течение месяца наша небольшая команда создала и организовала надежное, адаптируемое руководство по стилям и библиотеку компонентов, которая теперь находится в нашей CMS, Contentful. Все элементы согласованы по направлениям – типографика, размеры, отступы, высота линий, цвета и сетка. Там, где раньше существовало 19 нейтральных оттенков серого, теперь у дизайнера есть несколько четких вариантов. Кроме того, у каждого цвета есть свое фирменное имя, вдохновленное штатом Калифорния, где базируется Figma. Землисто-зелёный – это avocado toast, а огненно-жёлтый – sunset. Это помогает командам лучше запоминать цвета. Мы также потратили немало времени на точную маркировку всех элементов, чтобы дизайнер мог быстро найти необходимый. Теперь, когда команда дизайнеров собирается создать новую страницу, у них под рукой есть гибкие строительные блоки. Создать модуль с заголовком H1, H2, основным текстом и призывом к действию так же просто, как извлечь эти компоненты из дизайн-системы. Вы можете просмотреть наш файл руководства по стилю здесь.

Мы также начали преобразовывать в компоненты спаренные элементы и полностью собранные секции. Мы называем эти более крупные единицы «FLEGO» (Figma + LEGO), и вы можете ознакомиться с ними в общедоступном файле, расположенным ниже.

Быстрый выход на рынок

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как маленькая команда создала дизайн-систему сайта figma.com
Страницы с примерами figma.com используют библиотеку компонентов и FLEGO

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

Текущая эволюция

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Как маленькая команда создала дизайн-систему сайта figma.com

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

Запустите свою собственную систему

Пытаетесь организовать и продвигать свою собственную систему? Вот ссылки на файлы, которые управляют дизайн-системой Figma. Используйте их как руководство для создания своей системы:

  • Руководство по стилю Figma.com
    • Содержит все стили, которые мы используем на сайте.
  • FLEGOs
    • Строительные блоки сайта, которые состоят из атомов и молекул нашей дизайн-системы.

Style Guide Starter

Created with Figma

Свежие вакансии
                        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 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

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

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

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

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

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

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

Figma Tips & Tricks – сверхмощный рабочий процесс

В статье собран список самых последних и самых удобных комбинаций клавиш и техник Figma