Figma to Code Workflow

Overview

Streamlined workflow for converting Figma designs into production-ready Astro components for marketing sites.

Design System Setup

Required in Figma

Component Library - All reusable components
Page Templates - Standard page layouts
Design Tokens - Colors, typography, spacing
Responsive Breakpoints - Mobile, tablet, desktop
Export Settings - Proper asset configurations

Naming Conventions

Figma layers map directly to code components:

Button/Primary → <PrimaryButton />
Card/Blog → <BlogCard />
Section/Hero → <HeroSection />

Recommended Approach: Hybrid Method

Combine plugin automation with hand refinement for best results.

Step 1: Design in Figma

Designer creates component:

Uses design system tokens
Annotates interactive elements
Exports assets (images, icons)
Shares Dev Mode link

Step 2: Asset Export

Automated with Figma:

SVG for icons
WebP for images (with PNG fallback)
Multiple sizes for responsive images

Naming Convention:

assets/images/
  hero-university-desktop.webp (1920px)
  hero-university-tablet.webp (1024px)
  hero-university-mobile.webp (768px)

Step 3: Code Conversion

For Simple Components (Buttons, Cards):

Inspect in Figma Dev Mode
Hand-code with Tailwind CSS
Time: ~30 minutes per component

For Complex Layouts (Full pages):

Export with plugin (Anima/Locofy)
Convert to Astro syntax
Refactor and optimize
Time: ~1-2 hours per page

Figma Dev Mode

Inspection Workflow

Open Dev Mode in Figma
Select Element to inspect
View CSS Properties:
- Spacing (padding, margin)
- Colors (fill, stroke)
- Typography (font, size, weight)
- Effects (shadows, blur)
Map to Tailwind classes
Code Astro Component

Example Inspection

Figma shows:
- Padding: 24px 32px
- Background: #0066CC
- Border Radius: 8px
- Font: Geist Bold 16px

Maps to Tailwind:
px-8 py-6 bg-blue-600 rounded-lg font-bold text-base

Plugin Options

Anima

URL: figma.com/community/plugin/857346721138427857
Exports: React/Vue/HTML
Pros: Preserves responsive behavior
Cost: Free tier limited, $31/month Pro
Best For: Complex layouts

Locofy

URL: locofy.ai
Exports: React/Vue/HTML
Pros: Responsive code generation
Cost: Free tier, $30+/month Pro
Best For: Component libraries

TeleportHQ

URL: teleporthq.io
Exports: Multiple frameworks
Pros: Clean code output
Cost: Free tier, $20+/month
Best For: Landing pages

Component Creation

File Template

---
// packages/shared/components/HeroSection.astro
interface Props {
  title: string;
  description: string;
  image: string;
  cta?: {
    text: string;
    href: string;
  };
  variant?: 'university' | 'student' | 'workplace';
}
 
const { title, description, image, cta, variant = 'university' } = Astro.props;
---
 
<section class="hero-section" data-variant={variant}>
  <div class="container">
    <div class="hero-content">
      <h1 class="hero-title">{title}</h1>
      <p class="hero-description">{description}</p>
      {cta && (
        <a href={cta.href} class="hero-cta">
          {cta.text}
        </a>
      )}
    </div>
    <div class="hero-image">
      <img src={image} alt={title} loading="eager" />
    </div>
  </div>
</section>
 
<style>
  .hero-section {
    @apply py-20 md:py-32;
  }
  
  .hero-content {
    @apply max-w-2xl;
  }
  
  .hero-title {
    @apply text-4xl md:text-6xl font-bold mb-6;
  }
  
  /* Variant-specific styles */
  [data-variant='university'] {
    @apply bg-blue-50;
  }
  
  [data-variant='student'] {
    @apply bg-purple-50;
  }
</style>

Tailwind Integration

Design Tokens → Tailwind Config

Map Figma tokens to Tailwind configuration:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          600: '#0284c7', // Primary brand color
        },
        university: '#0066CC',
        student: '#8B5CF6',
        workplace: '#059669',
      },
      fontFamily: {
        sans: ['Geist', 'system-ui', 'sans-serif'],
        display: ['Chillax', 'sans-serif'],
        mono: ['PP Mori', 'monospace'],
      },
      fontSize: {
        'display-1': ['4rem', { lineHeight: '1.1', fontWeight: '700' }],
        'display-2': ['3rem', { lineHeight: '1.2', fontWeight: '700' }],
        'heading-1': ['2.5rem', { lineHeight: '1.2', fontWeight: '600' }],
      },
      spacing: {
        '18': '4.5rem',
        '22': '5.5rem',
      },
    },
  },
};

Quality Checklist

Design Fidelity

Matches Figma design accurately
Correct colors, fonts, spacing
Responsive behavior works
Hover/active states implemented

Code Quality

Performance

Optimized images (WebP with fallbacks)
Lazy loading for below-fold images
Minimal CSS (no unused styles)
Fast load time

Accessibility

Testing

Works in Chrome, Safari, Firefox
Mobile responsive (375px to 1920px)
No console errors
Passes Lighthouse audit (90+ scores)

Time Estimates

Component Type	Time Required
Simple (Button, Card, Input)	~30 minutes
Medium (Hero, Pricing, Blog Card)	~1-2 hours
Complex (Full Page, Interactive)	~4-6 hours

Breakdown

Simple Component:

Asset Export: 5 min
Component Code: 20 min
Testing & Polish: 5 min

Medium Component:

Asset Export: 15 min
Component Code: 1 hour
Testing & Polish: 15 min

Complex Page:

Asset Export: 30 min
Component Code: 4-5 hours
Testing & Polish: 30 min

Design-to-Code Handoff

Handoff Template

## New Page: [Name]
 
### Design Files
- Figma Link: [URL]
- Dev Mode: [URL]
- Asset Exports: [Folder/ZIP]
 
### Page Details
- Target Site: University / Student / Workplace
- URL Path: /about-us
- Components Needed:
  - Hero Section (reuse existing)
  - Text + Image Section (new)
  - Testimonials Grid (reuse)
  - CTA Section (reuse)
 
### New Components to Build
1. TextImageSection - estimated 1 hour
2. [other components]
 
### Design Tokens Used
- Colors: Primary Blue, Neutral Gray
- Fonts: Chillax Bold, Geist Regular
- Spacing: 8px grid
 
### Responsive Breakpoints
- Mobile: 375px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
 
### Notes
- Hero image should lazy load
- CTA button uses primary variant
- Testimonials auto-rotate on mobile

Tools & Resources

Figma Plugins

Stark - Accessibility checks
Iconify - Icon library
Content Reel - Content population
Contrast - Color contrast checker

Development

Astro - Framework
Tailwind CSS - Styling
TypeScript - Type safety
Prettier - Code formatting

Testing

Responsively - Responsive testing app
Lighthouse - Performance audit
axe DevTools - Accessibility testing

Status: Active
Last Updated: December 16, 2024

CMS & Content Management Deployment Guide