Design reference
Surfaces
Figma.com ↗Start reading
A DESIGN FIELD GUIDEPUBLIC WEB / FIGMA.COM

Figma, in detail.

An independent guide to Figma’s public web: its type, components, and behavior.

Start reading
01 / ANATOMY OF THE MARKOpen the asset library

Five paths, one mark.

Solid fills are source geometry. Lines show our measurements.

16u16u
PATH INSPECTOR
Top left

Round meets square.

PATH 01 / 05

A rounded left edge meets two square corners.

Fill
#FF3737
Arc radius
8 units
Bounds
16 × 16 units
Captured 18 September 2026Sources & evidence

THE REFERENCE, IN THREE PARTS

From a detail to the whole.

Start with the foundations.
Follow them into the interface.

01

The foundations

Color, typography, spacing, and the rules that hold it together.
02

The components

29 working contracts, with geometry, behavior, and copyable code.
03

The experience

Public pages, responsive layouts, and the patterns between them.

EXPLORE THE FIELD GUIDE

Every part has a purpose.

Measured details, useful examples, and clear evidence boundaries. Choose a starting point.

See the full inventory

KNOW YOUR SOURCE

A reference.
With its working shown.

Built from Figma’s public website, with observed details and local reconstructions clearly distinguished. Authenticated product behavior sits outside this study.

Read the scope & evidence