# How figma.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/figma.com-design)

Last updated: 2026-07-28

## Design character

These Figma captures skew to Gallery and Resource Library — light, airy, product-marketing adjacent. White canvas, black type, large soft cards (~24px radius), and unusually fine variable font weights (320–450) for UI. It feels like Figma’s public education/gallery surface: clean, spacious, design-forward without heavy brand rainbow in chrome.

What should survive adaptation:
- Light canvas + black type as default resource shell
- ~24px rounded media/cards (8px secondary)
- Fine weight steps (~320–450) rather than only 400/700
- 24–48px padding rhythm and centered reading/marketing columns

## Foundations

### Color

Measured structured color is sparse (`#000000` present). Visually: white backgrounds, black type, light gray controls, occasional soft gray pills (font specimen toolbars). Brand multicolor appears in product art/content more than in these resource chrome frames.

### Typography

Families unsupported in structured data (Inter is the subject of a page, not necessarily declared as UI family here). Observed:
- Display ~56/61.6 weight 400
- UI ~16–18 with weights 320–450, line-height ~23–25
- Resource articles use clear hierarchical sans

### Spacing and layout

- Padding 24px common; 32 top; 48 bottom on sections
- Side margins ~258px on wide resource frames
- Gallery as card grid; resources as article/hero + content
- Font specimen page: stacked weight rows in soft gray rounded trays

Radii: 24px dominant, 8px secondary, 4px minor.

## Visual language

Flat light surfaces, soft cards, minimal shadow, content-forward. Taxonomy: creative/design, card-heavy, media publication, generative AI mentions on some surfaces.

## Components and states

- Marketing/top resource nav
- Gallery cards
- Article heroes for resource library
- Font specimen controls (size, preview text, open in Figma)
- Weight sample rows in rounded containers

## Responsive behavior

Captures are wide desktop frames; mobile system not established here.

## Practical guidance

**Preserve** airy light resources shell, 24px cards, fine variable weights.  
**Avoid** darkening the resource library into dashboard density.  
**Adaptation** for design education, galleries, and font specimens.

## Scope note

Eight captures: gallery, resource articles, Inter font page. Full figma.com product app UI not in this set. Color roles thin; character from screenshots + type/spacing/radii.

## Captured pages

[![Figma Make & Sites Gallery | Community AI Projects](https://pin.fontofweb.com/8790?format=jpg)](https://design.withfudge.com/share/pin-8790)

[Figma Make & Sites Gallery | Community AI Projects](https://design.withfudge.com/share/pin-8790)

[![What Is Human-Computer Interaction? | Figma](https://pin.fontofweb.com/7973?format=jpg)](https://design.withfudge.com/share/pin-7973)

[What Is Human-Computer Interaction? | Figma](https://design.withfudge.com/share/pin-7973)

[![24 Best Fonts for Websites in 2026 | Figma](https://pin.fontofweb.com/7963?format=jpg)](https://design.withfudge.com/share/pin-7963)

[24 Best Fonts for Websites in 2026 | Figma](https://design.withfudge.com/share/pin-7963)

[![Inter Font | Figma](https://pin.fontofweb.com/7960?format=jpg)](https://design.withfudge.com/share/pin-7960)

[Inter Font | Figma](https://design.withfudge.com/share/pin-7960)

## Colors

- `#000000`
- `#ffffff`