Figma tutorial: Code to canvas with your design system
13.8K views · 2026-05-14
UI Design
Introducing use_figma, a tool in Figma’s MCP server that lets AI agents create and modify designs directly on the canvas, using your design system as the source of truth.
In this video, we'll walk through how a technical designer at Earthling uses the use_figma tool to move fluidly between the terminal and Figma canvas.
Learn more about the Figma MCP server: https://help.figma.com/hc/en-us/sections/35280374295831-Figma-MCP-collection
Chapters:
00:00 Intro
00:49 Start from the terminal
01:45 Iterating in Figma Design
02:25 Comment and annotation
02:53 Implement back to the codebase
03:27 Outro
#mcp #server #figma #tutorial #tips #design #designer
____________________________________________________
Find us on ⬇️
X (formerly Twitter): https://x.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
TikTok: https://tiktok.com/@figma
Figma forum: https://forum.figma.com/
In this video, we'll walk through how a technical designer at Earthling uses the use_figma tool to move fluidly between the terminal and Figma canvas.
Learn more about the Figma MCP server: https://help.figma.com/hc/en-us/sections/35280374295831-Figma-MCP-collection
Chapters:
00:00 Intro
00:49 Start from the terminal
01:45 Iterating in Figma Design
02:25 Comment and annotation
02:53 Implement back to the codebase
03:27 Outro
#mcp #server #figma #tutorial #tips #design #designer
____________________________________________________
Find us on ⬇️
X (formerly Twitter): https://x.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
TikTok: https://tiktok.com/@figma
Figma forum: https://forum.figma.com/