Figma to HTML/CSS Converter

Softlight Engineering Take-Home Assignment

A generalizable system that programmatically converts Figma design files into pixel-perfect HTML/CSS representations using the Figma REST API.

Overview

This project takes any Figma design file and converts it into semantic HTML and CSS that visually matches the original design. The system handles layout, typography, colors, effects, and styling to produce production-ready code.

Approach

1. Data Extraction

• Uses the Figma REST API to fetch the complete design file as JSON
• Extracts the hierarchical node tree containing all design elements and properties

2. Tree Traversal

• Recursively walks through the Figma node tree (Canvas → Frames → Components → Elements)
• Processes each node type (frames, text, shapes, groups) individually
• Maintains parent-child relationships for proper nesting

3. Property Mapping

The converter maps Figma properties to their CSS equivalents:

• Layout: Auto Layout → Flexbox with proper padding, gaps, and alignment
• Positioning: Absolute positioning for free-form layouts, relative for flex children
• Typography: Font families, sizes, weights, line heights, letter spacing, alignment
• Colors: Solid fills, linear gradients, radial gradients with proper color stops
• Borders: Stroke properties with inside/center/outside alignment handling
• Effects: Drop shadows, inner shadows, blur effects, backdrop filters
• Transforms: Rotation, opacity, blend modes
• Shape Properties: Border radius (including per-corner), clipping, overflow

4. Code Generation

• Generates semantic HTML with meaningful IDs and class names
• Creates modular CSS with one rule per node
• Maintains visual hierarchy through proper nesting and positioning
• Centers the output for better presentation

Technical Implementation

Node Type Handling

• Frames & Groups: Converted to <div> containers with appropriate positioning
• Text Nodes: Preserved with full typography (font family, size, weight, spacing, alignment)
• Shapes: Rectangles, ellipses, and basic vectors rendered as styled divs
• Effects: Box shadows, filters, backdrop filters for blur effects

Layout Strategy

The system uses two positioning approaches based on context:

1. Auto Layout Frames: Converted to Flexbox with proper direction, gaps, padding, and item alignment
2. Free-form Layouts: Absolute positioning with coordinates relative to parent containers

Color & Visual Effects

• Solid Fills: Direct RGB/RGBA color values
• Gradients: Linear and radial gradients with accurate angle calculations and color stops
• Strokes: Border properties with special handling for inside/outside alignment using box-shadow and outline
• Shadows: Multiple shadow support with proper offset, blur, spread, and color
• Transforms: Rotation conversion from radians to degrees

Text Rendering

• Text color separated from background (fills → color property for text nodes)
• Auto-resize text uses flexible sizing instead of fixed dimensions
• Letter spacing, line height, and alignment properly mapped
• Text case transformations (uppercase, lowercase) preserved

Architecture

The system is organized into modular components:

src/
├── index.js           - Main orchestration: API calls, tree traversal, file output
├── figmaClient.js     - Figma REST API integration and authentication
├── htmlGenerator.js   - HTML generation with semantic structure and proper nesting
└── cssGenerator.js    - CSS property mapping and style generation

output/
├── index.html         - Generated HTML output
├── styles.css         - Generated CSS styles
└── figma-data.json    - Raw Figma API response (for debugging)

Key Design Decisions

1. Separation of Concerns: HTML generation is independent of CSS generation, making it easy to modify either independently

2. Recursive Processing: The tree traversal processes parent nodes before children, ensuring proper context for positioning decisions

3. Context-Aware Positioning: Child positioning strategy changes based on parent layout mode (flex vs. absolute)

4. Progressive Enhancement: Unknown node types fall through to a default handler that still processes children

Known Limitations

Not Implemented

• Image Fills: Image assets would require downloading and embedding/linking
• Vector Paths as SVG: Complex vector shapes are rendered as styled divs rather than actual SVG paths
• Masks and Boolean Operations: Complex clipping masks and shape unions/subtractions have limited support
• Component Variants: Dynamic component properties are not evaluated

Edge Cases

• Deeply Nested Absolute Positioning: Very complex nested absolute layouts may have minor positioning inconsistencies
• Custom Fonts: Fonts not available in the browser fall back to system fonts
• Blend Modes: Some advanced blend modes may render differently across browsers
• Variable Fonts: Font variations and custom axes are not supported

Design Tradeoffs

• Absolute vs. Relative: Prioritized Figma's exact positioning over responsive design flexibility
• Individual Node CSS: Each node gets its own CSS rule for clarity, rather than optimizing for minimal CSS
• Inline vs. External: Styles are external for maintainability, though inline might be more portable

Testing

Tested successfully with:

• Original assignment file (sign-in screen with forms and buttons)
• Complex component file (action sheets with nested instances)
• Various layout modes (auto layout, absolute positioning, mixed)

Output

Run npm start to generate HTML/CSS files in the output/ directory. The system outputs:

• Clean, semantic HTML with meaningful IDs and classes
• Modular CSS with one rule per element
• Centered presentation with flexible wrapping for multiple frames