Figma Complete Tutorial: Interface, Auto Layout, Components, Variables, Prototypes, Dev Mode and Figma AI

What Figma is and why every product and data team uses it

Figma is a browser-based design tool where many people work on the same file at the same time. Product managers sketch flows, designers build interfaces and design systems, developers inspect measurements and code, and data analysts design dashboards before building them in Power BI or Tableau.

The interface

Essential shortcuts:

Frames, shapes and text

• A frame (F) is a screen or a container. Pick a preset in the right panel (iPhone 16, Android Compact, Desktop 1440). Frames can be nested and can clip content.
• A group (Ctrl+G) only bundles layers; it has no layout of its own. Prefer frames with auto layout.
• Shapes (R, O, L, P) take fills (solid, gradient, image), strokes, corner radius and effects (drop shadow, blur).
• Text (T): set font, size, line height and letter spacing in the Design panel; use Auto width for labels and Fixed width for paragraphs.

The 8-point grid

Use spacing and sizes in multiples of 8 (4 for small gaps): 8, 16, 24, 32, 48, 64. Add a layout grid to a frame (Design panel → Layout grid → 8 px grid or columns: 4 columns for mobile, 12 for desktop) so everything lines up.

# A type scale (ratio 1.25 from 16 px) and an 8-point spacing scale: the numbers you put into text styles and auto layout gaps
base, ratio = 16, 1.25
type_scale = {name: round(base * ratio ** i) for i, name in enumerate(["Body", "H6", "H5", "H4", "H3", "H2", "H1"])}
spacing = [4, 8, 12, 16, 24, 32, 48, 64]
print("Type scale (px):", type_scale)
print("Spacing tokens (px):", spacing)

Type scale (px): {'Body': 16, 'H6': 20, 'H5': 25, 'H4': 31, 'H3': 39, 'H2': 49, 'H1': 61}
Spacing tokens (px): [4, 8, 12, 16, 24, 32, 48, 64]

Colour contrast (accessibility)

Text must be readable: WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Figma shows contrast in plugins such as Stark or A11y – Color Contrast Checker; this is the formula they use:

def lum(hex_):
    r, g, b = (int(hex_[i:i + 2], 16) / 255 for i in (1, 3, 5))
    f = lambda c: c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)
def contrast(fg, bg):
    a, b = sorted([lum(fg), lum(bg)], reverse=True); return (a + 0.05) / (b + 0.05)
for fg, bg in [("#FFFFFF", "#6C4CF5"), ("#9CA3AF", "#FFFFFF"), ("#17142E", "#F3F0FF"), ("#FFFFFF", "#12B5A6")]:
    r = contrast(fg, bg); print(f"{fg} on {bg}: {r:4.2f}:1  ->", "PASS normal text" if r >= 4.5 else "PASS large text only" if r >= 3 else "FAIL")

#FFFFFF on #6C4CF5: 5.26:1  -> PASS normal text
#9CA3AF on #FFFFFF: 2.54:1  -> FAIL
#17142E on #F3F0FF: 15.92:1  -> PASS normal text
#FFFFFF on #12B5A6: 2.57:1  -> FAIL

Light grey text on white and white text on bright teal fail even the 3:1 large-text rule, so darken those colours (for example teal #0E7C72) until the checker passes.

Auto layout: responsive design

Auto layout (Shift + A) turns a frame into a flexbox: children stack horizontally or vertically with a fixed gap and padding, and the frame grows or shrinks with its content.

Constraints (for frames without auto layout) decide how a layer moves when its parent resizes: Left, Right, Left & Right (stretch), Centre, Scale. Use them for headers and floating buttons.

Components, variants and properties

A component (Ctrl + Alt + K) is a master; instances are copies that update when the master changes.

from itertools import product
props = {"Type": ["Primary", "Secondary", "Ghost"], "State": ["Default", "Hover", "Disabled"], "Size": ["S", "M", "L"]}
variants = list(product(*props.values()))
print(len(variants), "variants in the Button set, e.g.", ", ".join("/".join(v) for v in variants[:3]))
print("Without variant properties you would manage", len(variants), "separate components.")

27 variants in the Button set, e.g. Primary/Default/S, Primary/Default/M, Primary/Default/L
Without variant properties you would manage 27 separate components.

Styles and variables (design tokens)

• Styles: saved colour, text, effect and grid styles you apply with one click.
• Variables (collections and modes): named values (colour, number, string, boolean) such as color/bg/surface or space/16. A collection can have modes like Light and Dark or Brand A and Brand B: switch a frame's mode and every bound colour changes.
• Bind spacing, radius and colours to variables so a redesign is one edit, and developers get the same token names in Dev Mode.

Prototyping

Switch to the Prototype tab:

1. Select a button, drag the blue handle to the target frame: this creates a connection.
2. Set the trigger (On click, On drag, While hovering, After delay, Key/Gamepad) and the action (Navigate to, Open overlay, Swap overlay, Back, Scroll to, Open link, Set variable).
3. Choose the animation: Instant, Dissolve, Move in/out, Push, Slide, or Smart Animate (matches layers with the same name across frames and animates the difference).
4. Mark a flow starting point and press Present (Ctrl + Alt + Enter) or share the prototype link.

Advanced: interactive components (a toggle that switches its own variant on click), variables and conditionals in prototypes (a counter, a cart total, "if logged in"), and scroll behaviour (fixed headers, horizontal carousels).

Collaboration, review and Dev Mode

• Comments (C) pinned to the canvas; @mention teammates; resolve when done.
• Version history (File → Show version history); branching on Organization plans to explore without touching the main file.
• Dev Mode (toggle in the top bar): developers see measurements, colours as variables, assets to export (SVG, PNG, PDF), CSS/iOS/Android snippets, "Ready for dev" statuses, and Code Connect links to real code components. Through the Figma MCP server, AI coding tools such as Claude Code can read selected frames and generate code that uses your variables.

FigJam for workshops

Sticky notes, shapes and connectors, stamps and voting, timers, templates (journey maps, retros, brainstorming, user-story maps), and FigJam AI that sorts and summarises stickies and generates diagrams from a prompt. Use it for discovery workshops, user flows and sprint retros.

Figma AI and Figma Make

Project for data roles: design a KPI dashboard before building it

Designing the dashboard in Figma first saves hours in Power BI or Tableau:

1. Frame: Desktop 1440 × 1024, 12-column grid, 24 px gutters.
2. Header: title, date range picker, filters (Region, Segment) as components.
3. KPI cards: a component with variants (Up/Down/Neutral) and text properties for label, value and change.
4. Charts: placeholders or the Chart plugin for a line (trend), bar (ranking) and map; a table at the bottom.
5. Variables: Light and Dark modes; check contrast for every text colour.
6. Prototype: clicking a region filter swaps to a "South" variant of the page; add an overlay for a drill-through.
7. Share for comments with stakeholders, then rebuild in Power BI/Tableau with the agreed layout and colours (export the palette as hex codes or a Power BI theme JSON).

Summary

Learn more (official and free)

• Figma Help Center and courses
• Figma YouTube channel (Figma for beginners series)
• Figma Community files and templates
• Figma Make
• Figma Learn: Dev Mode and Code Connect