Figma Dev Mode Deep Dive & CSS Extraction

A Figma file is organised into: Pages (tabs at the bottom — often: Designs, Components, Tokens, Archive). Frames (the outermost containers — represent screens or component canvases). Layers (everything inside frames). Understand the layer hierarchy before reading values: a group is a visual organisation tool with no layout implications; a frame has auto layout (flexbox equivalent); a component instance inherits values from its master component. When you see a value in the Inspect panel, it reflects the values at that specific layer, which may inherit from parent frames or override a component default. Clicking into a component instance takes you to the component master — the source of truth for that element's baseline styles.

1/* Figma layer types and CSS equivalents */
2Frame with Auto Layout → <div> with display: flex or grid
3Group               → <div> with no layout semantics
4Component           → React/Vue component with default props
5Component instance  → Component usage with props/overrides
6Text layer          → <p>, <h1>, <span> etc.
7Vector/shape        → <svg> or CSS background
8Image               → <img> or CSS background-image

The Figma Inspect panel (right panel in Dev Mode) shows CSS for the selected layer. Trust directly: font-family, font-size, font-weight, line-height, letter-spacing, colour (hex or rgba), border-radius, opacity, box-shadow. Translate carefully: width and height (Figma shows absolute px; your implementation should use relative units or auto sizing). spacing values (Figma shows computed px; implement as rem or CSS custom properties). Ignore: Figma sometimes generates position: absolute with exact coordinates for elements that should be in document flow — this reflects Figma's internal positioning, not your layout. Also ignore: Figma's generated CSS for flex/grid layout is often correct but uses pixel gap values — translate to rem-based tokens.

1/* Figma Inspect output (do not copy blindly): */
2.button {
3  width: 160px;          /* Trust? NO — use min-width or auto */
4  height: 48px;          /* Trust? NO — use min-height */
5  padding: 12px 24px;    /* Trust? TRANSLATE to rem: 0.75rem 1.5rem */
6  background: #2563EB;   /* Trust? YES — but map to token */
7  border-radius: 8px;    /* Trust? YES — or map to token */
8  font-size: 16px;       /* Trust? TRANSLATE to 1rem */
9  font-weight: 600;      /* Trust? YES */
10  line-height: 24px;     /* Trust? TRANSLATE to 1.5 (unitless) */
11  color: #FFFFFF;        /* Trust? YES — map to token */
12}
13
14/* Production CSS translation: */
15.button {
16  min-height: 3rem;              /* 48px → rem */
17  padding: 0.75rem 1.5rem;       /* 12px 24px → rem */
18  background-color: var(--color-primary-600); /* #2563EB → token */
19  border-radius: var(--radius-md);            /* 8px → token */
20  font-size: 1rem;               /* 16px → rem */
21  font-weight: 600;              /* Direct */
22  line-height: 1.5;              /* Unitless — not 24px */
23  color: var(--color-white);     /* Token */
24}

Figma Variables (2023+) are the design-side equivalent of CSS custom properties. When a designer uses variables, every value in the Inspect panel shows the variable name (e.g., color/primary/600) rather than a raw hex value. This is a major quality signal — it means the design was built with a token system, and your CSS should use the matching tokens. Map Figma variable names to your CSS custom property names. If the naming conventions differ, create a translation table. In Dev Mode, the Variables panel shows all defined variables with their resolved values — use this to audit your token implementation against the design token definitions.

1/* Figma Variable naming → CSS custom property mapping */
2
3/* Figma shows: color/primary/600 = #2563eb */
4/* CSS: */
5:root { --color-primary-600: #2563eb; }
6
7/* Figma shows: spacing/4 = 16px */
8/* CSS: */
9:root { --space-4: 1rem; }
10
11/* Figma shows: typography/body/size = 16px */
12/* CSS: */
13:root { --text-base: 1rem; }
14
15/* Token translation table (keep in project docs) */
16/*
17Figma Variable          → CSS Custom Property
18color/primary/600       → --color-primary-600
19color/neutral/900       → --color-text-primary
20spacing/4               → --space-4
21radius/md               → --radius-md
22typography/body/size    → --text-base
23typography/body/weight  → --wt-body
24*/

Figma Auto Layout is a direct analogue of CSS flexbox. When you see Auto Layout in the Inspect panel, the translation to CSS is straightforward. Direction (Horizontal = flex-row, Vertical = flex-column). Alignment (the primary axis alignment = justify-content, the counter axis = align-items). Gap = gap (not margin between children). Padding = padding on the container. Wrap = flex-wrap: wrap. Fixed width/fill/hug = explicit width / flex: 1 / width: max-content. Absolute positioned layers within a frame = position: absolute children within a relative container. Understanding this mapping lets you read a Figma auto layout spec and write the correct CSS directly, without needing the designer to annotate it.

1/* Auto Layout reading → CSS translation */
2
3/* Figma: Horizontal auto layout, gap 16px, padding 24px,
4   align: center, justify: space-between */
5.toolbar {
6  display: flex;
7  flex-direction: row;      /* Horizontal */
8  gap: 1rem;                /* 16px gap */
9  padding: 1.5rem;          /* 24px padding */
10  align-items: center;      /* Counter-axis: center */
11  justify-content: space-between; /* Primary-axis */
12}
13
14/* Figma: 'Fill container' on child */
15.toolbar-item-fill {
16  flex: 1; /* Fill available space */
17}
18
19/* Figma: 'Hug contents' on child */
20.toolbar-item-hug {
21  flex-shrink: 0; /* Stay at intrinsic width */
22}

Figma can export icons as SVG, photographs as JPEG/AVIF, illustrations as SVG or PNG, and component screenshots for documentation. The correct export settings depend on asset type. Icons: always export as SVG. In Figma: right-click layer → Export → SVG. Make sure 'Include id attribute' is off (creates cleaner markup). Vector illustrations: SVG if they are not too complex (under 50KB); PNG@2x for complex illustrations where SVG is huge. Photographs: AVIF first (Figma supports AVIF export since 2023), fallback JPEG. Never export photographs as PNG — the files are 5-10x larger than JPEG with no quality benefit. Check export size before confirming — if an SVG icon is over 10KB, something is wrong (usually rasterised layers inside the Figma component).

1<!-- SVG icon best practices after Figma export -->
2<!-- 1. Remove width/height attributes (control via CSS) -->
3<!-- 2. Add aria-hidden="true" for decorative icons -->
4<!-- 3. Or add role="img" + <title> for meaningful icons -->
5
6<!-- Decorative icon -->
7<svg aria-hidden="true" focusable="false"
8     viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
9  <!-- path data -->
10</svg>
11
12<!-- Meaningful icon -->
13<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
14  <title>Close dialog</title>
15  <!-- path data -->
16</svg>
17
18<!-- CSS sizing -->
19.icon { width: 1.5rem; height: 1.5rem; }
20.icon-sm { width: 1rem; height: 1rem; }