В какой дизайн системе работал с макетами

Работа с дизайн системами и макетами в Frontend

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

Популярные дизайн системы

Material Design (Google)

Material Design от Google — одна из самых популярных дизайн систем. Она определяет:

• Палитру цветов
• Типографию
• Компоненты (Button, TextField, Card и т.д.)
• Паттерны взаимодействия
• Правила анимаций

Для React разработчиков существует Material-UI (MUI) — готовая библиотека компонентов:

import { Button, TextField, Card } from '@mui/material';

function MyForm() {
  return (
    <Card>
      <TextField label="Имя" />
      <Button variant="contained">Отправить</Button>
    </Card>
  );
}

Apple Human Interface Guidelines (HIG)

Применяется для iOS и macOS приложений. Для веба влияет на дизайн макетов для мобильных устройств.

Tailwind CSS

Модовый подход — не полная дизайн система, а утилит-первый фреймворк. Позволяет быстро строить UI, используя готовые классы:

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Отправить
</button>

Figma компоненты

В Figma можно создавать дизайн компоненты, которые связаны с реальными компонентами в коде. Это помогает:

• Дизайнерам и разработчикам говорить на одном языке
• Синхронизировать изменения
• Применять одинаковые стили везде

Как работать с макетами в Figma

1. Понимание структуры компонентов

Дизайнер создаёт компоненты в Figma (Button, Input, Card), разработчик реализует их в коде с теми же свойствами:

// Figma component: Button
// Варианты: primary, secondary
// Размеры: small, medium, large
// Состояния: default, hover, active, disabled

function Button({ variant = 'primary', size = 'medium', disabled = false, children }) {
  const baseStyles = 'px-4 py-2 rounded-lg font-medium transition-colors';
  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300'
  };
  const sizes = {
    small: 'px-2 py-1 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg'
  };

  return (
    <button className={`${baseStyles} ${variants[variant]} ${sizes[size]}`} disabled={disabled}>
      {children}
    </button>
  );
}

2. Масштабирование и отступы

В Figma обычно используется сетка 8px. Все размеры — кратны 8: 8, 16, 24, 32, 40 и т.д.

/* Tailwind использует 4px базовый юнит, но легко адаптируется */
padding: 0.5rem;  /* 8px */
padding: 1rem;    /* 16px */
padding: 1.5rem;  /* 24px */

3. Цветовая палитра

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

:root {
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --color-error: #dc2626;
  --color-success: #16a34a;
}

В Tailwind:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#2563eb',
      secondary: '#64748b',
      error: '#dc2626',
      success: '#16a34a'
    }
  }
};

Типография из дизайн системы

Дизайн система обычно определяет:

• Семейство шрифта (например, Inter, Roboto)
• Размеры: H1, H2, H3, Body, Caption
• Высота строки (line-height)
• Вес шрифта (font-weight)

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 24px;
  font-weight: 600;
}

.caption {
  font-size: 12px;
  color: #64748b;
}

Работа с дизайн системой в проекте

Лучшие практики:

1. Создай компонент-библиотеку: все повторяемые элементы (Button, Input, Card) в одном месте
2. Синхронизируй с Figma: используй инструменты вроде Figma API или плагины
3. Соблюдай консистентность: если в дизайн системе определён размер кнопки, используй его везде
4. Задокументируй компоненты: Storybook помогает визуализировать все варианты компонентов

Storybook для демонстрации компонентов

// Button.stories.js
export default {
  title: 'Components/Button',
  component: Button
};

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;

Резюме

Дизайн система — это набор правил и компонентов, которые обеспечивают консистентность UI. Frontend разработчику нужно:

• Изучить компоненты и их варианты
• Реализовать их в коде (React компоненты)
• Соблюдать палитру, типографию, отступы
• Синхронизировать с дизайнерами через Figma
• Документировать в Storybook

Большие компании обычно имеют собственную дизайн систему (Google Material Design, Atlassian Design System), которая обеспечивает единообразие всех продуктов.