# Figma moves closer to CSS Auto layout, text wrap, spacing and opacity now follow the way CSS works, and code layers and Specs arrive on the canvas. Here is what design system teams should check. - Language: en - Published: 2026-10-27 - Tags: design-system, figma, css - URL: https://devs7ud.io/en/blog/figma-weave-and-frames-en - Translation (ko): https://devs7ud.io/blog/figma-weave-and-frames.md ## This week Figma moved closer to CSS Figma's release notes this week carried a cluster of items about auto layout, text, spacing and variables. They all point the same way: the vocabulary of a design file is being brought closer to the vocabulary of CSS. In the notes' own words, [auto layout now works more like CSS](https://www.figma.com/release-notes/?title=design-closer-to-css-with-the-updated-auto-layout-option), so what is designed lines up more closely with what gets built. ## Auto layout and text gained CSS vocabulary Auto layout set to vertical flow can now [wrap](https://www.figma.com/release-notes/?title=vertical-wrap-available-in-auto-layout). Items move to the next column when they run out of room, a behavior the web has long had. Spacing gets [two new options](https://www.figma.com/release-notes/?title=responsive-spacing). The existing default is now called Between, and Around and Evenly are new. The names resemble the spacing values in CSS. Text gets [text wrap](https://www.figma.com/release-notes/?title=get-responsive-text-across-screens-with-text-wrap) with two options, Balance and Pretty. Either can be set on a text layer, a text style or a single paragraph. Color can have its [opacity changed at scale](https://www.figma.com/release-notes/?title=control-opacity-at-scale). The change is made in the variables modal and can sit on top of any color without detaching it. ![Frames on a canvas snapping into a responsive layout grid](/blog-img/figma-weave-and-frames-en/1.png) ## Screens now sit next to code Coded or legacy screens can now be [brought onto the canvas with their variables attached](https://www.figma.com/release-notes/?title=bring-code-backed-screens-onto-the-canvas-with-variables-attached). The point is to spend the time refining the work rather than rebuilding it. [Config India 2026](https://www.figma.com/release-notes/?title=config-india-2026) made the direction clearer. According to [Design Compass's summary](https://designcompass.org/2026/10/21/figma-code-layers-specs-payload/), three things were announced on October 15. - Code layers put prototypes that run on real code next to the design - Specs hold the background and technical requirements of a design as a document - Payload connects a database, content management, file storage and sign-in Code layers and Specs are in public beta, and the Payload integration is rolling out to all plans. ## Libraries now carry instructions too [The Figma agent has left beta and is generally available](https://www.figma.com/release-notes/?title=the-figma-agent-is-generally-available). A design library can have guidelines attached. Upload markdown files with rules, best practices and antipatterns, and the agent reads them every time someone prompts with that library enabled. For administrators, [enterprise-managed authorization for MCP](https://www.figma.com/release-notes/?title=enterprise-managed-authorization-mcp) is now generally available. Through an identity provider such as Okta, users no longer authenticate one by one. [Weave's video and image models are also reachable through the Figma MCP](https://www.figma.com/release-notes/?title=access-video-and-image-models-from-figma-weave-via-the-figma-mcp) from an agent. ![The Figma logo on a purple background](https://cdn.sanity.io/images/599r6htc/regionalized/342e17642c7afa81206490b0dd21c3e5724ae040-2400x1260.png?w=1200&q=70&fit=max&auto=format) _Image: [Figma release notes](https://www.figma.com/release-notes/?title=access-video-and-image-models-from-figma-weave-via-the-figma-mcp)_ ![A design library with a rules document placed beside it](/blog-img/figma-weave-and-frames-en/2.png) ## From here on this is my view Before switching anything on, read the library once in the vocabulary of code. Release notes introduce features. How much they help in our own library cannot be known until they are tried. Four places are worth reading. - Whether spacing and wrap settings use the same names as the values in code - Whether text styles include a wrapping mode - Whether variables keep color and opacity apart - Whether the library guidelines hold the team's rules and the practices to avoid The last item resembles the Android story of the past few days. Once a document exists that a tool reads, keeping that document current becomes the quality of the output. Some topics did not fit. On GitHub's trending CSS list, [Nutlope/hallmark](https://github.com/Nutlope/hallmark), a design skill for Claude Code, Cursor and Codex, appeared. On the component side, [shadcn/ui releases](https://github.com/shadcn-ui/ui/releases/tag/shadcn%404.22.1) continued. Every source is a Figma release note or the Design Compass article. Each can be checked from the links in the text.