Master asset export from Figma — choosing the right format for every asset type, optimizing SVGs with SVGO, implementing responsive image patterns, and establishing a naming convention that scales across teams.
Asset export is the last step before a design asset enters the codebase, and it is where many teams lose time to unoptimized files, wrong formats, and naming inconsistencies. A designer exports a 400KB PNG for an icon that should be a 2KB SVG. A developer uses the wrong filename convention and creates duplicate assets. An illustration is exported as JPG and loses its transparency.
This lesson establishes a systematic approach to asset export — format selection rules, optimization workflows, and naming conventions — that produces clean, production-ready assets from any Figma file.
Choosing the right export format is a decision with significant performance implications:
SVG — use for:
WebP — use for:
AVIF — use for:
PNG — use only for:
JPG — avoid in new projects:
1<!-- Responsive image with AVIF, WebP, and PNG fallback -->
2<picture>
3 <source srcset="/images/hero.avif" type="image/avif">
4 <source srcset="/images/hero.webp" type="image/webp">
5 <img src="/images/hero.jpg" alt="Hero image"
6 width="1200" height="630"
7 loading="eager" fetchpriority="high">
8</picture>
9
10<!-- SVG inline for themed icon -->
11<svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20"
12 fill="none" stroke="currentColor" stroke-width="2">
13 <!-- currentColor inherits CSS color property -->
14 <path d="M12 4l8 16H4L12 4z"/>
15</svg>Figma's Export panel (Design tab, scroll to bottom) configures format, scale, and filename suffix.
For icons and logos:
For photos at multiple densities:
HTML responsive images from Figma multi-scale export:
1<!-- Multi-scale export from Figma → srcset in HTML -->
2<img
3 src="/images/course-thumb.webp"
4 srcset="
5 /images/course-thumb.webp 1x,
6 /images/[email protected] 2x
7 "
8 alt="React Fundamentals course thumbnail"
9 width="320" height="180"
10 loading="lazy">
11
12<!-- Sizes attribute for responsive layout -->
13<img
14 src="/images/hero.webp"
15 srcset="
16 /images/hero-480.webp 480w,
17 /images/hero-768.webp 768w,
18 /images/hero-1200.webp 1200w
19 "
20 sizes="
21 (max-width: 480px) 100vw,
22 (max-width: 1200px) 80vw,
23 1200px
24 "
25 alt="Hero illustration"
26 width="1200" height="630"
27 loading="eager" fetchpriority="high">Export slice technique for complex compositions:
Figma exports SVGs with significant bloat: comments, metadata, transform matrices that could be simplified, and unnecessary attributes. SVGO removes this while preserving visual fidelity.
Install and run SVGO:
1# Install globally
2npm install -g svgo
3
4# Optimize single file (40-60% reduction typical)
5svgo icon-bookmark.svg
6
7# Optimize all SVGs in a folder
8svgo -f src/assets/icons/ -o public/icons/
9
10# Preserve viewBox (important — always include this)
11svgo icon.svg --config '{ "plugins": [{ "name": "removeViewBox", "active": false }] }'Before SVGO (Figma raw export, 847 bytes):
1<?xml version="1.0" encoding="UTF-8"?>
2<!-- Generator: Figma, https://figma.com -->
3<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
5 xmlns="http://www.w3.org/2000/svg">
6 <path d="M19 21L12 16L5 21V5C5 3.89543 5.89543 3 7 3H17C18.1046 3 19 3.89543 19 5V21Z"
7 stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
8</svg>After SVGO (312 bytes, 63% reduction):
1<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"
3 stroke="#374151" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4</svg>For icon systems: replace hardcoded stroke colors with currentColor:
1<!-- currentColor inherits CSS color property -->
2<svg viewBox="0 0 24 24" fill="none">
3 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"
4 stroke="currentColor" stroke-width="2"
5 stroke-linecap="round" stroke-linejoin="round"/>
6</svg>A consistent naming convention prevents duplicate assets, communicates asset type, and makes file systems navigable.
Recommended convention: type-name[-variant][-state][-size].ext
Examples:
1icons/
2 icon-bookmark.svg
3 icon-bookmark-filled.svg
4 icon-arrow-right.svg
5 icon-arrow-right-sm.svg
6 icon-check-circle.svg
7 icon-x.svg
8
9images/
10 image-hero-homepage.webp
11 [email protected]
12 image-course-react-thumb.webp
13 image-instructor-sarah.webp
14
15logos/
16 logo-devbootstrap.svg
17 logo-devbootstrap-dark.svg (dark theme variant)
18 logo-devbootstrap-wordmark.svg (text-only variant)
19 logo-devbootstrap-icon.svg (icon-only variant)
20
21illustrations/
22 illustration-empty-state.svg
23 illustration-error-404.svg
24 illustration-success-confetti.svgRules:
CSS for SVG sprites (alternative to individual files):
1/* Using SVG sprite with use element */
2.icon {
3 display: inline-block;
4 width: 1.25rem;
5 height: 1.25rem;
6 fill: none;
7 stroke: currentColor;
8 stroke-width: 2;
9 stroke-linecap: round;
10 stroke-linejoin: round;
11 vertical-align: middle;
12 flex-shrink: 0;
13}1<!-- SVG sprite usage -->
2<svg class="icon" aria-hidden="true">
3 <use href="/sprites.svg#icon-bookmark"></use>
4</svg>A complete icon system using SVGO-optimized SVGs with currentColor for theme-awareness and proper ARIA attributes for accessibility.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>SVG Icon System Demo</title>
6 <style>
7 :root {
8 --icon-size-sm: 1rem;
9 --icon-size-md: 1.25rem;
10 --icon-size-lg: 1.5rem;
11 --icon-size-xl: 2rem;
12 --color-text: #374151;
13 --color-brand: #2563eb;
14 --color-success: #16a34a;
15 --color-danger: #dc2626;
16 }
17 /* Icon base styles */
18 .icon {
19 display: inline-block;
20 width: var(--icon-size-md); /* default: 20px */
21 height: var(--icon-size-md);
22 fill: none;
23 stroke: currentColor;
24 stroke-width: 2;
25 stroke-linecap: round;
26 stroke-linejoin: round;
27 vertical-align: middle;
28 flex-shrink: 0;
29 pointer-events: none;
30 }
31 .icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
32 .icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
33 .icon-xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
34
35 /* Icon colors via CSS color inheritance */
36 .icon-muted { color: #9ca3af; }
37 .icon-brand { color: var(--color-brand); }
38 .icon-success { color: var(--color-success); }
39 .icon-danger { color: var(--color-danger); }
40 .icon-white { color: white; }
41
42 /* Demo layout */
43 *, *::before, *::after { box-sizing: border-box; }
44 body { font-family: system-ui, sans-serif; padding: 2rem;
45 color: var(--color-text); background: #f9fafb; }
46 .demo-row { display: flex; align-items: center; gap: 1rem;
47 flex-wrap: wrap; margin-bottom: 1.5rem; }
48 .demo-label { font-size: 0.75rem; color: #9ca3af; font-weight: 600;
49 text-transform: uppercase; letter-spacing: 0.06em;
50 margin-bottom: 0.5rem; display: block; }
51
52 /* Button with icon */
53 .btn-icon {
54 display: inline-flex; align-items: center; gap: 0.375rem;
55 padding: 0.625rem 1rem; border-radius: 0.5rem;
56 font-size: 0.9375rem; font-weight: 600; font-family: inherit;
57 cursor: pointer; border: 1.5px solid transparent;
58 transition: 150ms ease;
59 }
60 .btn-icon-primary {
61 background: var(--color-brand); color: white; border-color: var(--color-brand);
62 }
63 .btn-icon-primary:hover { background: #1d4ed8; }
64 .btn-icon-ghost {
65 background: transparent; color: var(--color-text); border-color: #e5e7eb;
66 }
67 .btn-icon-ghost:hover { background: #f3f4f6; }
68 </style>
69</head>
70<body>
71 <span class="demo-label">Icon sizes</span>
72 <div class="demo-row">
73 <!-- currentColor inherits from parent CSS color -->
74 <!-- Decorative icons: aria-hidden="true" -->
75 <svg class="icon icon-sm" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
76 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
77 </svg>
78 <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
79 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
80 </svg>
81 <svg class="icon icon-lg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
82 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
83 </svg>
84 <svg class="icon icon-xl" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
85 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
86 </svg>
87 </div>
88
89 <span class="demo-label">Icon colors (CSS currentColor)</span>
90 <div class="demo-row">
91 <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
92 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
93 </svg>
94 <svg class="icon icon-brand" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
95 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
96 </svg>
97 <svg class="icon icon-success" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
98 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
99 </svg>
100 <svg class="icon icon-danger" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
101 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
102 </svg>
103 <svg class="icon icon-muted" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
104 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
105 </svg>
106 </div>
107
108 <span class="demo-label">Icons in buttons</span>
109 <div class="demo-row">
110 <button class="btn-icon btn-icon-primary" type="button">
111 <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
112 <path d="M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z"/>
113 </svg>
114 Save course
115 </button>
116 <button class="btn-icon btn-icon-ghost" type="button">
117 <svg class="icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
118 <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
119 </svg>
120 Search
121 </button>
122 </div>
123</body>
124</html>The SVG icon system uses currentColor for stroke — this means the icon inherits the CSS color property from its parent or from utility classes (.icon-brand, .icon-success). When placed inside a button, the icon automatically uses the button's text color. The SVGO-optimized path data (no XML declaration, no DOCTYPE, no Figma metadata comments) is 60% smaller than the raw Figma export. Every icon has aria-hidden='true' and focusable='false' because they are decorative — the text label or aria-label on the parent button provides the accessible name.
The next lesson covers collaborative workflows in Figma — branching, version history, commenting, and how to communicate design questions and implementation feedback directly in the design file.
Your progress is saved in this browser, on this device only.