# Bring Code to the Canvas by Figma

A dynamic product showcase introducing features that bring functional code directly onto the Figma canvas from frames, web pages, Figma MCP, and GitHub repositories for collaborative design and development.

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

## Observations

- Demonstrates bringing live prototypes into Figma canvas via multiple sources: Figma frames, web captures, Figma MCP integration, and GitHub repos.
- Features multiplayer collaboration with multiple labeled cursor tags interacting on interactive app frames simultaneously.
- Shows direct code layer editing, updating styling and component values in real time.
- Ends with animated code blocks resolving into the Figma logo mark.

## Moments

### 0:00–0:06 · Import Sources

Rapidly displays the sources you can pull code from: a frame, a web page, Figma MCP, and a GitHub repository.

Tags: Kinetic type, UI choreography, Sources

Link: https://motionreference.com/reference/09f684b8-6f33-4218-9401-c114010695eb?t=0 · Moment id: `09f684b8-6f33-4218-9401-c114010695eb-m0`

### 0:06–0:16 · Collaborative Canvas Assembly

Multiple live user cursors assemble, clone, and test code components and app screens across the collaborative canvas.

Tags: Multiplayer, Canvas, Live components

Link: https://motionreference.com/reference/09f684b8-6f33-4218-9401-c114010695eb?t=6 · Moment id: `09f684b8-6f33-4218-9401-c114010695eb-m1`

### 0:16–0:22 · Update Code Layer

A designer modifies card values and clicks 'Update code layer' to instantly re-render component updates.

Tags: Code editing, UI update, Interaction

Link: https://motionreference.com/reference/09f684b8-6f33-4218-9401-c114010695eb?t=16 · Moment id: `09f684b8-6f33-4218-9401-c114010695eb-m2`

### 0:22–0:30 · Interactive Prototype Testing

Users navigate a live map and product details directly on the canvas, exchanging cursor chat messages.

Tags: Prototyping, Chat, Interaction

Link: https://motionreference.com/reference/09f684b8-6f33-4218-9401-c114010695eb?t=22 · Moment id: `09f684b8-6f33-4218-9401-c114010695eb-m3`

### 0:30–0:35 · Explore and Build Outro

Tagline 'Explore and build with code' displays before code blocks morph into the Figma brand logo.

Tags: Typography, Logo animation, Branding

Link: https://motionreference.com/reference/09f684b8-6f33-4218-9401-c114010695eb?t=30 · Moment id: `09f684b8-6f33-4218-9401-c114010695eb-m4`

## Links

- Motion Reference page: https://motionreference.com/reference/09f684b8-6f33-4218-9401-c114010695eb
- Watch: https://attachments.are.na/51445483/5f1dee7a7c3ebb253b0a3fa1ec465095.mp4?1792086723
- Original: https://x.com/figma/status/2110600144525853007/video/1
- Video id: `09f684b8-6f33-4218-9401-c114010695eb` (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.