Understand how Figma's component system works — master components, instances, and overrides — and learn how each concept maps directly to React components, props, and the variant pattern.
Figma components are the design equivalent of React components. A component is a single source of truth — change it once and every instance updates. An instance is a copy of a component placed on the canvas, where you can override specific properties without breaking the component's core design.
Understanding components is essential for developers because: (1) every professional design file uses components, so you need to navigate them to find the real spec; (2) component properties in Figma map directly to React props; and (3) the override system tells you exactly which parts of a component can vary without touching the component's core CSS.
A Figma component (indicated by a four-diamond icon in the layers panel) is the master definition. An instance (indicated by a single diamond icon) is a copy that inherits all component styles but can be overridden.
This mirrors React's component model:
To navigate to a component's master from an instance:
The component page shows the design at its most specific — the exact padding, colors, and typography that must be preserved in the implementation.
1/* Component master: Button component spec */
2.btn {
3 /* These values come from the master component and must not drift */
4 display: inline-flex;
5 align-items: center;
6 justify-content: center;
7 gap: 0.375rem; /* 6px: component-level spec */
8 padding: 0.625rem 1.25rem; /* 10px 20px: component-level spec */
9 border-radius: 0.5rem; /* 8px: component-level spec */
10 font-size: 0.9375rem; /* 15px: component-level spec */
11 font-weight: 600;
12 font-family: inherit;
13 cursor: pointer;
14 border: 1.5px solid transparent;
15 transition: 150ms ease;
16}Figma component properties (visible in the Design panel when an instance is selected) are the design system's API. They map directly to React component props.
Three property types:
Figma: label = 'Save changes'
React: <Button label="Save changes" />
Figma: showIcon = true
React: <Button showIcon />
Figma: icon = ArrowRight
React: <Button icon={<ArrowRightIcon />} />
Reading component properties in Dev Mode:
Select an instance → Inspect panel → Properties section shows all properties with current values.
1// React component derived from Figma component properties
2interface ButtonProps {
3 label: string; // Text property: button label
4 variant?: 'primary' | 'secondary' | 'ghost'; // Variant property
5 size?: 'sm' | 'md' | 'lg'; // Size property
6 showIcon?: boolean; // Boolean property: show trailing icon
7 icon?: React.ReactNode; // Instance swap: which icon to show
8 disabled?: boolean; // Boolean property: disabled state
9 onClick?: () => void;
10}
11
12export function Button({
13 label,
14 variant = 'primary',
15 size = 'md',
16 showIcon = false,
17 icon,
18 disabled = false,
19 onClick,
20}: ButtonProps) {
21 return (
22 <button
23 type="button"
24 className={`btn btn-${variant} btn-${size}`}
25 disabled={disabled}
26 onClick={onClick}
27 aria-disabled={disabled}
28 >
29 {label}
30 {showIcon && icon && (
31 <span className="btn-icon" aria-hidden="true">{icon}</span>
32 )}
33 </button>
34 );
35}An override is any property on an instance that differs from the component master. Common overrides: text content, fill color, icon swaps, visibility toggles.
Overrides tell you what varies between component uses — these become React props or CSS modifier classes.
Figma override types and their CSS/React translations:
Text override (label changes per instance):
→ React: string prop; CSS: no specific override needed, text comes from props
Fill override (background color changes):
→ React: variant prop; CSS: variant modifier class (.btn-primary, .btn-secondary)
Visibility override (child layer hidden):
→ React: boolean prop (showIcon); CSS: [hidden] attribute or conditional render
Stroke override (border color changes):
→ React: variant or state prop; CSS: border-color in variant class
1/* Base component: from master component spec */
2.btn {
3 display: inline-flex;
4 align-items: center;
5 gap: 0.375rem;
6 padding: 0.625rem 1.25rem;
7 border-radius: 0.5rem;
8 font-size: 0.9375rem;
9 font-weight: 600;
10 border: 1.5px solid transparent;
11 cursor: pointer;
12 transition: background-color 150ms ease, border-color 150ms ease;
13}
14
15/* Variant overrides: from component property 'variant' */
16.btn-primary {
17 background: #2563eb;
18 color: white;
19 border-color: #2563eb;
20}
21.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
22
23.btn-secondary {
24 background: white;
25 color: #2563eb;
26 border-color: #2563eb;
27}
28.btn-secondary:hover { background: #eff6ff; }
29
30.btn-ghost {
31 background: transparent;
32 color: #374151;
33 border-color: transparent;
34}
35.btn-ghost:hover { background: #f9fafb; color: #111827; }
36
37/* Size overrides: from component property 'size' */
38.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.875rem; }
39.btn-lg { padding: 0.875rem 1.75rem; font-size: 1.0625rem; }
40
41/* State: disabled */
42.btn[disabled], .btn[aria-disabled='true'] {
43 opacity: 0.5;
44 cursor: not-allowed;
45 pointer-events: none;
46}Professional Figma files organize components into libraries — shared sets used across multiple pages and projects. The Assets panel (Shift+I) gives you access to all components in the current file and any shared libraries.
Assets panel sections:
Searching for a component:
Component naming convention (reading nested names):
'Button / Primary / Large / With icon' means:
This naming translates to:
1<Button variant="primary" size="lg" showIcon />When a designer gives you a component name, you can look it up in the Assets panel to find the master spec:
1/* Reading 'Input / Default / With prefix' from Assets panel */
2/* Navigate to master: padding 10px 14px, border 1.5px #D1D5DB,
3 border-radius 8px, font-size 16px, prefix-padding-right 12px */
4
5.input-wrapper {
6 display: flex;
7 align-items: center;
8 border: 1.5px solid #d1d5db;
9 border-radius: 0.5rem; /* 8px */
10 overflow: hidden;
11 transition: border-color 150ms ease, box-shadow 150ms ease;
12}
13.input-prefix {
14 padding: 0 0.75rem; /* 12px sides — prefix padding */
15 font-size: 0.9375rem;
16 color: #6b7280;
17 flex-shrink: 0;
18 border-right: 1px solid #e5e7eb;
19 height: 100%;
20 display: flex;
21 align-items: center;
22}
23.input-field {
24 padding: 0.625rem 0.875rem; /* 10px 14px */
25 font-size: 1rem; /* 16px */
26 border: none;
27 outline: none;
28 flex: 1;
29}
30.input-wrapper:focus-within {
31 border-color: #2563eb;
32 box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
33}Translating a Figma Card component with three variants (default, featured, minimal), two sizes (compact, standard), and a boolean showBadge property into a typed React component with CSS.
1/*
2FIGMA COMPONENT SPEC (from Assets panel + Master component inspection):
3
4Component: Course Card
5Variants:
6 - type: 'default' | 'featured' | 'minimal'
7 - size: 'compact' | 'standard'
8 - showBadge: true | false
9
10Master dimensions (standard size):
11 Width: Fill container, min 260px
12 Border: 1px #E5E7EB
13 Border-radius: 12px
14 Background: white
15 Shadow: 0 1px 3px #0000000A
16 Thumbnail: 16:9 aspect ratio
17 Content padding: 20px
18 Content gap: 12px
19
20featured variant adds:
21 Border: 2px #2563EB
22 Shadow: 0 4px 16px #2563EB1A
23
24minimal variant removes:
25 Thumbnail
26 Shadow
27 Border: 1px #F3F4F6 (lighter)
28
29compact size:
30 Content padding: 12px
31 Content gap: 8px
32 Title: 14px (instead of 17px)
33*/
34
35/* CSS for all variants and sizes */
36.course-card {
37 display: flex;
38 flex-direction: column;
39 min-width: 260px;
40 border: 1px solid #e5e7eb;
41 border-radius: 0.75rem; /* 12px */
42 background: white;
43 box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
44 overflow: hidden;
45 transition: border-color 200ms ease, box-shadow 200ms ease;
46}
47
48/* Featured variant */
49.course-card[data-variant='featured'] {
50 border: 2px solid #2563eb;
51 box-shadow: 0 4px 16px rgb(37 99 235 / 0.1);
52}
53
54/* Minimal variant */
55.course-card[data-variant='minimal'] {
56 border-color: #f3f4f6;
57 box-shadow: none;
58}
59.course-card[data-variant='minimal'] .course-card-thumbnail { display: none; }
60
61/* Standard size content */
62.course-card-content {
63 display: flex;
64 flex-direction: column;
65 padding: 1.25rem; /* 20px */
66 gap: 0.75rem; /* 12px */
67 flex: 1;
68}
69
70/* Compact size content */
71.course-card[data-size='compact'] .course-card-content {
72 padding: 0.75rem; /* 12px */
73 gap: 0.5rem; /* 8px */
74}
75
76/* Thumbnail: 16:9 ratio */
77.course-card-thumbnail {
78 aspect-ratio: 16 / 9;
79 overflow: hidden;
80 flex-shrink: 0;
81 background: #f1f5f9;
82}
83.course-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
84
85/* Standard title: 17px 700 */
86.course-card-title {
87 font-size: 1.0625rem;
88 font-weight: 700;
89 color: #0f172a;
90 line-height: 1.35;
91 margin: 0;
92 display: -webkit-box;
93 -webkit-line-clamp: 2;
94 -webkit-box-orient: vertical;
95 overflow: hidden;
96}
97/* Compact title: 14px 700 */
98.course-card[data-size='compact'] .course-card-title {
99 font-size: 0.875rem;
100}
101
102.course-card-meta {
103 font-size: 0.8125rem;
104 color: #64748b;
105 margin: 0;
106}
107
108/* Badge (showBadge property) */
109.course-badge {
110 display: inline-flex;
111 align-items: center;
112 padding: 0.125rem 0.5rem;
113 background: #eff6ff;
114 color: #1d4ed8;
115 border-radius: 9999px;
116 font-size: 0.6875rem;
117 font-weight: 700;
118 letter-spacing: 0.04em;
119 text-transform: uppercase;
120 align-self: flex-start;
121}
122
123/* React component usage examples */
124/*
125<CourseCard
126 title="React Fundamentals"
127 meta="24 lessons · 8 hours"
128 thumbnail="/courses/react.jpg"
129 variant="default"
130 size="standard"
131 showBadge
132 badgeText="Popular"
133/>
134
135<CourseCard
136 title="CSS Design Systems"
137 meta="18 lessons · 6 hours"
138 variant="featured"
139 size="compact"
140 showBadge={false}
141/>
142*/This CSS uses data attributes (data-variant, data-size) as the mechanism for variant and size switching — corresponding directly to the Figma component property system. The data-variant='featured' selector adds the blue border and shadow override. The data-variant='minimal' hides the thumbnail (the 'showThumbnail' implied boolean property). The data-size='compact' selectors override padding, gap, and font-size values inside the component. The showBadge boolean property maps to conditionally rendering .course-badge. Every property value traces back to the Figma master component spec.
The next lesson covers Figma Variants and Interactive Components — how to read multi-state component grids, translate hover/focus/active/disabled states, and implement CSS state-driven interactive behavior.
Your progress is saved in this browser, on this device only.