Figma для разработчиков: от макета к коду

Figma Dev Mode

Dev Mode в Figma — режим для разработчиков. Показывает CSS свойства, размеры, отступы и позволяет копировать код напрямую.

Основные возможности

• Inspect — просмотр CSS свойств элемента
• Copy CSS — копирование стилей
• Measurements — расстояния между элементами
• Assets — экспорт изображений и иконок
• Variables — дизайн-токены

Экспорт ассетов

# Форматы экспорта
# SVG — для иконок и векторной графики
# PNG — для растровых изображений с прозрачностью
# JPG — для фотографий
# WebP — современный формат с хорошим сжатием

# Масштабы экспорта
# 1x — базовый размер
# 2x — для Retina дисплеев
# 3x — для мобильных устройств высокой плотности

Оптимизация SVG

// Иконки как React компоненты
// components/icons/ArrowIcon.tsx
export function ArrowIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5 12H19M19 12L12 5M19 12L12 19"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

// Использование
<ArrowIcon className="w-6 h-6 text-primary" />

Дизайн-токены и переменные

/* Figma Variables → CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-secondary: #ec4899;
  --color-background: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-text: #ffffff;
  --color-text-muted: #a1a1aa;
  
  /* Spacing (8px grid) */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-8: 2rem;     /* 32px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

// Tailwind конфигурация из Figma
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6366f1',
          hover: '#4f46e5'
        },
        secondary: '#ec4899',
        background: '#0f0f0f',
        surface: '#1a1a1a'
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace']
      },
      borderRadius: {
        'sm': '0.25rem',
        'md': '0.5rem',
        'lg': '1rem'
      }
    }
  }
};

Auto Layout → Flexbox/Grid

// Figma Auto Layout с gap и padding
// → CSS Flexbox

// Горизонтальный Auto Layout
.horizontal-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

// Вертикальный Auto Layout
.vertical-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

// Fill Container → flex: 1
.fill-container {
  flex: 1;
}

// Hug Contents → width: auto
.hug-contents {
  width: auto;
}

// Fixed Width
.fixed-width {
  width: 200px;
  flex-shrink: 0;
}

Компоненты и варианты

// Figma Component с вариантами → React компонент

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

const variants = {
  primary: 'bg-primary text-white hover:bg-primary-hover',
  secondary: 'bg-surface text-white border border-white/10 hover:bg-white/5',
  ghost: 'bg-transparent text-white hover:bg-white/5'
};

const sizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg'
};

export function Button({
  variant = 'primary',
  size = 'md',
  children,
  onClick
}: ButtonProps) {
  return (
    <button
      className={`
        rounded-lg font-medium transition-colors
        ${variants[variant]}
        ${sizes[size]}
      `}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Эффективное взаимодействие с дизайнерами

1. Используйте компоненты — договоритесь о библиотеке компонентов
2. 8px grid — все размеры кратны 8
3. Naming convention — согласуйте именование слоёв
4. Design tokens — используйте переменные Figma
5. Handoff notes — комментарии к сложным элементам

Плагины для разработчиков

• Figma to Code — генерация React/HTML/Tailwind
• Design Tokens — экспорт токенов в JSON
• Iconify — библиотека иконок
• Lorem Ipsum — генерация текста

Заключение

Figma Dev Mode упрощает перевод дизайна в код. Используйте переменные для консистентности, Auto Layout для понимания layout, компоненты для переиспользования. Хорошая коммуникация с дизайнерами — ключ к успеху.

Дизайн-система в Figma = компонентная библиотека в коде. Синхронизируйте их.