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

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

В этом гайде я покажу, как можно ускорить вёрстку до 50% за счёт одного принципа: использования переменных из библиотек компонентов прямо в Figma.

Разберём такие темы, как:

  • Как отсутствие подхода тормозит вёрстку;

  • Популярные библиотеки компонентов и их отличия;

  • Как использовать переменные и организовать дизайн-систему в Figma;

  • Как такой подход влияет на скорость написания кода и почему он также полезен для дизайнера.

Гайд рассчитан на:

  • небольшие компании, у которых не настроена коммуникация отделов дизайна и разработки;

  • компании, которые хотят модернизировать текущие сценарии разработки;

  • начинающих разработчиков\верстальщиков, которые хотят ускорить разработку;

  • дизайнерам, которые сами верстают свой дизайн, и хотят делать это эффективно.

Примеры выполнены в бесплатной версия Figma.

Эксперимент

Чтобы наглядно показать, как всё работает, я создала простой пример — модальное окно. Его мы будем использовать на протяжении всего гайда. При создании я не использовала переменные и спроектировала дизайн «как есть».

Этот макет берём за основу. На нём показала всё, что обычно требуется для вёрстки: отступы, цвета, размеры шрифта.
Этот макет берём за основу. На нём показала всё, что обычно требуется для вёрстки: отступы, цвета, размеры шрифта.

Теперь рассмотрим значения подробнее — так, как их видят дизайнер и разработчик. Начнём с общего контейнера (самого окна):

Здесь показано, как одни и те же значения видят дизайнер и разработчик
Здесь показано, как одни и те же значения видят дизайнер и разработчик

Далее — поле ввода:

И значения для кнопки:

Для дизайнера всё выглядит достаточно понятно. Однако у разработчика на этом этапе возникает ряд проблем:

  1. Непонятные термины: Например, что такое flow? В CSS используется direction, который означает направления внутри flex или grid. Разработчику приходится догадываться, что имелось в виду.

  2. Неочевидно, какие свойства использовать: например, как понять, что width нужно учитывать, а height вместе с top и left (высота, абсолютное расположение элемента) игнорировать?

  3. Дублирование значений: border повторяется два раза, хотя что в первом, что во втором случае он равняется одному и тому же значению.

  4. Неоднозначные названия: слово radius также вводит в заблуждение, потому что не сразу ясно, что речь идёт о border-radius.

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

Часть этих проблем невозможно решить, ведь они связаны с особенностями интерфейса Figma. Но даже устранение оставшихся уже значительно упрощает жизнь разработчику.

Теперь посмотрим, как такой дизайн превращается в код на примере обычных HTML и CSS:

<div class="modal-window">
  <h1 class="modal-title">
    Подпишитесь, чтобы не пропустить самое важное!
  </h1>

  <p class="modal-subtitle">
    Введите свой email в поле ниже и нажмите кнопку "Отправить"
  </p>

  <input 
    type="email" 
    class="modal-input" 
    placeholder="example@mail.ru"
  />

  <button class="modal-button">
    Отправить
  </button>
</div>

/* Окно */
.modal-window {
  width: 600px;
  padding: 32px;
  background: #F9F9F9;
  border: 1px solid #F2F2F2;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Заголовок */
.modal-title {
  color: #323232;
  font-size: 20px;
  font-weight: 500;
}

/* Подзаголовок */
.modal-subtitle {
  color: #323232;
  font-size: 18px;
  font-weight: 400;
}

/* Инпут */
.modal-input {
  background: #FFFFFF;
  border: 1px solid #f6f6f6;
  border-radius: 8px;
  padding: 16px 12px;
  font-size: 16px;
  color: #5E5E5E; /* допустим, это работает */
}

/* Кнопка */
.modal-button {
  background: #066BE8;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px 36px;
  font-size: 16px;
}

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

Почему такой «обычный» подход тормозит разработку

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

А теперь представим, что таких окон не одно, а десять, и в каждом из них есть небольшие отличия. Чтобы внести изменения, разработчику нужно:

  1. Найти нужное место в макете

  2. Понять, что именно изменилось

  3. Расшифровать значения

  4. Перенести их в код И так — для каждого элемента.

Почему это замедляет вёрстку:

  • Тратится время на интерпретацию дизайна: разработчик не применяет готовое решение, а каждый раз «переводит» макет в код;

  • Значения дублируются вручную: одни и те же цвета, отступы и размеры копируются десятки раз;

  • Нет связи с библиотекой: даже если библиотека используется, дизайн на неё не опирается;

  • Стили сложно переиспользовать: нет единого источника значений — каждый компонент живёт сам по себе, что не позволяет быстро вносить изменения;

  • Растёт количество рутины: постоянное копирование снижает скорость и внимание к деталям. В результате даже простой компонент делается дольше, чем должен, а масштабирование проекта становится болезненным.

Запомните правило: если значение можно переиспользовать — оно должно быть переменной.

Решение: использовать переменные из библиотек компонентов

Теперь давайте изменим подход. Вместо того, чтобы задавать значения в Figma «как есть», мы применим системным подход:

  • Находим готовые переменные в UI-библиотеке;

  • Определяем список используемых значений;

  • Внедряем их в Figma;

  • Проектируем дизайн на их основе. Таким образом, дизайн сразу становится частью кода, а не отдельной сущностью.

За основу своего примера я выбрала Tailwind CSS, потому что на нём проще показать суть.

Tailwind CSS — это утилитарный CSS-фреймворк, который позволяет стилизовать интерфейс с помощью готовых классов (utility classes) прямо в HTML или JSX/TSX. В отличие от других CSS-фреймворков вроде Bootstrap или Bulma, Tailwind предлагает не компоненты, а утилиты — маленькие CSS-классы, отвечающие за одну конкретную вещь: отступ, цвет, выравнивание, размер шрифта и т. п. Источник

Пример внедрённых переменных из Tailwind CSS:

Объединяйте значения в группы. Так они будут структурированы и их легче будет найти в поиске
Объединяйте значения в группы. Так они будут структурированы и их легче будет найти в поиске

Далее разберём пошагово, как повторить этот подход.

Шаг 1. Берём переменные из Tailwind CSS

Например:

  • цвета: blue-500, gray-300, white

  • отступы: p-4, p-6, p-8

  • скругления углов: rounded-lg

Если нужного значения нет, его можно создать самостоятельно в Figma. Важно дать ему понятное и системное имя, чтобы оно не выбивалось из общей логики. После этого значение передать разработчику — и теперь его можно использовать наравне с остальными.

Посмотреть полный список переменных можно в официальной документации.

Переменные Tailwind CSS в документации
Переменные Tailwind CSS в документации

Шаг 2. Переносим их в Figma

Создаём базовый набор переменных.

Цвета

Название

Значение

white-100

#FFFFFF

white-200

#F2F2F2

white-300

#F6F6F6

white-400

#F9F9F9

blue-500

#066BE8

Отступы

Название

Значение

p-3

12px

p-4

16px

p-6

24px

p-8

32px

p-9

36px

Скругления

Название

Значение

rounded-lg

8px

rounded-3xl

24px

Обводка

Название

Значение

border

1px

Шаг 3. Проектируем дизайн на этих переменных

Теперь мы применим переменные к нашему окну и посмотрим, как они выглядят у дизайнера и у разработчика:

Так выглядит обновлённое окно
Так выглядит обновлённое окно
Поле ввода
Поле ввода
И кнопка соответственно
И кнопка соответственно

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

Хорошая новость: в недавнем обновлении Figma значения некоторых переменных отображаются прямо внутри элементов (например, значения отступов, скруглений). Ранее показывались только их наименования. Это еще сильнее упрощает процесс использования переменных, хороший повод внедрять переменные прямо сейчас :)

Разработчик сразу понимает, что делать

Вместо того, чтобы анализировать:

padding: 32px;
background-color: #323232;
border-radius: 8px;

он может сразу написать:

<div class="p-6 bg-gray-100 rounded-xl">

Ему больше не нужно сверять HEX-значения цветов, он может быстро запомнить наименование и переиспользовать его там, где потребуется.

То же самое с другими библиотеками

Этот подход работает не только с Tailwind CSS.

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

  • Для отступов используем spacing scale: p-1, p-2;

  • Для цветов: text-primary, text-secondary;

<div class="p-3 bg-light border border-1 rounded">
  <h5 class="text-primary">Заголовок</h5>
  <p class="text-secondary">Описание</p>
  <button class="btn btn-primary">
    Отправить
  </button>
</div>

Material UI/MUI (Документация)

  • Для отступов theme.spacing(1), theme.spacing(2);

  • Для цветов: - grey.100, grey.200;

import { Box, Button, TextField } from "@mui/material";

export default function Modal() {
  return (
    <Box
      sx={{
        p: 4,
        backgroundColor: "grey.100",
        border: "1px solid",
        borderColor: "grey.200",
        borderRadius: 3,
        display: "flex",
        flexDirection: "column",
        gap: 3,
      }}
    >
      <TextField placeholder="Email" />

      <Button variant="contained" color="primary">
        Отправить
      </Button>
    </Box>
  );
}

Chakra UI (Документация)

  • Для отступов: p="1", p="2";

  • Для цветов: gray.100, gray.200;

import { Box, Button, Input } from "@chakra-ui/react";

export default function Modal() {
  return (
    <Box
      p="8"
      bg="gray.100"
      border="1px"
      borderColor="gray.200"
      borderRadius="3xl"
      display="flex"
      flexDirection="column"
      gap="6"
    >
      <Input placeholder="Email" />

      <Button colorScheme="blue">
        Отправить
      </Button>
    </Box>
  );
}

Бонус: собственные переменные + SASS/SCSS

Если вы не используете библиотеки, или если вам не хватает стандартной библиотеки — выход есть. При помощи использования препроцессора SASS/SCSS можно создать свои переменные и удобно ими пользоваться внутри всего проекта. А при помощи миксинов (@mixin) можно создавать готовые наборы стилей для компонентов. С остальными преимуществами SASS/SCSS можно ознакомиться в официальной документации.

Пример:

// Переменные
$color-blue-500: #066BE8;
$color-white-400: #F9F9F9;
$color-white-200: #F2F2F2;

$rounded-3xl: 24px;
$rounded-lg: 8px;

$p-4: 16px;
$p-6: 24px;
$p-8: 32px;

$border-width: 1px;

// Миксин для модального окна
@mixin card {
  background: $color-white-400;
  border-radius: $rounded-3xl;
  padding: $p-8;
  border: $border-width solid $color-white-200;
}

.modal-window {
  @include card;
  display: flex;
  flex-direction: column;
  gap: $p-6;
}

Преимущества на лицо:

  • Все значения собраны в одном месте;

  • Внесение изменений занимает секунды;

  • Код становится единообразным;

  • Проект легко масштабировать.

Почему это ускоряет разработку

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

  2. Устранение дубликатов, каждое значение задано один раз и переиспользуется везде.

  3. Код становится предсказуемым.

  4. Дизайн не приходится объяснять.

  5. Снижается количество ошибок.

Почему это удобно дизайнеру

  1. Дизайн становится системным, а не хаотичным.

  2. Легче поддерживать консистентность интерфейса.

  3. Проще вносить изменения: они вносятся в родителя и распространяются на всех дочерей. Когда ошибки минимизированы, тогда начинается проектирование настоящей системы.

Итог

На примере я показала, что использование переменных из библиотек компонентов прямо в Figma — это не просто “удобный приём”, а полноценный рабочий подход, который влияет на весь процесс разработки. При помощи него можно:

  • Ускорить разработку до 50%;

  • Избавиться от дублирования кода;

  • Упростить коммуникацию между отделами дизайна и разработки;

  • Сделать дизайн и код частью единой системы;

  • Снизить порог входа для новичков.