[{"id":"initial-block","type":"text","content":"

The canvas is no longer just where ideas begin. It is becoming the place where ideas are shaped, tested, translated, and shipped.

For years, Figma has been known as the place where product ideas take their first real form. Designers open a blank frame, sketch an interface, refine the layout, and invite others into the process. But the new direction of the canvas signals something bigger: design is no longer stopping at the visual stage. It is moving closer to code, closer to implementation, and now, closer to intelligent systems that can actively participate in the work itself.

This shift is not subtle. The canvas is no longer passive. It is becoming active.

","metadata":{"track":"content","position":"center","sideblock":false,"sectionId":"sec-initial-block"}},{"id":"ce005362-53d2-46e8-b3af-4549f39de901","type":"info-card","content":"AI tools can now design directly in your file, not outside it.","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"ee7e685c-3222-49f7-9671-cd75b222f9f4","title":"What changed"}},{"id":"d4d9e632-6b11-4cbc-bd40-ed2736e15256","type":"text","content":"

The canvas is now open to agents

One of the most important recent changes is that the Figma canvas is now open to AI agents. Not assistants that suggest things, but agents that can actually work inside the canvas, create layouts, update components, and follow structured workflows.

This changes the role of the canvas entirely. Instead of being a place where humans create and machines assist from the outside, it becomes a shared workspace where both can contribute.

Figma introduces the idea of “skills” — structured instructions that guide how agents behave. These skills define how work is done: what steps to follow, what rules to respect, and what “good design” looks like within a team.

That detail matters. Because one of the biggest criticisms of AI-generated design has always been that it feels generic.

Now, instead of guessing, agents work with your system.

They use your components. Your variables. Your structure.

","metadata":{"track":"content","position":"center","sectionId":"ee7e685c-3222-49f7-9671-cd75b222f9f4","sideblock":false}},{"id":"e2f89d2b-c360-4168-9b71-0b0cdd13225d","type":"info-card","content":"This removes the gap between idea generation and actual execution.","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"ee7e685c-3222-49f7-9671-cd75b222f9f4","title":"Why it matters"}},{"id":"d0417521-8650-4824-b426-f8a27c7375de","type":"info-card","content":"Design → Handoff → Code → Misalignment","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"311f5a59-5499-4e34-9b49-31ae07fdbf7e","title":"Before"}},{"id":"e1758822-4eef-4999-ba9e-8702bfd65567","type":"text","content":"

From static files to living systems

The traditional design file was static. Even when it was collaborative, it still relied on manual effort to stay relevant.

That gap between design and reality has always been one of the biggest problems in product teams.

The new canvas begins to close that gap.

With modern workflows, there is now a direct path from system → canvas → code, all guided by the same source of truth.

The canvas is no longer a snapshot. It is becoming a reflection of what the product actually is.

Agents can now:

Generate components from an existing codebase
Update designs using real variables and tokens
Create new layouts using existing systems
Push changes back into code workflows

This creates something new: a loop instead of a handoff.

","metadata":{"track":"content","position":"center","sectionId":"311f5a59-5499-4e34-9b49-31ae07fdbf7e","sideblock":false}},{"id":"c126672d-7a5a-4a55-bbfe-d8845d284218","type":"info-card","content":"System → Canvas → Code → Continuous loop","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"311f5a59-5499-4e34-9b49-31ae07fdbf7e","title":"Now"}},{"id":"b0a327ce-b49e-4f2e-9626-6ba8362618c5","type":"info-card","content":"Less repetition, faster iteration, easier updates.","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"e91a3d94-81e8-4448-b775-ba1ff6d96f25","title":"Practical gain"}},{"id":"6ef83dff-03d2-4f2c-aa4a-96a57966a8ff","type":"text","content":"

Why this matters for designers

For designers, this shift is both practical and philosophical.

Tasks like rebuilding components, updating variants, or maintaining consistency can now be assisted or handled by agents.

But more importantly, it changes how designers think about their work.

You are not just designing interfaces. You are designing instructions for how interfaces should be created.

Because agents rely on structure, clarity becomes more important than ever.

Naming layers properly. Organizing files clearly. Defining components thoughtfully.

These are no longer optional habits. They are essential.

","metadata":{"track":"content","position":"center","sectionId":"e91a3d94-81e8-4448-b775-ba1ff6d96f25","sideblock":false}},{"id":"c233a678-b361-4ece-b3de-43eb97811207","type":"info-card","content":"Designing systems instead of just screens.","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"e91a3d94-81e8-4448-b775-ba1ff6d96f25","title":"Deeper shift"}},{"id":"524754d3-77d1-4fcd-9603-dca8e014f6c8","type":"info-card","content":"Guessing missing states and unclear behavior.","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"6d38d279-8f99-4a59-9c22-a532b133f46b","title":"Old pain"}},{"id":"75237e9f-98e8-4bcc-82cf-04972f9ace95","type":"text","content":"

Why this matters for developers

For developers, the biggest benefit is alignment.

The new canvas reduces friction.

Because agents can work with both design systems and codebases, what appears in Figma is much closer to what exists in production.

Developers can now:

See designs that reflect real components
Receive outputs that match systems
Reduce back-and-forth with designers

","metadata":{"track":"content","position":"center","sectionId":"6d38d279-8f99-4a59-9c22-a532b133f46b","sideblock":false}},{"id":"9f1d1536-6be7-4fd6-9894-d6c24b959779","type":"info-card","content":"Designs reflect actual systems and logic.","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"6d38d279-8f99-4a59-9c22-a532b133f46b","title":"New reality"}},{"id":"08340cf9-3b30-4570-abc6-dea4d5b71a62","type":"info-card","content":"They understand both experience and implementation.","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"4809f3e4-3327-472f-8d45-699cbdfd413c","title":"Their strength"}},{"id":"2a251c71-37f8-4f75-892b-870732ba3644","type":"text","content":"

Why design engineers are at the center of this shift

If designers gain clarity and developers gain alignment, design engineers gain momentum.

Design engineers can:

Generate designs from real systems
Adjust patterns directly in the canvas
Validate ideas early
Move between visual and functional thinking seamlessly

The closer design gets to code, the more valuable design engineers become.

","metadata":{"track":"content","position":"center","sectionId":"4809f3e4-3327-472f-8d45-699cbdfd413c","sideblock":false}},{"id":"7ecf3322-5e5d-473f-af8a-c1df2906fff8","type":"info-card","content":"The tools finally match how they already think.","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"4809f3e4-3327-472f-8d45-699cbdfd413c","title":"Their advantage now"}},{"id":"2521bfb1-b87c-41ba-9e8c-6c03e6820dfc","type":"info-card","content":"Start from scratch, explore freely, risk inconsistency.","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"0568ca81-6033-4de9-9b46-0ea9c10300e4","title":"Old creativity"}},{"id":"40efbf24-047a-4958-9043-16332cd0ddb8","type":"text","content":"

The rise of system-driven creativity

One of the most interesting outcomes of this shift is how it changes creativity itself.

When the foundation is defined, exploration becomes faster and more meaningful.

Agents can generate multiple variations of a layout using the same system, helping teams explore direction without breaking consistency.

This creates a new creative loop:

Generate
Review
Refine
Repeat

","metadata":{"track":"content","position":"center","sectionId":"0568ca81-6033-4de9-9b46-0ea9c10300e4","sideblock":false}},{"id":"cbb20d86-03c3-4370-aba9-455aa3bc97db","type":"info-card","content":"Start from systems, explore faster, stay consistent.","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"0568ca81-6033-4de9-9b46-0ea9c10300e4","title":"New creativity"}},{"id":"917a1793-1406-4e05-b887-08707788eaec","type":"info-card","content":"Assist, suggest, stay passive.","metadata":{"track":"gutter-left","position":"left","sideblock":true,"sectionId":"d125342d-4da9-4e8d-9cd4-6af92fd81606","title":"Old role of tools"}},{"id":"c7a57a07-5052-4f7e-a84d-4d65c403c444","type":"text","content":"

The real shift: from tools to collaborators

The most important change is not technical. It is conceptual.

Agents are no longer limited to suggestions. They can take action.

They follow rules. They contribute to workflows.

The future of design is not human versus machine. It is human with systems that understand the work.

This introduces new responsibilities for teams:

Defining clear systems
Maintaining consistency
Guiding how agents behave

","metadata":{"track":"content","position":"center","sectionId":"d125342d-4da9-4e8d-9cd4-6af92fd81606","sideblock":false}},{"id":"127075f9-365f-4ddc-bb4a-4a59a2e0fec9","type":"info-card","content":"Act, contribute, follow systems.","metadata":{"track":"gutter-right","position":"right","sideblock":true,"sectionId":"d125342d-4da9-4e8d-9cd4-6af92fd81606","title":"New role of tools"}},{"id":"d4bf6e21-9e78-4047-a345-10c310e3774a","type":"text","content":"

What this means for the future of product teams

The new Figma canvas reflects a broader shift in product development.

Design, code, and intelligent systems now exist in the same environment.

That leads to:

Faster iteration
Stronger consistency
Better alignment

But more importantly, it changes how teams think.

They spend less time explaining ideas and more time improving them.

","metadata":{"track":"content","position":"center","sectionId":"c52258a1-5713-4c88-924c-b407b6ce1f09","sideblock":false}}]

The Guide

Lighthouse Design editorial newsletter.