<p id="speakable-summary" class="wp-block-paragraph">Figma on Wednesday showed off an update that adds a new code layer, support for motion and shaders, and the ability to create custom plug-ins for various tasks using AI.</p>
<p class="wp-block-paragraph">The design platform has been working on bringing code integration into its tool for a while. Last year, it unveiled an AI prompt-based prototyping tool, Figma Make, and has since launched integrations with <a href="https://techcrunch.com/2026/02/26/figma-partners-with-openai-to-bake-in-support-for-codex/" target="_blank" rel="noreferrer noopener">Claude Code and Codex</a> to improve the hand-off between coding and design.</p>
<p class="wp-block-paragraph">The company is now adding code layers directly to the collaborative canvas, helping teams clone repositories and extract flows from code to design layers for testing. </p>
<img loading="lazy" decoding="async" height="383" width="680" src="https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?w=680" alt="" class="wp-image-3135648" srcset="https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png 1920w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=150,84 150w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=300,169 300w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=768,432 768w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=680,383 680w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=1200,675 1200w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=1280,720 1280w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=430,242 430w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=720,405 720w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=900,506 900w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=800,450 800w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=1536,864 1536w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=668,375 668w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=1097,617 1097w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=708,398 708w, https://techcrunch.com/wp-content/uploads/2026/06/Code-layers_overview.png?resize=50,28 50w" sizes="auto, (max-width: 680px) 100vw, 680px"><strong>Image Credits:</strong>Figma <p class="wp-block-paragraph">Figma’s chief product officer, Yuhki Yamashita, said code layers make it easier for designers, product managers, and programmers to iterate on ideas rather than focus on creating pristine code that goes into production.</p>
<p class="wp-block-paragraph">“We think the multiplayer canvas is really powerful because this is an environment where you don’t really care about the quality of the code. If you’re rapidly exploring or need to kind of explore a bunch of new directions, you can do that in this spatial way. We hope that this feature produces different behavior not just with designers, but also with engineers and PMs,” he said over a call.</p>
<p class="wp-block-paragraph">Figma now also supports animations, transitions, and 3D transforms. Previously, designers had to create animations in other software and convert it to code that the app could understand. Now designers can integrate animations and transitions directly into Figma.</p>
<img loading="lazy" decoding="async" height="383" width="680" src="https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?w=680" alt="" class="wp-image-3135649" srcset="https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg 1920w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=150,84 150w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=300,169 300w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=768,432 768w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=680,383 680w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=1200,675 1200w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=1280,720 1280w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=430,242 430w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=720,405 720w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=900,506 900w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=800,450 800w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=1536,864 1536w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=668,375 668w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=1097,617 1097w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=708,398 708w, https://techcrunch.com/wp-content/uploads/2026/06/Agent_skills.jpeg?resize=50,28 50w" sizes="auto, (max-width: 680px) 100vw, 680px"><strong>Image Credits:</strong>Figma <p class="wp-block-paragraph">You can now use AI to create some of these assets, and the update is adding support for adding shader effects and fills using AI, too.</p>
<p class="wp-block-paragraph">Last year, Figma <a href="https://techcrunch.com/2025/10/30/figma-acquires-ai-powered-media-generation-company-weavy/" target="_blank" rel="noreferrer noopener">acquired node-based tool Weavy</a>, which helped designers run workflows through different models to compare outputs, and is now working to integrate the two apps better. In an update rolling out later in the year, users will be able to generate Weavy workflows directly within Figma.</p>
<p class="wp-block-paragraph">The company’s also adding new skills to make <a href="https://techcrunch.com/2026/05/20/figma-adds-an-ai-assistant-to-its-collaborative-canvas/" target="_blank" rel="noreferrer noopener">its AI assistant</a> more useful with its collaborative canvas. Users can now write text prompts to create repeatable skills that AI agents can use. You can also connect tools like Notion, Granola, Excel, and GitHub, or attach files to give the AI bot more context about what you want it to do.</p>
<p class="wp-block-paragraph">The company is also adding a feature to help users create custom plug-ins, like layout generators or vector path tracers, with prompts.</p>
© 2026 Winzheng.com 赢政天下 | 转载请注明来源并附原文链接