на этой неделе сразу несколько наших менти спросили про дизайн-системы — как их создавать, внедрять и развивать. в этом посте мы пройдёмся по верхам и расскажем, как сделать дизайн-систему рабочим инструментом и больше никогда не спорить о кнопочках (ну если только чуть-чуть). а если захотите погрузиться в тему с головой или у вас есть другие точки роста —
#form">оставляйте заявку и мы подберём для вас ментора мечты.
✦
бывало такое: открываешь макеты, а там у каждого дизайнера свои кнопки, отступы и даже цвета? или ещё веселее — разработчики уже сверстали одни компоненты, а дизайнеры успели придумать другие? в какой-то момент количество утверждённых, полуутверждённых и почти утверждённых стилей становится неуправляемым. тут-то и приходит на помощь дизайн-система.
что такое дизайн-система? если совсем просто — это общий язык для всей команды. дизайнеры договариваются с разработчиками об основных элементах: как выглядят кнопки, поля ввода и таблицы, какие используются цвета и шрифты — всё это живёт в одном месте.
почему это важно? во-первых, команда перестаёт спорить о мелочах и тратит время на реальные задачи. во-вторых, новые фичи собираются из готовых блоков — не нужно рисовать с нуля. пользователи не теряются в интерфейсе, потому что знакомые элементы везде выглядят одинаково. а ещё дизайнеры с разработчиками наконец-то начинают говорить на одном языке, когда обсуждают компоненты 😊
что входит в дизайн-систему
начнём с готовых компонентов — это кнопки, формы, таблицы и другие часто используемые элементы. нарисовал один раз — используй везде. дальше идут стили и правила: цвета, шрифты, отступы. если нужно поменять основной цвет, достаточно сделать это в одном месте, и он обновится во всём проекте. и конечно, нужна документация, которая объясняет, как всем этим пользоваться. она помогает новичкам быстро влиться в проект, а команде — не забыть о правилах.
если хотите посмотреть, как это работает в жизни, загляните в
material design от google — одну из самых известных дизайн-систем. если вы пользуетесь android-приложениями, то уже видели её в действии. она задаёт не только внешний вид, но и то, как ведут себя элементы интерфейса.
как создать дизайн-систему 🥴
для начала соберите все элементы интерфейса и посмотрите, где начинается хаос. обычно дизайнеры удивляются, когда видят, сколько разных вариантов одной кнопки гуляет по макетам.
следующий шаг — выделить основные стили: цвета, шрифты, отступы. это фундамент, на котором будет стоять всё остальное. потом можно приступать к библиотеке компонентов. начните с простых элементов, постепенно добавляя более сложные.
обязательно документируйте каждый шаг. каждый член команды должен знать, где найти нужный компонент и как его использовать. и конечно, важно договориться об инструментах: дизайнеры обычно работают в figma, а разработчики — например, в
storybook.
если хотите почитать по теме, советуем начать с
atomic design брэда фроста — он отлично объясняет, как собирать сложные интерфейсы из простых компонентов. и обязательно изучите документацию
material.io — на примере material design можно многому научиться.
дизайн-система — живой организм, а не догма. она должна развиваться вместе с продуктом. удаляйте неиспользуемое, добавляйте новое, следите, чтобы документация всегда оставалась актуальной и у вас всё получится 👍
