Design systems that think in code
Design and code have always pulled in opposite directions. Design rewards open-ended exploration and rapid iteration; code rewards structure, reuse, and precision. A developer sees a component break when its styling is pushed past its intended parameters. A designer sees that same moment as the start of something interesting. Figma’s position is that the gap isn’t a conflict to resolve in favor of one side—it’s a set of conventions worth borrowing from both worlds.
The company’s announcements at Config Europe center on closing the distance between the component libraries designers maintain and the code bases developers ship. The common thread: make the design-side representation of a UI more closely reflect how it will behave, and be named, in production.
Grouping states the way code does
In front-end code, one component definition usually renders many visual styles—a primary and secondary button, or several sizes of the same input. Design tools typically represent each of those variants as a separate component, creating a mismatch in naming and mental models that slows handoff.
A feature called Variants, due in November, lets teams collapse those parallel artboards into a single component with logical groupings of its different states. The asset panel is simplified, but the real gain is that your Figma component tree can now map one-to-one with your code components.
Prototypes without the wiring
Grouping states is only useful if those states can interact. Today, simulating a hover state or a toggle in a Figma prototype means stringing together separate frames with overlays—an elaborate workaround to fake what should be a native interaction.
Interactive Components, launching in January, removes that busywork. Because Variants group states together inside one component, you can attach the interactions between those states directly. Place an instance in a prototype and it is immediately interactive, with no extra frames to manage.
Layout logic from the box model
Figma introduced Auto Layout in 2019 to give frames real layout rules—resize a button’s text and the frame follows. The next iteration, also arriving in November, borrows more deliberately from CSS. The updated UI simplifies the existing controls while adding stretch along both axes, independent padding values per side, and spacing presets that address common patterns like icon rows in navigation bars. The aim is parity with the box model and Flexbox so that what a designer builds translates to the Web without reinvention.
Moving faster inside large libraries
At the scale of thousands of components, even finding the right one becomes a bottleneck. Two updates target that friction, and both are live now.
The Instance Swap Menu has been rebuilt for search. Instead of scanning a flat list, you can thumb through visual previews, type to search, and jump to a component with keyboard shortcuts—a workflow that scales with team libraries rather than collapsing under them.
On the developer side, the new Inspect Tab replaces the old Code panel. It now shows the selected layer’s name at the top to align design and dev context, then organizes relevant properties—Variants, colors, shadows, content, typography, borders—into browsable sections. Clicking any value copies it to the clipboard, including whole key:value pairs, for quick pasting into code.
These features are described as the opening phase of a longer trajectory: giving designers a flexible canvas when they need to explore, and a stricter, code-aware structure when they need to hand off work that mirrors production.
