This video was produced outside of the scope of the other structured lessons you’ve watched in this collection, but we think you could find it useful.
About this video
You learned the basics of what the Figma MCP server is and how to set it up throughout the lessons in this collection. But after you get everything set up, you may be wondering how you make Figma Design and Figma Make, the MCP server, and your agentic development tools in workflows that can improve your development process. This video by Jake Albaugh, Developer Advocate at Figma, may have some answers for you.
Join Jake as he walks through how you can connect your codebase to Figma using Code Connect, bring design context from Figma Design into agentic development tools with the Figma MCP server, and uses Figma Make to add functionality to design components. Stay until the end to learn some useful best practices!
Additional resources shared in this video
- Figma's Simple Design System (SDS) on Github — React and Figma library with Code Connect, Storybook, example integrations including syncing tokens between Figma variables and the codebase.
- One North SDS — Stencil representation of SDS components including Code Connect for other web frameworks.
- figma.com/developers — Documentation for all our APIs, Code Connect, and the Figma MCP server.