Давай сделаем сайт с помощью дизайн-системы? Ты будешь дизайнить гораздо быстрее

Предисловие

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

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

• Хоть и бегло, но я не увидел в поисковой выдаче статей с такой тематикой.

• Я могу делиться своими знаниями, вот и делюсь.

Порог входа (чтобы ты вообще понял(а), о чём я тут рассказываю): 

1. У тебя есть аккаунт в Фигме и ты в ней ориентируешься.

2. Ты знаешь, что такое автолейалуты, компоненты, стили и т.п.

3. Ты уже имел опыт работы с интерфейсами или усердно изучаешь веб-дизайн.

Работу с дизайн-системами мы будем рассматривать на примере моей: https://www.figma.com/community/file/1623663606281890998, но в Figma Community, да и в целом в интернете ты можешь найти другие (возможно, они будут не такие гибкие, как моя). У них у всех примерно верно одинаковая логика.

В конце статьи я расскажу, что нужно сделать для того, чтобы получить дизайн-систему на русском языке (да, она уже есть).

Перед началом работы

Я крайне рекомендую перед началом работы над проектом определиться с концепцией: в какой палитре/стиле будешь работать, продумать структуру сайта и т. п. Учитывай, что дизайн-система или UI-kit — это инструмент для реализации макетов и прототипов. Если берёшься за молоток, то приготовь гвозди. Так ты потеряешь меньше времени на принятие решений, потому что они у тебя уже будут. Этому подходу я учу и дизайнеров в своей студии.

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

Подготавливаем стили

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

1. Вносим типографику.

В моей дизайн-системе есть раздел «Style». Открой его и найди таблицу под названием «Text Styles». Тут ты видишь визуально отображение шрифтов в проекте. Всё в одном месте.

Настраивать я советую через правую панель фигмы. Если кликнешь по пустому месту в рабочей области, то увидишь его. Он так и называется «Styles».

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

2. Задаем цвета

Логику работы с цветами я сделал максимально простой: есть чёрная палитра и палитра оттенков. Для некоторых случаев есть отдельная палитра для фонов (называется «bg», сокращённо от background).

Отдельно задаются цвета для текста, так тебе будет удобнее работать в макете, чтобы ты смог независимо их менять.

Раздел «States» используется для состояний в UI (например: ошибка, не работает, успешно и т. п.).

Раздел «Socials» — для иконок социальных сетей. Их менять необязательно. Раздел «Uniq» — цвета для разового использования. Делай с ним что хочешь.

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

3. Эффекты и сетки.

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

Также я уже заготовил сетки (нажми Shift+G, если их не видишь). Ты можешь их отредактировать под себя, но считаю их хорошими вариантами, потому что при их использовании сохраняются размерности без дробных значений. Представлены 4 брейкпоинта: FullHD, ноутбуки, планшеты, смартфоны. Это самые популярные размеры экранов у пользователей сайтов. Поверь, маком в России пользуются далеко не все.

Что в итоге?

Перейди на другие страницы (например, UI или Template), и ты увидишь, что стили применились ко всей дизайн-системе сразу. Молодец, если справился!

Давай чуть подготовим UI

Открой раздел «UI». Во-первых: ещё раз похвали себя за то, что смог внести задуманные стили в дизайн-систему, и насладись тем, как всё само у тебя перекрасилось. Во-вторых, давай всё-таки уникальные элементы.

Обрати внимание на таблицу «Main». В ней находятся вещи, которые очень сильно пригодятся в вёрстке:

• Добавь свой логотип вместо базового. Если обратишь внимание, это тоже компонент — ты сможешь его использовать в шапке и быстро поменять. Добавляй логотип в svg формате!
  
  

• Сделай favicon. Про него почему-то все забывают.
  
  

• Tableau (табло) и og-image используются как изображения для ссылок. Обращал когда-нибудь внимание, что при добавлении ссылки на сайт в социальную сеть, в некоторых случаях, ты видишь красивое изображение под ссылкой? Так вот, это оно и есть.

Рядом находится таблица «Icon». Я туда добавил только базовые, часто используемые иконки. Обрати внимание, что они выполнены не в «stroke», а просто векторными изображениями. Потому что это модно, стильно, молодёжно. (На самом деле, такая реализация позволяет менять их размеры и использовать в разных ситуациях, сохраняя пропорции ширины линий к размеру.)

Остальной UI-kit можешь подредактировать под себя. Я не стал создавать «Variables», так как особо не увидел в этом смысла. Например, ты можешь быстро поменять скругления у всех кнопок разом: выдели одну, нажми Ctrl+Alt+A, и у тебя выделятся все элементы сразу. Поменяй их «Corner Radius», и вуаля, теперь у кнопок другие скругления. Ничего сложного.

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

Сначала обратим внимание на шаблон (страница «Template»)

Я надеюсь, что ты дождался того момента, когда эта страница наконец-то загрузится. Извини, но тут так много всего, поэтому нужно немного подождать.

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

1. В секции «Design Components» используются блоки и элементы страниц, которые часто переиспользуются:  шапка, подвал, форма обратной связи и т. п. Если ты отредактируешь шапку в этом месте, то она изменится у тебя на всех страницах.

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

3. Заготовлен кликабельный прототип. Нажми иконку «Плей» в шапке Фигмы, и у тебя загрузится режим прототипа. Обрати внимание, что ты можешь просмотреть прототипы всех адаптивов, которые есть в проекте.

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

Закрой «куки» на главной странице, и ты увидишь все возможности.

4. Ты можешь настраивать компоненты. Например, у нас есть карточки товаров. Если ты выделишь карточку товара, то увидишь дополнительные переключатели. Попробуй понажимать =). (Если хочешь поменять что-то на всех карточках разом, то нажми Ctrl+A — у тебя выделятся все элементы в секции. А если нажмешь Ctrl+Alt+A — то выделятся ещё и в адаптивах. Пользуйся.)

5. Ты можешь менять и сами компоненты. Например: ты хочешь в баннер добавить ещё одну кнопку. Если выделишь баннер, то увидишь кнопку, которая приведёт к исходному компоненту.

А теперь попробуй выбрать другую кнопку вместо той, которая представлена в компоненте.

Если нужно, то ты можешь добавить ещё одну из уже существующих. По сути, ты можешь добавить любой заготовленный компонент. Даже можешь создать новый и добавить свой. Только не забывай про адаптивы.

Давай теперь вернёмся к странице шаблона и увидим изменения.

Теперь попробуем сверстать уникальную страницу

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

Но вообще, дизайн-системы позволяют быстро собирать интерфейсы и прототипы. Я предлагаю вместе сделать небольшую страницу, чтобы как следует закрепить логику работы с дизайн-системами и UI-kit’ами.

1. Подготовка. Сначала подготовь рабочую область (пустой фрейм 1920px шириной, будем начинать с десктопа). Выбери сетку, соответствующую этой ширине экрана. У меня есть на выбор две: узкая и широкая. В первом варианте легче считать контент, т. к. он стремится к центру. Во втором поместится больше информации. Можно сразу заготовить варианты под HD, tablet и mobile.

2. Сделаем шапку. Мы можем взять заготовленный компонент логотипа. Потом возьмём табы и кнопку. Табы объединим в меню, и выставим отступы в шапке. Готово! При адаптиве шапки под мобильную версию советую вместо списка табов сделать кнопку вызова меню. Меню, кстати, можно тоже использовать заготовленное.

3. Первый экран. Добавляем заголовок h1 из дизайн-системы, а описание сделаем стилем t1. Добавим кнопку из дизайн-системы, и рядом можно добавить кнопки социальных сетей. Графика на твоё усмотрение, я же всё-таки не дизайну учу =).

4. Преимущества. Давай возьмём компонент «Marker» из раздела UI. Поменяем ему цвет прямо в проекте и выберем другую иконку. Добавим описание и сделаем получившийся элемент компонентом (Ctrl+Alt+K). Скопировав его, у нас появятся дочерние. Теперь, меняя стили родительского компонента, мы окажем влияние на дочерние. А вообще, у меня уже есть заготовленный компонент для преимуществ, но мы сделали новый самостоятельно, чтобы ты понял логику.

5. Рядом расположим форму. У меня уже есть готовая, можно использовать её. Только давай немного стилизуем.

6. Частые вопросы.  У нас есть полностью готовый компонент с аккордеонами, его и вставим.

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

8. Заготовим адаптивы. У многих готовых компонентов уже есть версии под разные адаптивы. Не забывай делать кнопки на всю ширину экрана в мобильной версии!

Вот так можно быстро и легко собирать любые макеты. На самом деле, я обозначил только ключевые возможности, но весь спектр зависит только от твоей фантазии и мастерства. Самое главное, не бойся пробовать. Чему научился — упрощай, так у тебя появится время и силы на что-то новое. Для этого и существуют дизайн-системы.

Небольшие комментарии по передаче макета в вёрстку

1. Кроме заказчика, продемонстрируй прототип разработчику. Разработчики мысли не читают.

2. Если у тебя есть в макете вещи, которые могут быть непонятными сразу — оставляй комментарии. Разработчики мысли не читают.

3. Проверь названия фреймов. Разработчик сможет логически понять, для чего эта секция, или вообще использовать её название, как название класса в CSS.

4. Во время разработки не ленись проводить ревью (проверяй соответствие дизайну). Тогда твой макет будет выполнен так, как ты задумал.

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

Ты можешь подписаться на мой телеграм-канал и сообщить о желании пользоваться моей дизайн-системой на русском. Тогда я её подготовлю к публикации и поделюсь ей в телеге. А то мне зря делать что ли? xD

Также, я думаю о том, чтобы сделать видео на основе этой статьи. Можешь также сообщить мне в телеграме, если это интересно.

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

Всего хорошего, спасибо за внимание!