# Figma: Your full-stack framework by Figma

A dynamic product demonstration showcasing Figma's full-stack framework capabilities integrated with backend logic and CMS data management.

- Company: Figma
- Duration: 0:40
- Type: Product demo
- Objective: Demonstrate
- Industry: Creative tools
- Audience: Developer
- Medium: Product UI, Typography, 2D animation
- Style: Minimal, Technical, Playful
- Techniques: UI choreography, Kinetic type, Rapid cutting
- Structure: Feature montage
- Pace: Fast
- Audio: Music-led
- Format: Landscape

## Observations

- Demonstrates end-to-end site creation from Figma design to live backend CMS integration using Payload.
- Shows real-time content synchronization between the CMS input fields and live UI previews.
- Highlights form creation and instant data propagation into database tables.
- Closes with code syntax transition revealing the Figma brand logo.

## Moments

### 0:00–0:07 · Prompting Site Generation with Backend

A user selects design frames in Figma and inputs a prompt to build the site with backend storage and authentication.

Tags: UI choreography, Prompting, Product UI

Link: https://motionreference.com/reference/fa0efd2d-54ca-44ab-9053-10610b8799c5?t=0 · Moment id: `fa0efd2d-54ca-44ab-9053-10610b8799c5-m0`

### 0:07–0:21 · Building with Real Data and Content

Editing blog posts and tags in the CMS directly synchronizes and updates the rendered web interface in real time.

Tags: CMS, Data binding, Live preview

Link: https://motionreference.com/reference/fa0efd2d-54ca-44ab-9053-10610b8799c5?t=7 · Moment id: `fa0efd2d-54ca-44ab-9053-10610b8799c5-m1`

### 0:21–0:35 · Interactive Form and User Data Ingestion

Generating a multi-step signup form, submitting user credentials, and verifying incoming records in the user database view.

Tags: Form generation, Database, User flow

Link: https://motionreference.com/reference/fa0efd2d-54ca-44ab-9053-10610b8799c5?t=21 · Moment id: `fa0efd2d-54ca-44ab-9053-10610b8799c5-m2`

### 0:35–0:40 · Outro: Your Full-Stack Framework

Title card statement transitions through code syntax blocks into the final animated Figma logo.

Tags: Kinetic type, Logo resolve, Branding

Link: https://motionreference.com/reference/fa0efd2d-54ca-44ab-9053-10610b8799c5?t=35 · Moment id: `fa0efd2d-54ca-44ab-9053-10610b8799c5-m3`

## Links

- Motion Reference page: https://motionreference.com/reference/fa0efd2d-54ca-44ab-9053-10610b8799c5
- Watch: https://attachments.are.na/51429756/f195f09752474848c222d3ef1b9c7a93.mp4?1792057001
- Original: https://x.com/zoink/status/2110609962540126655/video/1
- Video id: `fa0efd2d-54ca-44ab-9053-10610b8799c5` (use with the MCP tools get_reference, get_breakdown and get_related_references)

Cite the Motion Reference page and credit Figma when you use this.