Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Basics of Design handoff

Design Handoff is the process where designers share UI/UX designs with frontend developers for implementation.

In modern development, this usually happens through tools like:

  • :contentReference[oaicite:0]{index=0}
  • :contentReference[oaicite:1]{index=1}
  • :contentReference[oaicite:2]{index=2}

Simple Meaning

Designer creates the UI design.

Frontend developer converts that design into:

  • HTML
  • CSS
  • React Components
  • Tailwind UI

Design Handoff Workflow

[code theme="dark"] Designer Creates UI ↓ Design Shared in Figma ↓ Developer Inspects Design ↓ Frontend Development Starts [/code]

Why Design Handoff is Important?

  • Accurate UI implementation
  • Consistent frontend development
  • Better teamwork
  • Faster development process
  • Scalable UI systems

What Developers Usually Receive?

  • Desktop designs
  • Mobile designs
  • Tablet layouts
  • Components
  • Typography styles
  • Color systems
  • Spacing rules
  • Assets/icons

Figma Dev Mode

Modern handoff mostly uses:

[code theme="dark"] Figma Dev Mode [/code]

It helps developers inspect designs easily.

Figma Dev Mode Example

Imagesss

What Developers Check in Handoff?

  • Width & height
  • Padding & margin
  • Typography
  • Colors
  • Border radius
  • Shadows
  • Responsive behavior
  • Component variants

Spacing Example

Developer checks:

[code theme="dark"] Padding → 24px Gap → 16px [/code]

Frontend Conversion

CSS

[code theme="dark"] padding:24px; gap:16px; [/code]

Tailwind

[code theme="dark"] p-6 gap-4 [/code]

Typography Handoff

Developers inspect:

  • Font size
  • Line height
  • Font weight
  • Letter spacing

Example

[code theme="dark"] Font Size → 16px Weight → 600 Line Height → 24px [/code]

Color Handoff

Developers inspect:

[code theme="dark"] #ff6600 rgba(0,0,0,0.1) [/code]

Then Convert Into

SCSS

[code theme="dark"] $primary:#ff6600; [/code]

Tailwind Config

[code theme="dark"] colors:{ primary:"#ff6600" } [/code]

Auto Layout & Frontend

Figma Auto Layout maps closely to Flexbox.

Example

Figma

  • Horizontal Layout
  • Gap 16px
  • Center Alignment

Frontend CSS

[code theme="dark"] display:flex; gap:16px; align-items:center; [/code]

Responsive Design Handoff

Good handoff should include:

  • Desktop view
  • Tablet view
  • Mobile view

Responsive Example

Imagesss

Component-Based Handoff

Modern designs are usually shared as reusable components.

Examples

  • Buttons
  • Cards
  • Inputs
  • Modals
  • Navbar

Component Variant Example

[code theme="dark"] Button Primary Secondary Disabled [/code]

Frontend Mapping

[code theme="dark"]