Benkendorf Design System
Инструмент, позволяющий быстро настраивать интерфейсы через токены. Он обеспечивает гибкость и адаптацию под уникальные задачи каждого проекта.
Смотреть в Figma →
Следующий кейс
Контекст и вызов
В агентстве каждый новый проект требовал разработки отдельной дизайн-системы, что замедляло процессы и увеличивало затраты. Возникла необходимость в универсальном инструменте, который можно было бы быстро адаптировать под разные задачи. Так появилась Benkendorf Design System — гибкая система на базе токенов, способная трансформироваться под нужды клиента и обеспечивать консистентность.
Моя роль
Я участвовала в разработке структуру системы, добавлении токенов и компонентов, а также написала документацию для дизайнеров.
Ключевые особенности
Токены

Основные элементы системы, которые обеспечивают гибкость и адаптивность. Все токены сгруппированы по категориям — типографика, цвета, размеры и отступы. Легко настраиваемые переменные позволяют быстро изменять ключевые параметры системы.
Типографика

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

Палитры дизайн системы легко внедряются через переменные в настроенную цветовую схему со светлой и темной темой.
Размеры и отступы

Концептуальные обозначения (например, spacing-small) упрощают работу с макетом, позволяя дизайнерам быстро задавать и изменять отступы в зависимости от требований проекта. Переменные, связанные с этими токенами, обеспечивают единообразие в интерфейсах и ускоряют внесение изменений.
Компоненты

Каждый компонент системы разработан с учётом адаптации под светлый и тёмный режимы, а также различных состояний (hover, focus, disabled). А большое количество properties позволяет использовать компоненты в разных сценариях без дополнительных доработок.
Документация

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

Примеры интеграции в проекты включают готовые решения для различных типов интерфейсов:

CRM — управление задачами и взаимодействиями
Дашборды — визуализация аналитических данных
Веб-страницы — структурные макеты для сайтов
Дальнейшее развитие
Benkendorf Design System будет развиваться в направлении создания инструмента для разработки дизайн-систем, который позволит:
  • Расширение возможностей токенов
    Инструмент будет использовать все доступные токены (обводки, градиенты и т. д.), позволяя дизайнерам легко управлять деталями интерфейса. Это упростит адаптацию макетов под задачи клиента и ускорит процесс разработки, сохраняя целостность дизайна.
  • Автоматизация
    Интеграция с Figma позволит дизайнерам напрямую управлять токенами и изменять параметры компонентов (цвета, размеры, состояния) в едином интерфейсе. Это сократит время на синхронизацию между дизайном и разработкой, обеспечив более эффективное сотрудничество команд.
Figma-file