Неформальности / Игрушки / Дизайн-система в Figma

Дизайн-система в Figma

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

Один из них — дизайн-система в Figma.

Мы создали ее как руководство для любого, кто — сейчас или в будущем — работает или будет работать над сайтом eduhund.ru. Для верстальщика, дизайнера, автора контента.

Кубики

Дизайн-система в Figma. Кубики

Обычно дизайнеры под дизакйн-системой имеют в виду UI-kit плюс гайд к нему. То есть набор элементов, которые можно взять (что делать?), и правила их использования (как делать?).

У нас фокус все-таки на правилах.

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

Кубики, конечно, тоже сделали: стили типографики, форматы сеток для разных устройств, размеры отступов и основные элементы интерфейса.

Типографикой и прочими отступами мы достигаем стилистического единства. Но это единство — не цель, и смысл с его помощью мы тоже не передаём.

Короче, content first, и если эстетика его убивает — тюним эстетику, а не глушим нюансы контента.

Собрали кубики, превратили их в стили верстки, и перешли к правилам составления страницы.

Правила

Описали принципы создания страниц, которые помогут писателю подготовить контент, а верстальщику — сверстать страницу:

  • Структура страницы.
  • Правила для контента: как писать, где писать (в GoogleDocs, все в GoogleDocs), какая нужна структура, как предусмотреть адаптив, как сегментировать, как подготовить к верстке.
  • Принципы компоновки основной части: 1) структурировать; 2) не делать скучно; 3) следовать логике контента; 4) экпериментировать.
  • Принципы оформления: фирменный стиль «Кура лапой» и всякое такое.
  • Принципы использования контролов: ссылок, кнопок, спойлеров.

К этому моменту основные страницы сайта уже были готовы, так что мы описывали закономерности, которые уже возникли, а не придумывали новые.

Да-да, лучше, конечно, все делать по плану и по порядку. Но у нас было так. И получилось неплохо.

Дизайн-система в Figma. Правила

Блоки

Дизайн-система в Figma. Блоки

Под конец описали разные типы блоков, из которых собраны страницы сайта eduhund.ru.

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

Зачем это нужно? Затем, что набросок структуры страницы собирает автор контента. Верстальщик только доводит набросок до реализации (и, возможно, создаёт новые блоки).

И оба должны ориентироваться в палитре блоков: один, чтобы писать, а второй, чтобы верстать написанное.

Что получилось

И, наконец, собрали дизайн систему воедино.

Конечно, со всем не в том порядке, в котором писали.

Вначале — структура и правила сборки, потом большие кубики — блоки, и в конце — мелкие: типографика с версткой.

Получились правила, прописанные на трех уровнях: на уровне смысла, на уровне блоков, на уровне деталей интерфейса.

Дизайн-система в Figma. Содержание

Опции для корпоративных
клиентов

Маленький заголовок на всякий случай

  1. Пункты списка могут быть очень разные.
  2. Но бывает, что и список нужно подсветить.
  3. А как это сделать? Попробуем.
8
нормальное число, чего вы

Выложили в Figma, показываем вам.

А теперь действуем:

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.