Как создать дизайн-систему в Figma? Основы дизайн-систем

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

Что такое дизайн-система?

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

Дизайн система Material Design 3 от Google

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

Что входит в дизайн-систему:

• Цветовая палитра с чёткими правилами использования
• Типографическая шкала (размеры шрифтов, начертания, межстрочные интервалы)
• Система отступов и сеток
• Библиотека компонентов (кнопки, инпуты, карточки и т.д.)
• Иконки и иллюстрации
• Паттерны взаимодействия
• Документация и гайдлайны

Чем дизайн-система отличается от UI-кита?

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

Надеюсь, теперь вы не будете путать эти понятия. И раз мы уже поняли, что такое дизайн-система, самое время разобраться как её построить?

Фундамент дизайн-системы

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

Структура токенов в дизайн-системе

Что такое токены и за что они отвечают мы подробно разбирали в отдельной статье. Токены — это самые маленькие частицы дизайн-системы, на основе которых строятся все последующие элементы. В токенах определяются цвета, системы пространства (отступы и размеры) и типографические значения.

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

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

Компоненты и атомарный подход

После того, как у нас будет готов наш фундамент в виде коллекций токенов, можем переходить к сборке компонентов. Компоненты — это кирпичики вашей дизайн-системы. Их можно создавать по-разному, но самый популярный подход — Atomic Design (атомарный дизайн), предложенный Брэдом Фростом.

Методология атомарного дизайна. Источник — atomicdesign.bradfrost.com

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

Основной подход данной методологии заключается в наследовании элементов и их переиспользовании. Т.е. Вы создали иконку, сделали из неё компонент и используете дочерние компоненты этой иконки в последующих уровнях ваших компонентов (в молекулах, организмах и шаблонах)

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

Auto layout в дизайн-системах

Все компоненты в вашей дизайн-системе должны быть построены на Auto layout. Без них, дизайн-система не имеет смысла и теряет свою адаптивность.

Урок по Auto layout бесплатного курса Figmaster

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

Организация и структура дизайн-систем

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

Оформление гайдлайнов Apple

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

Структура страниц в Figma

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

Нейминг элементов

Важный момент которому у нас на курсе «Дизайн-системы» посвящен отдельный урок. Главное правило — названия ваших элементов должны быть понятными, без двояких трактовок. Определите конкретные правила, опишите их, и придерживайтесь при нейминге всех элементов.

Документация

Дизайн-система без документации — бесполезная куча компонентов. В документацию включается абсолютно все, когда использовать или не использовать компоненты, описание компонентов, переменных и вариантов, анатомия, требования accessibility, история версий и многое другое. Документация так же разнится от дизайн-системы к дизайн-системе, хороший пример структуры документации и описаний это гайдлайны от Apple (Human Interface Guidlines).

Публикация библиотеки компонентов

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

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

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