Figma for Developers: From Design to Code

Figma Dev Mode

Dev Mode in Figma is a mode for developers. It shows CSS properties, sizes, spacing and lets you copy code directly.

Key features

• Inspect — viewing an element’s CSS properties
• Copy CSS — copying styles
• Measurements — distances between elements
• Assets — exporting images and icons
• Variables — design tokens

Exporting assets

# Export formats
# SVG — for icons and vector graphics
# PNG — for raster images with transparency
# JPG — for photos
# WebP — a modern format with good compression

# Export scales
# 1x — base size
# 2x — for Retina displays
# 3x — for high-density mobile devices

SVG optimization

// Icons as React components
// 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>
  );
}

// Usage
<ArrowIcon className="w-6 h-6 text-primary" />

Design tokens and variables

/* 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 configuration from 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 with gap and padding
// → CSS Flexbox

// Horizontal Auto Layout
.horizontal-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

// Vertical 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;
}

Components and variants

// Figma Component with variants → React component

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>
  );
}

Working effectively with designers

1. Use components — agree on a component library
2. 8px grid — all sizes are multiples of 8
3. Naming convention — agree on layer naming
4. Design tokens — use Figma variables
5. Handoff notes — comments on complex elements

Plugins for developers

• Figma to Code — generating React/HTML/Tailwind
• Design Tokens — exporting tokens to JSON
• Iconify — an icon library
• Lorem Ipsum — text generation

Conclusion

Figma Dev Mode simplifies translating design into code. Use variables for consistency, Auto Layout to understand the layout, components for reuse. Good communication with designers is the key to success.

A design system in Figma = a component library in code. Keep them in sync.