Design Read the original on Cmswire 2 min read 1

Figma introduces code layers and native motion tools at Config 2026

Figma has officially expanded its collaborative canvas by introducing integrated code layers and native motion design tools during the Config 2026 event. These updates allow designers to convert visual elements into interactive code with a single click while providing a dedicated timeline for complex animations. By merging these capabilities, Figma aims to streamline the handoff process between creative teams and engineers, significantly reducing friction in product development cycles.

Велика білборда у центрі міста з яскравими 3D-об'єктами, логотипом Figma та написом Made in Figma by Erica Leong.
Велика білборда у центрі міста з яскравими 3D-об'єктами, логотипом Figma та написом Made in Figma by Erica Leong. · Image source: Cmswire

According to Cmswire, Figma unveiled a comprehensive suite of new features at Config 2026 aimed at unifying design and engineering workflows. The centerpiece of these announcements includes code layers, which treat programming logic as a standard design material, alongside the launch of Figma Motion for advanced animation control.

Bridging the gap between design and production

The introduction of code layers allows users to transform any design component into interactive code using either a single click or a text prompt. This functionality is designed to let designers experiment with live logic directly on the canvas before handing off assets to developers. Early access for this specific feature is scheduled to begin in July.

Complementing these updates, Figma Motion provides a native timeline featuring keyframes and presets. The tool supports multiple export formats to ensure compatibility across different development environments, including:

  • CSS and JSON files
  • React components
  • MP4 and WebM video files
  • Animated SVGs and GIFs
  • Advanced creative materials and AI integration

    Beyond code and motion, the platform is expanding its visual capabilities with shader fills and effects. These allow for the creation of AI-generated, parameterized shaders through text or image prompts. The company also introduced generative plugins, which enable users to build custom tools by describing desired behaviors without requiring a dedicated development environment.

    The update also features an enhanced Figma agent designed to automate cross-tool workflows using various connectors and attachments. These moves follow the acquisition of the headless CMS Payload and the purchase of AI startup Weavy, which was rebranded as Figma Weave to bolster generative image and video capabilities. While these advancements position Figma as a dominant force in the digital experience space, the company continues to navigate challenges, including a class action lawsuit regarding AI training data and recent board leadership changes.

    By integrating production-ready code and motion directly into the design phase, Figma is effectively collapsing the traditional boundaries of the creative pipeline. This shift suggests a future where the distinction between a prototype and a functional product becomes increasingly blurred for enterprise teams.

    FAQ

    What file formats does Figma Motion support?
    Figma Motion supports multiple export formats including CSS and JSON files, React components, MP4 and WebM video files, as well as animated SVGs and GIFs.
    How can users create custom tools in Figma now?
    Users can build custom tools using new generative plugins by describing desired behaviors without needing a dedicated development environment. The platform also features an enhanced agent to automate cross-tool workflows.
    What recent acquisitions did Figma make to improve its AI capabilities?
    Figma acquired the headless CMS Payload and purchased the AI startup Weavy, which was rebranded as Figma Weave to enhance generative image and video capabilities.
    Telegram

    Fresh news on our Telegram

    Get instant alerts for new posts in «Design»

    @prodesignandevenmore