loading
loading
Build by design: New workflows for new ways of building Here’s a look at everything we launched today to bring teams and agents, and the design, code, and context they work with, into Figma’s full-stack creative canvas. Share Build by design: New workflows for new ways of building For a long time, coding was expensive. Every change would cost money and time, and you planned carefully before you committed anything to code. Today, as AI has made coding cheap, building something has never been easier. More teams are building as a way to expand their thinking. They’re building first, using it as a jumping off point to untangle a problem and test whether ideas hold up. It’s fast, loose, and a little messy, and it’s less about creating a polished product and more about pushing your own thinking. This is building to think. And then there’s building to ship. This way of working is deliberate, precise, and defined by the details. Moving between these types of building is hard. AI has made it easy to get to a proof of concept using code, but that workflow is often single player, leaving you with tunnel vision and no sense of whether you’re moving toward the right thing. Today, we’re sharing new ways of bringing both kinds of building together, in Figma. Collaborate with code on the canvas When we’re all off vibe coding prototypes, it can feel like designing in isolation. Sometimes collaboration today even looks like sharing a link to a prototype or a video where you can see the end result, but you can’t see how you got there. We're building to think, but the thinking has become invisible. In the words of one of our customers, “It’s fast, fast, fast... then slow.” And we’ve heard feedback from Figma users that they don’t feel at home in a terminal or IDE. They want to build, visually and with their teams, in an environment that’s made for them. That’s why we announced code layers earlier this year: to make it feel like designing together again on the canvas. Whether you’re converting existing designs into working code, uploading from a local folder, bringing in a coded prototype via MCP, importing from GitHub, or capturing what’s live on your website with Figma’s Chrome extension, code layers lets you explore code-backed ideas on the canvas and push your thinking forward. And over time, we plan to make it possible to work with more complex codebases, too. Code layers is rolling out in open beta starting today, and is available on all plans. We’ve also improved our Chrome extension… check it out! More control over your design systems Design systems have always been the foundation for bringing consistency and coherence to your product. And as teams start creating more and more with agents, that foundation becomes even more important. When you give agents the right patterns and principles, they can build on the craft your team has already invested in. This is why we’re expanding what your design systems in Figma can include, bringing in code sources and guidelines so the agent has all the information it needs to better reflect your design system, wherever it lives. Add guidelines to your published design libraries so the agent can more easily follow established patterns, and import code sources from a GitHub repository or an npm package to help the agent build and edit better components and code layers. We’re also previewing a dedicated place to bring all the libraries that make up your design system together, manage and govern them in one place, and improve them over time. A system map helps you track changes and dependencies, while system check scans to find gaps, like missing descriptions and interactive states, in your design system. Guidelines, now in open beta, and code sources, starting in closed beta, will be available on all paid plans. Shared context with Figma Specs As teams increasingly collaborate with agents, Markdown is more ubiquitous than ever. But Markdown files have no relationship to each other, or to the projects they’re attached to. They also often have references to images, URLs, or even other Markdown files, which can be opaque to collaborators. That’s why we built Specs: a new native home for context, that allows it to fully express itself and move into, out of, and across Figma. Specs can do a lot, from seeding generation of new directions, to creating data reports, to creating high fidelity PRDs, to handing off context to agents. You can bring in outside context with an agent, work together to turn rough ideas into a detailed spec, then send it to your coding agent using Figma’s MCP server, or use Specs to build a code layer and refine as you learn. Since Specs contain your shared decisions and reference your work on the canvas, you can codify and share context from diagrams, code layers, designs, and more. Specs is starting to roll out today in open beta on web, desktop, and mobile and will be available on all paid plans. Ship data-backed websites with Payload Payload is an open-source content framework for building internal tools, apps, and websites. In the past 12 months, Payload downloads have grown 6x, making it the fastest growing open source CMS on NPM. Last year, the team behind Payload, an open source content framework, joined Figma We're thrilled to announce that the team behind Payload, a leading open-source headless content management system (CMS) and application framework, has joined Figma. Welcoming Payload to the Figma team Payload is available on all plans, with access rolling out to all accounts over the coming weeks. New ways to create with your AI tools using Figma MCP All of these new features and workflows are agent-native via the Figma agent and MCP. The agent, now generally available Here’s how teams at Uber, Granola, and Atlassian support high-quality, fast-moving work with the Figma agent, now generally available. 3 ways product designers use the Figma agent for craft, speed, and creative expression We’re also updating the Figma MCP to power more AI workflows across code and design, giving agents the skills and tools to help teams build faster. Starting today, you can generate code layers and work with specs directly from the AI tools you already use. You can also create visual assets and run published Weave workflows, bringing more of your creative process into these tools. Improved agent guidance and Figma MCP server performance reduces errors and token usage, helping agents complete Figma tasks more efficiently and reliably. To help you connect your work to Figma, wherever you start, we’re launching 20 new MCP partner integrations, including: - OpenCode: Give your coding agent Figma design system context to generate more accurate code, then send prototypes back into Figma for review. - Dia: Explore ideas in an AI-native browser and bring web UI into Figma as editable design layers to refine and review. - Junie by Jetbrains: Bring your coded prototypes into Figma as code layers to iterate and polish with your team. - Meta Muse: Let small business owners bring the brand they’ve designed in Figma into Muse to generate more visuals and run Weave workflows. Today, work starts in different places, changes hands, and changes form. Teams come together and explore ideas side by side. They refine interactions by putting them to the test, then carry those decisions forward into something that’s ready to ship. The process doesn’t move in a straight line: ideas branch, teams double back, and something made to answer one question reveals a better question underneath it. That’s what it means to build by design. Wherever you start, and however you work, we’re excited to see what you make on Figma’s full-stack creative canvas. Dylan Field is the co-founder and CEO of Figma. Dylan studied computer science and mathematics at Brown University where he and his co-founder, Evan Wallace, first started experimenting with design tools built on (and for) the web. With funding from a Thiel fellowship, they began Figma. Prior to Figma, Dylan interned at O'Reilly Media, LinkedIn, and Flipboard.
document fetched 2026-10-24 10:05 · canonical https://figma.com/blog/build-by-design