From Figma to Code — A Designer's Path

The Five Phases

01 → 05

Foundations of the Web Medium

Weeks 1–3

Before touching CSS, understand what HTML actually is — a system for describing the meaning and structure of information. Semantic HTML isn't just good practice, it's the backbone of accessibility, SEO, and maintainable stylesheets.

HTML

Semantic Elements

Learn when to use article, section, nav, header, aside and why divs alone produce fragile code.

≈ Figma Frames with named layers

HTML

Heading Hierarchy

Headings (h1–h6) create a document outline used by screen readers and search engines. They're about document structure, not visual size.

≈ Type styles & hierarchy

HTML

Forms & Interactive Elements

Input types, labels, fieldsets, and ARIA attributes. Understanding this unlocks native browser accessibility for free.

CSS

The Cascade & Specificity

How CSS decides which rule wins when multiple rules apply. This is the single most important concept for writing maintainable stylesheets.

CSS

The Box Model

Every element is a box: content, padding, border, margin. Understanding this prevents countless layout bugs.

≈ Padding settings in Auto Layout

CSS

CSS Custom Properties

Define and use CSS variables (--token-name: value) for a maintainable token system that matches your Figma Variables structure.

≈ Figma Variables

semantic-layout.html

<!-- Instead of: <div class="wrapper"> -->

<main class="page-content">
  <article class="case-study">
    <header class="case-study__header">
      <h1>Project Title</h1>
      <p class="case-study__meta">UX Design · 2024</p>
    </header>
    <section class="case-study__body">
      <!-- Content sections go here -->
    </section>
  </article>
</main>

Layout — The Designer's Domain

Weeks 4–7

Layout in CSS has been completely transformed. Flexbox and Grid are what Figma's Auto Layout was inspired by. Learn these deeply — they're the single highest-leverage skill for designers coming from Figma.

Layout

Flexbox — One Axis

Aligning and distributing items along a single axis. The direct equivalent of Figma Auto Layout horizontal and vertical modes.

≈ Auto Layout

Layout

CSS Grid — Two Axes

Place items in two dimensions simultaneously. Grid is more powerful than anything in Figma for complex, structured layouts.

≈ Grid layout + constraints

Layout

Intrinsic Sizing

Using min-content, max-content, fit-content, and clamp() for fluid layouts that adapt without breakpoints.

≈ Hug / Fill sizing modes

Layout

Positioning & Stacking

relative, absolute, sticky, fixed positioning, and how z-index creates stacking contexts.

Responsive

Media Queries & Breakpoints

Writing adaptive styles using @media. Mobile-first vs desktop-first strategies and when to use each.

≈ Figma responsive frames

Responsive

Container Queries

The modern alternative to media queries — style components based on their container size, not the viewport. Perfect for truly reusable components.

≈ Component-level responsive design

layout.css

/* Figma Auto Layout → CSS Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

/* Container Query — style based on component size */
.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card__layout {
    display: flex;
    flex-direction: row;
  }
}

Design Tokens & CSS Architecture

Weeks 8–11

This is where your Figma Variables knowledge becomes a superpower. Learn how to architect a scalable token system in CSS — primitives to semantic tokens — and how to structure stylesheets using Cascade Layers to prevent specificity battles.

Tokens

Three-Tier Token System

Primitive tokens (raw values) → Semantic tokens (purpose-named) → Component tokens. This mirrors exactly how Figma Variables work at scale.

≈ Figma Variable collections

Tokens

CSS Custom Properties Deep Dive

Scope, inheritance, fallbacks, and dynamic theming. How to build light/dark mode that's driven by a single attribute change on the root element.

≈ Figma Variable modes

Architecture

CSS Cascade Layers

Using @layer to create an explicit specificity order: reset → tokens → base → components → utilities.

Architecture

BEM Naming Convention

Block-Element-Modifier: a naming system that creates self-documenting, component-scoped CSS classes. Pairs perfectly with design tokens.

≈ Component / Variant naming in Figma

Typography

Fluid Typography with clamp()

Typography that scales smoothly between viewport sizes using a single declaration — no brittle breakpoints needed.

≈ Variable fonts in Figma

Theming

Light / Dark Mode Architecture

Using @media (prefers-color-scheme) and data attributes to build a robust theming system that ties back to your token layers.

≈ Figma Variable modes (Light / Dark)

tokens.css

@layer tokens {
  /* — Primitive tokens (static at build time) — */
  :root {
    --color-blue-500: #2f6bc8;
    --color-red-500:  #c84b2f;
    --space-4:        1rem;
  }

  /* — Semantic tokens (switch per theme) — */
  :root, [data-theme="light"] {
    --color-text-primary:      #0d0d0d;
    --color-background-page:   #f5f0e8;
    --color-action-primary:    var(--color-blue-500);
  }

  [data-theme="dark"] {
    --color-text-primary:      #f5f0e8;
    --color-background-page:   #0d0d0d;
  }
}

Component Thinking & Visual Polish

Weeks 12–17

Build reusable, accessible components that match the fidelity of your Figma designs. Learn how CSS can produce sophisticated visual effects — gradients, shadows, masks, transitions — and how to encode component states correctly.

Components

Pseudo-classes & States

:hover, :focus-visible, :active, :disabled, :checked. Encoding interactive states directly in CSS without JavaScript.

≈ Component interactive states

Components

CSS Transitions & Animations

Smooth state changes using transition. Keyframe animations using @keyframes. Understanding easing functions and their emotional impact.

Visual

Advanced Gradients

Linear, radial, conic gradients, and gradient meshes. How to replicate complex Figma backgrounds and subtle surface treatments in pure CSS.

Visual

Shadows & Elevation

Box-shadow layers, drop-shadow filters, and inset shadows. Building a systematic elevation scale driven by tokens.

≈ Figma drop shadows & elevation

Visual

Clip-path & Masks

Creating non-rectangular shapes and revealing effects. clip-path for geometric shapes, mask-image for gradient fades.

≈ Figma clipping masks

Accessibility

ARIA & Accessible Components

When to use ARIA roles and attributes, focus management, keyboard navigation patterns, and colour contrast requirements (WCAG AA).

Modern CSS Superpowers

Weeks 18–24

The final phase covers features that have landed in CSS in the last 2–3 years and are now broadly supported. These features blur the line between design tool capabilities and what CSS can natively express.

Modern CSS

:has() — The Parent Selector

Style a parent based on its children. Allows conditional styles that previously required JavaScript — a design system game-changer.

Modern CSS

CSS Nesting

Native nesting without a preprocessor. Write component styles in a natural hierarchy that mirrors BEM structure without repetition.

Modern CSS

Scroll-Driven Animations

Animations triggered and controlled by scroll position using pure CSS — no IntersectionObserver or scroll event listeners needed.

Modern CSS

View Transitions API

Animate between page states or DOM changes with elegant cross-fade and shared element transitions. Brings Figma's Smart Animate to the web.

≈ Smart Animate / Prototype transitions

Modern CSS

CSS @property

Register custom properties with a type, initial value, and inheritance behaviour. Enables animating gradient stops and other previously impossible transitions.

Workflow

Design-to-Code Pipelines

Figma Variables → Style Dictionary → CSS Custom Properties. Automating token extraction so your Figma file becomes the single source of truth.

≈ Figma Variables → CSS automation

modern.css

/* CSS Nesting — like SCSS but native */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: box-shadow 200ms ease;

  &:hover {
    box-shadow: var(--shadow-raised);
  }

  /* :has() — parent knows about its children */
  &:has(img) {
    padding-block-start: 0;
  }
}

/* View Transition — shared element across states */
.project-thumbnail {
  view-transition-name: project-hero;
}

Figma Workflow	CSS / HTML Equivalent	Key Property or Pattern
Auto Layout spacing (gap between items)	Flexbox / Grid gap	gap: var(--space-4)
Padding on a Frame	CSS padding	padding: 1rem 1.5rem
Fill container width	flex-grow: 1 or width: 100%	flex: 1 1 auto
Hug contents width	width: fit-content	width: fit-content
Fixed frame size	explicit width/height	width: 320px; height: 200px
Corner radius	border-radius	border-radius: var(--radius-md)
Stroke / border	border or outline	border: 1px solid var(--color-border)
Figma Variables (all modes)	CSS Custom Properties with data attributes	[data-theme="dark"] { --color-bg: #000; }
Text styles	CSS font properties + custom properties	font-size: var(--text-lg); font-weight: 500
Opacity	opacity	opacity: 0.6
Blend mode (multiply, screen…)	mix-blend-mode	mix-blend-mode: multiply
Image fill on shape	background-image or object-fit on img	object-fit: cover; object-position: center
Overflow hidden	overflow: hidden	overflow: hidden
Interactive prototype → hover state	CSS :hover pseudo-class + transition	:hover { ... } + transition: all 0.2s
Smart Animate between screens	View Transitions API	view-transition-name: element-id
Component / Main component	CSS class (BEM Block)	.card { ... }
Component variant	BEM modifier or data attribute	.card--featured or [data-variant="featured"]
Boolean component prop	CSS :has() or data attribute	.card:has(.card__image) { ... }

Hands-On Activities

Each activity is designed to take 1–3 hours and produce something concrete you can show. They're tied to phases so you can practice as you learn — not all at the end.

Name the Bones

Open any website you admire in your browser. Using DevTools (right-click → Inspect), identify every semantic HTML element used for the main layout — nav, header, main, article, section, footer, aside. Then open a Figma file you've built and annotate each frame with the HTML element it should become.

Annotated Figma file showing HTML element mapping

DevTools Semantics No code required

Phase 01

Reverse-Engineer a Card

Take a card component from your Figma library. Write the HTML structure first (just the tags, no CSS). Then, layer by layer, translate each Figma property into a CSS declaration — padding from Auto Layout spacing, border-radius from corner radius, colour from your Variables. Don't use any framework. Paste it into CodePen and compare it to your Figma design.

A working card on CodePen that matches your Figma design

HTML CSS CodePen

Phase 01

Auto Layout to Flexbox Sprint

Take three different Auto Layout frames from your Figma work — one horizontal, one vertical, one nested. For each one, write the equivalent CSS using only Flexbox. Focus on matching the gap, alignment, and sizing behaviour exactly. Then try switching one to CSS Grid and notice where Grid feels more natural.

Three CodePen pens, each matching a Figma Auto Layout frame

Flexbox Grid Layout

Phase 02

Build Your Own Token File

Export or manually copy your Figma Variable values into a tokens.css file, organised into three layers: primitives (raw values), semantic (purpose-named), and component tokens. Then implement a light and dark mode by switching semantic tokens under a [data-theme] attribute. Add a toggle button that flips the theme with one line of JavaScript.

A tokens.css file + a theme-toggling demo page

Design Tokens Custom Properties Theming

Phase 03

Rebuild a Figma Component with Full States

Pick a component from your library that has multiple variants and interactive states — a button with default, hover, focus, and disabled; or a form input with idle, focused, and error states. Write the full HTML and CSS for every state. Use only pseudo-classes (:hover, :focus-visible, :disabled) — no JavaScript. Then test it with a keyboard-only navigation pass.

A fully interactive component with all states, keyboard-accessible

Pseudo-classes Accessibility BEM

Phase 04

Animate a Prototype Transition

Take a Figma prototype flow you've built — ideally a list item expanding to a detail view, or a card navigating to a full page. Recreate the transition using the View Transitions API. Assign a view-transition-name to the shared element and trigger the transition with a small JavaScript click handler. Compare the feel to Smart Animate.

A two-state HTML page with a smooth shared-element transition

View Transitions Modern CSS Animation

Phase 05

Portfolio Page from Scratch

Build a single HTML page — your own portfolio landing page or a case study — entirely from scratch. No frameworks, no templates. Apply everything from all five phases: semantic HTML, CSS Grid for layout, your own token file, BEM components, responsive design with container queries, and at least one CSS animation. This is your capstone.

A live, deployed HTML + CSS portfolio page

Capstone All Phases Deployment

Capstone

You already think in the right abstractions.

The Five Phases

Foundations of the Web Medium

Semantic Elements

Heading Hierarchy

Forms & Interactive Elements

The Cascade & Specificity

The Box Model

CSS Custom Properties

Layout — The Designer's Domain

Flexbox — One Axis

CSS Grid — Two Axes

Intrinsic Sizing

Positioning & Stacking

Media Queries & Breakpoints

Container Queries

Design Tokens & CSS Architecture

Three-Tier Token System

CSS Custom Properties Deep Dive

CSS Cascade Layers

BEM Naming Convention

Fluid Typography with clamp()

Light / Dark Mode Architecture

Component Thinking & Visual Polish

Pseudo-classes & States

CSS Transitions & Animations

Advanced Gradients

Shadows & Elevation

Clip-path & Masks

ARIA & Accessible Components

Modern CSS Superpowers

:has() — The Parent Selector

CSS Nesting

Scroll-Driven Animations

View Transitions API

CSS @property

Design-to-Code Pipelines

The Full Translation Guide

Curated Resources

Hands-On Activities

Name the Bones

Reverse-Engineer a Card

Auto Layout to Flexbox Sprint

Build Your Own Token File

Rebuild a Figma Component with Full States

Animate a Prototype Transition

Portfolio Page from Scratch

The Complete Arc