techlist.io
KREN

auto-layout

21 posts

figma

How We Rebuilt the Foundations of Component Instances | Figma Blog (opens in new tab)

Figma replaced its decade-old Instance Updater with a reactive foundation called Materializer. The change separates component resolution from layout and variable evaluation, while enabling granular updates instead of recalculating entire instance trees. Figma reports that common operations in large design systems are now up to 50% faster, and the architecture can support other dynamic features beyond components. ## Why the Original Architecture No Longer Scaled - Instance Updater was introduced around 2016 to resolve component properties, manage instance structure, and synchronize instances with their main components. - Over time, Figma added features such as: - Auto layout in 2019 - Variants in 2020 - Component properties in 2022 - Variables in 2023 - Slots, introduced as an open beta feature in 2025 - Modern instances can combine variants, variable bindings, auto layout, nested instances, variable modes, and extensive overrides. - A small edit can therefore propagate through deeply nested trees and trigger widespread recalculation. - Instance Updater accumulated specialized logic for layout, variables, and other integrations, making it increasingly fragile and slow. - In extreme cases, systems repeatedly invalidated one another, causing actions such as instance swaps or property changes to take seconds. ## The Goals of the Rewrite - Figma concluded that incremental optimization would not solve the underlying architectural problems. - The new design aims to separate responsibilities: - The instance system resolves which properties and children an instance should have. - Layout systems handle layout calculations. - Variable systems handle variable evaluation. - Updates should be granular, affecting only the portions of a tree that actually changed rather than rebuilding entire instances. - Figma also wanted reusable infrastructure for dependency tracking, reactive updates, and efficient invalidation across the editor. ## Materializer and Derived Subtrees - Figma built **Materializer**, a generic system that operates on the document tree. - Its purpose is to create and maintain **derived subtrees**—structures whose properties and hierarchy are computed from other sources of truth. - Component instances are one use case, but the same model can support features such as rich text nodes whose content is synchronized with an external CMS. - This broader abstraction allows teams to build dynamic features without embedding bespoke update logic into a single specialized runtime. The rewrite turns component instances from a monolithic synchronization problem into one application of a more general reactive system. By isolating responsibilities and invalidating only affected subtrees, Figma improves performance for complex design systems while creating a foundation for future dynamic features.

auto-layoutdesign-systemscomponent-instancesreactive-programming+3
figma

Why You Should Care About Design Context | Figma Blog (opens in new tab)

Design files are becoming an important input for agentic coding tools, so their organization and clarity directly affect the quality of generated code. Figma argues that designers should treat handoff as carefully as the design itself, providing developers and AI agents with explicit links between visual decisions and implementation details. The central recommendation is to build strong design-system foundations and structure files so they are easy for both humans and tools to interpret. ## Design systems as implementation foundations - Components and shared variables for color, spacing, sizing, and typography promote consistency and reuse. - These foundations become more valuable when connected directly to the codebase: - **Code Connect** links Figma components to their coded equivalents and displays accurate snippets in Dev Mode. - **Variable code syntax** defines how design variables should be represented across web and native platforms. - With the Dev Mode MCP server, AI agents can retrieve this design-system context directly instead of searching through an entire codebase. - A component such as a card can therefore be generated with the correct variants, properties, spacing, colors, typography, and states. - Embedding this information in shared Figma libraries allows the benefits to scale across teams and projects. ## Structuring files for developer consumption - Clear page hierarchies, frame names, layer names, and layouts make files easier to work with during design and easier for developers and MCP-powered tools to understand. - Create frames for important responsive breakpoints and major visual changes, such as a navigation bar becoming a menu icon. - Use auto layout to express how designs should respond to viewport widths, breakpoints, and changing text. - Intentional structure turns a design file into useful implementation context rather than merely a visual reference. Designers can improve development speed and AI-generated code by treating Figma files as structured technical documentation. Establish reusable, code-connected foundations first, then organize layouts and responsive states explicitly so developers and coding agents can reliably translate designs into production.

auto-layoutfigmadesign-systemsai-agent+3
figma

8 Tips for Designers Building Branded Templates in Figma Buzz | Figma Blog (opens in new tab)

Figma Buzz templates should be designed as flexible systems, not just finished compositions. The post argues that brand designers need to anticipate marketers’ editing needs by building in guardrails for content, spacing, scaling, and branding. Thoughtful template structure helps teams create accurate, on-brand assets at scale without requiring constant designer review. ## Design in Figma Design First - Begin by creating the asset in a Figma Design frame, where designers can use components and Figma Draw’s vector tools. - Once the design is ready, copy it into Figma Buzz for final adjustments and publication as a template. - This workflow combines expressive design capabilities with Buzz’s collaborative marketing features. ## Use Auto Layout for Flexible Templates - Auto layout keeps elements aligned and maintains consistent spacing as content changes. - It is especially useful for buttons, text boxes, and image containers. - Longer headlines or other variable content can expand without pushing surrounding elements out of alignment. - Auto layout provides the responsive foundation needed for templates used across different assets and formats. ## Separate Text Layers by Input - Create a separate text layer for every unique piece of content, particularly when inputs use different fonts, sizes, or styles. - Modular text layers are essential for Bulk create, which maps CSV or XLSX fields to individual design layers. - Combining multiple inputs or styles in one layer can cause formatting problems and make bulk updates difficult. - Separating layers keeps formatting consistent across campaigns and generated assets. ## Lock Image and Vector Aspect Ratios - Lock the aspect ratio of images and vector graphics using the square icon beside the width and height controls. - Templates often need to be adapted from one format—such as a 1080 × 1080 social post—to others, including Instagram Stories or web banners. - Aspect-ratio locking prevents logos, portraits, illustrations, and other graphics from becoming stretched or compressed. - This setting acts as a simple safeguard against accidental distortion during editing. ## Name Layers Clearly - Rename layers so teammates can understand what each editable field controls in Buzz’s Edit Content panel. - Text layers are initially named after their visible canvas text; use Command + R or edit the layer name directly to replace it. - Figma AI can help rename large numbers of layers. - Clear labels make template editing more intuitive, much like completing a form, especially when many layers are available for customization.

auto-layoutresponsive-designfigma-designfigma-ai+3
figma

Updates to our pricing, seats, and billing experience | Figma Blog (opens in new tab)

Figma announced changes to pricing, seat types, and billing workflows taking effect March 11, 2025. The company is raising prices for Figma Design, consolidating seat management, and giving administrators advance approval over paid seat upgrades. The changes are intended to improve billing visibility while allowing users temporary access during approval. ## New Pricing and Seat Structure - Figma Design prices will increase, with changes applying to Full seats. - Existing plans will transition to four seat types: - Full - Dev - Collab - View - Paid seats will include access to FigJam and Figma Slides. - The free Starter plan will remain available. ## Admin Approval for Seat Upgrades - Previously, users could trigger seat upgrades and admins reviewed them afterward. - Under the new model, paid seat upgrades will require admin approval by default. - Admins will manage one seat per user rather than separate seats for each product. - Users can temporarily access the requested seat for up to three days while approval is pending. - During this period, they can create files and edit files where collaborators have granted edit access. - Approved seats will appear on the next invoice, prorated from the approval date through the end of the subscription period. ## Migration and Timing - Existing plans will migrate to the new seat structure and approval workflows beginning March 11, 2025. - Full-seat price increases and updated proration rules will apply at the first renewal on or after that date. - Figma says existing customers will receive additional details by email. ## Connected Projects for Freelancers and Agencies - The billing changes prepare the way for Connected Projects, planned for later in 2025. - Freelancers and agencies will be able to collaborate with clients using their existing seats. - This is intended to eliminate the need to purchase licenses across multiple plans for client collaboration. Organizations should review their seat assignments and establish an approval process before the March 2025 migration.

auto-layoutfigmafigjamfigma-slides+3
figma

Stack the deck with Figma Slides | Figma Blog (opens in new tab)

Figma Slides is introduced as an open-beta presentation tool combining Figma’s high-fidelity design capabilities with FigJam’s collaborative feedback features. It aims to help designers and non-designers create more engaging presentations without exporting work into separate tools. Figma positions it as a way to turn product reviews, sales decks, and pitches into clearer visual stories and collaborative conversations. ## Why Figma Built Slides - Presenters commonly struggle with: - Designing creative layouts - Finding effective visuals - Spending more than eight hours creating a deck - Figma users created approximately 3.5 million presentations in the previous year. - Designers often had to move Figma work into other presentation tools or distribute prototypes and pre-reads to non-designers. - Figma Slides brings presentation creation into the same environment as design and collaboration. ## High-Fidelity Design Features - Slides includes core presentation features such as: - Speaker notes - Slide transitions - Presentation-focused editing tools - Design mode provides access to Figma Design capabilities, including: - Auto Layout - Advanced properties - Precise alignment and snapping - Interactive components and states - Interactive components, such as hover states, can remain functional during presentations. ## Shared Libraries and Assets - Existing Figma text styles, color styles, and design assets are available directly in Slides. - Designers can reuse established libraries instead of recreating presentation elements. - Copy-and-paste workflows work across Figma products, reducing the need to export interface designs individually. ## Grid View for Structuring Narratives - Users can edit individual slides or switch to grid view for an overview of the entire deck. - Grid view organizes slides into rows, making it easier to: - Rearrange sections - Review the overall story - Refine the narrative arc - This bird’s-eye perspective is particularly useful for long presentations where restructuring becomes difficult. ## From Presentations to Conversations - Figma’s experience with FigJam revealed the limitations of one-way presentations. - FigJam became a regular tool for meetings such as team kickoffs, bug bashes, executive reviews, all-hands meetings, and Q&A sessions. - Figma Slides is intended to combine polished visual storytelling with collaborative participation, helping more people contribute to and influence the discussion. Figma Slides’ central promise is to make presentations both visually sophisticated and easier to build collaboratively, allowing teams to design, organize, and discuss their ideas in one shared space.

auto-layoutfigmafigjamdesign-collaboration+3
figma

Alaska Airlines Reaches Cruising Speed With the Help of Variables | Figma Blog (opens in new tab)

Alaska Airlines uses Figma and its Auro design system to create consistent experiences across websites, mobile apps, kiosks, and digital signage. Moving away from Sketch and InVision resolved fragmented workflows, improved collaboration with engineers, and accelerated product development. Figma variables further help the 45-person design team adapt designs across screen sizes, themes, and the needs of more than 23,000 employees. ## Building a Reliable Design System - Alaska’s previous Sketch and InVision workflow lacked: - A single source of truth - Intuitive prototyping and collaboration tools - Consistent reusable components - Easy synchronization between design and engineering - Designers frequently made small but important inconsistencies in colors, buttons, checkboxes, modals, and date pickers. - Manual copying between platforms created version-control problems and contributed to accessibility issues. - Figma enabled Alaska to document Auro clearly for both designers and engineers, creating a more consistent digital ecosystem. ## Redesigning the Flight Status Experience - Severe storms exposed weaknesses in Alaska’s underused flight status page, which lacked information such as flight tracking and aircraft details. - A cross-functional “tiger team” rebuilt the page using approximately 90% Auro components. - The team completed the work in one sprint instead of the estimated four or five sprints without Figma. - Afterward, average time spent on the page increased from 36 seconds to 5 minutes and 10 seconds—a 761% increase. ## Connecting Design and Engineering - Figma components mirror the web components used by engineers, making designs easier to implement accurately. - This alignment improved product consistency and increased trust between design and engineering teams. - Alaska also documented Figma practices such as auto layout, merging, and branching to encourage adoption. - Designer education reduced conflicts and helped teams make better use of Figma’s capabilities. ## Using Variables at Scale - Figma variables allow Alaska to adapt designs for: - Different screen sizes - Light and dark modes - Themes for internal teams and external partners - The approach saves designers an average of 11 hours per week. - Variables help the team support the needs of more than 23,000 employees while maintaining a coherent design system. Alaska’s experience suggests that a well-documented design system, shared tooling, and variables can significantly reduce repetitive work while improving consistency, accessibility, and collaboration across an organization.

auto-layoutfigmadesign-systemsdesign-tokens+4
figma

Nicole Boettcher’s Figma-Designed Quilts | Figma Blog (opens in new tab)

Nicole Boettcher, a former product designer, uses Figma to design and plan her quilts. Her UX background leads her to carefully map patterns, colors, measurements, and sewing steps before cutting fabric. Figma helps her iterate quickly, reduce waste, and translate digital layouts into precise handmade pieces. ## From Product Design to Quilting - During the pandemic in 2021, Nicole left product design at Artsy and began learning to quilt. - She taught herself through online tutorials and beginner patterns. - As her projects grew more ambitious, she turned to Figma to create original designs. - She designs roughly 80% of each quilt digitally before cutting any fabric. ## Building Designs in Figma - Nicole often starts with a traditional quilt block and experiments with its shapes, colors, and proportions. - She maintains a Figma color library using swatches from fabric manufacturers. - Existing fabric supplies influence her palette and pattern choices. - Figma makes it easy to recolor sections, adjust layouts, and create many variations. - Plugins such as Random Colors Fill help her explore different palettes. - Auto layout allows her to move or modify entire rows of a quilt grid at once. ## Planning Fabric and Construction - Once a design is finalized, Nicole duplicates it and breaks it into individual pieces. - The Count Things plugin helps calculate quantities, such as the number of rectangles and squares required. - Pixels in her Figma files correspond to inches in the physical quilt. - She plans cuts carefully to minimize scraps and use fabric efficiently. - She adds a quarter-inch seam allowance to each side of every piece before estimating fabric requirements. - She also rearranges pieces digitally to determine an efficient sewing sequence and reduce unnecessary steps. ## Inspiration and Influences - Nicole draws inspiration from quilting books and artists on Instagram. - She recommends exploring Amish quilts and Gee’s Bend quilts. - Favorite sources include accounts focused on vintage quilts and contemporary textile artists. Figma gives Nicole a bridge between digital product design and physical craft: it lets her experiment freely while preserving the precision quilting requires. For complex, material-intensive projects, digitally planning patterns and construction can save both time and fabric.

auto-layoutfigmaproduct-designux-design+2
figma

Meet the maker: Marcin Wichary | Figma Blog (opens in new tab)

Marcin Wichary’s book *Shift Happens* explores the 150-year evolution of keyboards, typing, and QWERTY as tools shaped by many people rather than a single inventor. His making process relies on rapid prototyping, experimentation, and frequent feedback, whether he is writing, designing, coding, or preparing print materials. The project demonstrates how play and iteration can make a complex, long-term creative effort manageable. ## The History and Meaning of Keyboards - The book examines how keyboards evolved from typewriters to teletypes, computers, and modern devices. - Although keyboards seem functional and unremarkable, their role has changed significantly: - They were once primarily used for producing documents. - Today, they are often used for chatting, texting, and online communication. - QWERTY’s history reflects collective technological development; its designer is effectively “everybody and no one.” ## A Prototyping-Based Creative Process - Wichary builds small versions of ideas, evaluates them, and shares them with others. - He began designing the book’s layout before finishing the manuscript. - Custom plugins automated the flow of text and images into the print layout. - He ordered a print-on-demand prototype as soon as the first manuscript was ready, before completing proofreading. - He tested difficult print scenarios, including: - Black pages - Vivid colors - Highly detailed photographs - Specific paper and page sizes - Iteration often made the project feel unfinished and chaotic, but embracing that uncertainty helped him improve the work. ## Using Experiments to Sustain Momentum - To avoid becoming overwhelmed by writing, research, and image licensing, Wichary created small experimental projects. - He: - Reverse-engineered vintage keyboards and connected them to modern computers. - Built unusual keyboards, including a piano-based typing keyboard. - Tested exceptionally good and bad keyboards. - Created mini-games and a typewriter simulator. - These projects were partly useful for research but also helped preserve his enjoyment of the subject. ## Reviving the Gorton Typeface - Wichary recreated Gorton, a distinctive technical typeface associated with 1980s keyboards and CNC machinery. - Because it had never been released as a TrueType font, he redrew it in Figma and refined it in Glyphs. - The work connected to his first Figma project, which involved type-design tools, and gave him an opportunity to use those tools as a practicing type designer. ## Figma as a Book and Collaboration Tool - He used Figma for: - Moodboards - Print layouts - Website and Kickstarter designs - Newsletter materials - Color systems - Reusable layouts through auto layout - Plugins helped manage complex layouts that had to be revised repeatedly. - Figma’s sharing features made it easy to solicit feedback from people unfamiliar with the tool. - Comments, voting, and canvas annotations supported collaboration with friends, designers, and remote 3D artists. ## Feedback as Part of Making - Wichary built a custom app to gather reactions to individual book chapters through a private URL. - Reviewers could respond using emojis or short comments. - The app made feedback more accessible and provided a refreshing break from writing. - Building a purpose-specific tool also made the feedback process enjoyable rather than purely evaluative. The project’s central lesson is to combine disciplined iteration with playful experimentation. Prototypes, small tools, and early feedback can expose problems sooner while keeping a demanding creative project engaging.

auto-layoutfigmaprototypingtypography+4
figma

What’s new in Figma: August 2022 | Figma Blog (opens in new tab)

Figma’s August 2022 update focused on improving collaboration, usability, and education support across Figma and FigJam. The headline release was a Microsoft Teams integration, while more than 20 smaller improvements refined everyday design and diagramming workflows. Figma also expanded its education offerings through new resources, templates, events, and Chromebook support. ## Microsoft Teams Integration - The new Figma app for Microsoft Teams lets users collaborate in Figma and FigJam without leaving Teams. - Users can: - Present files during meetings - Brainstorm and riff together - Add relevant files to Teams channels - Receive real-time feedback notifications - The integration targets the more than 270 million people who use Microsoft Teams for work. ## Usability Improvements Figma introduced more than 20 “Little Big Updates,” designed to make frequent tasks faster and more intuitive. - **Gradient editing:** Double-clicking gradients makes it easier to space gradient stops evenly and add depth to color fills. - **Frame markups:** Users can annotate frames without worrying that markings will be clipped or affected by auto layout. - **FigJam diagrams:** New prompts automatically create shapes, while connector mode remains active to speed up flowchart creation. - The updates cover shortcuts, design tools, collaboration features, and other day-to-day workflows. ## Expanding Figma for Education Figma highlighted new initiatives for educators and students through its Commons education conference. - Hundreds of educators participated in workshops, panels, and talks about collaborative classroom practices. - New education-focused FigJam sticker packs were released. - Figma launched an Education Community collection featuring classroom templates. - A monthly YouTube series, **“Study Hall,”** provides additional educational content. - Updates to the Chromebook beta allow U.S. high school districts to deploy Figma Organization to students and teachers for free. Overall, the update shows Figma investing both in major workplace integrations and in small workflow refinements. Teams, designers, and educators can benefit by adopting the Microsoft Teams app, exploring the usability improvements, and using Figma’s growing education resources.

auto-layoutfigmafigjamreal-time-collaboration+2
figma

Little Big Updates: More improvements for design and collaboration | Figma Blog (opens in new tab)

Figma’s August 2022 “Little Big Updates” release introduced more than 20 incremental improvements across Figma, FigJam, the desktop and mobile apps, and Community. The updates focus on smoother design workflows, faster collaboration, better accessibility, and fewer interruptions. Together, they show Figma’s ongoing effort to address user feedback and refine everyday interactions. ## Figma design improvements - Pencil annotations no longer get clipped or interfere with auto layout. - Gradient stops can be evenly distributed by double-clicking them. - Selecting a top-level frame also selects subsequent registered top-level frames. - Objects can be aligned as a temporary group by holding **Shift** while using alignment controls. - Pasting between text nodes preserves bullets and text styles. - Text-alignment shortcuts work while editing text inside a text box. - Links in comments open directly without an interstitial page. ## FigJam collaboration and diagramming - Auto-create prompts now appear on all four sides of shapes and stickies. - The Connector tool remains active by default, allowing users to continue diagramming without repeatedly reselecting it. - New guidelines help match shapes’ widths and heights. - Hovering over stamps reveals the users who added them. - Right-clicking a sticker provides access to its parent library and more stickers. - Copy and paste can replace image fills quickly. - Connectors automatically straighten when objects appear center-aligned. ## App, browser, and Community updates - The desktop app adds a menu-bar notification bell. - FigJam on iPad gets improved Apple Pencil responsiveness. - iPad users can undo and redo with two- or three-finger taps and swipes. - FigJam’s iPad app now supports Observation mode and Spotlight. - Search previews include recent searches, while list views show file owners. - Keyboard navigation makes it easier to move among collaborators and search by name. - **Tab** and **Shift + Tab** navigation now work within the comments modal. - Figma Community has been redesigned with new categories and search filters. Users can try the improvements directly in Figma and suggest additional changes through the Figma forum.

auto-layoutfigmafigjamcollaborative-design+2
figma

Config 2022: Thinking big and acting with urgency | Figma Blog (opens in new tab)

Figma’s Config 2022 centered on the idea that designers and builders can influence major global and local challenges by thinking bigger and acting urgently. The 24-hour event brought together 100 speakers for 68 talks, while Figma introduced a broad set of product updates aimed at improving responsive design, collaboration, prototyping, and workflow integration. ## Config’s Broader Mission - Config connected a global design community spanning nearly every country. - Dylan Field argued that creatives are not powerless in the face of issues such as economic inequality and climate change. - The event encouraged attendees to use design and technology to create meaningful change, locally and globally. ## Expanded Design and Prototyping Capabilities - **Dark mode** became available on Figma’s desktop and web applications. - **Redesigned auto layout** added more intuitive responsive-design controls, including absolute positioning and negative spacing. - **Variable font support** enabled more expressive and optimized typography. - **Spring animations** allowed designers to create more natural transitions in prototypes. - **Individual strokes** made it possible to customize borders on specific sides of four-sided shapes. - **Updated outlines** exposed hidden objects and bounding boxes across the canvas. ## More Flexible Design Systems - **Component properties** reduced the need for excessive variants. - The feature also improved alignment between design systems and implementation code, supporting smoother developer handoff. - **Review states** enabled teams to approve changes, request revisions, and provide contextual feedback through branching. ## Collaboration and Workflow Integrations - **Spotlight** allowed participants in multiplayer sessions to direct everyone’s attention to a specific collaborator. - New **FigJam widgets** connected collaborative ideas with execution tools: - Jira - Asana - GitHub - Additional FigJam widgets included greeting cards and voice memos for team celebrations. - **International keyboard shortcuts**, initially in beta, improved shortcut support for German, Japanese, and French keyboards. ## Sharing and File Management - **Password protection** gave file owners more control over who could access shared files. - **Favoriting files** made frequently used documents easier to find and access. Figma positioned these updates as tools for making design work more responsive, collaborative, inclusive, and connected to broader product-development workflows. Teams can benefit most by adopting the features that strengthen their design systems, review processes, and collaboration practices.

auto-layoutfigmadesign-systemsprototyping+4
figma

Interactive components: Less wiring, more inspiring | Figma | Figma Blog (opens in new tab)

Figma’s October 2021 update introduces interactive components as a way to bring reusable interactions and animations directly into the design workflow. By reducing manual prototype wiring and the number of required frames, the feature helps teams create, iterate on, and share more realistic prototypes. Additional improvements make switching between design and prototyping, managing complex canvases, and reusing interactions faster. ## Interactive Components - Interactive components let designers define interactions and animations between variants in a component set. - Component instances become immediately interactive in prototyping mode. - A single frame can replace many frames for states such as: - Multiple selected checkboxes - Open accordion menus - Button hover states - Teams reported prototype frame reductions of up to 10 times. - Designers can edit component states beside where the component is used and duplicate versions to explore alternatives. - Interactive components can be distributed through shared libraries, allowing teams to reuse preconfigured interactions with one click. - Figma improved performance, load times, stability, observation mode, and auto layout support after the beta period. ## Faster Prototyping Workflows - The shortcut **Shift + E** toggles between the Design and Prototype tabs without losing context. - Interactions inherited by instances from main components are hidden on the canvas, reducing visual clutter from numerous blue prototype arrows, or “noodles.” - Prototype interactions can be copied and pasted into frames, reducing repetitive setup work. ## Broader Impact on Design Teams - Interactive components narrow the gap between visual design and interactive behavior. - Reusable interactions help designers focus on user flows instead of manually wiring repeated states. - Shared libraries make it easier for less experienced Figma users to build functional prototypes. - The feature also supports more experimental prototypes, including animated objects, music notation, and interactive games or toys. Figma’s recommendation is to use interactive components and its playground file to make prototyping a more integrated, reusable, and iterative part of the design process.

auto-layoutfigmadesign-systemsprototyping+2
figma

Behind the feature: the making of the new Auto Layout | Figma Blog (opens in new tab)

Figma’s new Auto Layout evolved from a long-standing idea into a more flexible system for creating responsive designs. The team sought to combine flexbox-inspired power with an approachable interface, defining Auto Layout as “a thoughtful subset of flexbox.” The result was a feature designed to reduce manual resizing while preserving usability for designers who may not know CSS deeply. ## The Need for Automatic Resizing - Before Auto Layout, designers had to manually resize buttons, reposition neighboring elements, and adjust containers whenever content changed. - This repetitive work made responsive design systems difficult to build and maintain. - Figma had considered automatic layout since its early designs, but the concept remained unimplemented until Maker Week in 2018. - During Maker Week, product director Sho reimagined the feature in prototypes, eventually leading to a dedicated team focused on making Auto Layout real. ## Designing a Thoughtful Subset of Flexbox - The team drew inspiration from CSS flexbox because it could help align design workflows with implementation in code. - They intentionally avoided reproducing all of flexbox’s complexity. - Their guiding principle was to create “a thoughtful subset of flexbox” that remained easy to learn and use. - Core capabilities included: - Enabling vertical or horizontal layout on a frame. - Setting spacing between items. - Automatically sizing frames to hug their contents along the main axis. - Allowing fixed or content-based sizing on the counter axis. - Giving individual components independent alignment within their container. ## Prototyping and Team Alignment - The designer, Marcin, built an early prototype entirely in HTML. - The prototype helped the team experience the feature early and resolve interaction details before implementation. - It informed decisions about frame-handle decoration, dragging behavior, and visual outlines. - This shared prototype helped product, design, and engineering align around both the feature’s behavior and its usability. Figma’s approach shows that a successful layout tool does not need to duplicate the full complexity of web technologies. By selecting the most useful flexbox concepts and presenting them through an intuitive editor, Auto Layout made responsive design more practical while keeping the experience accessible.

auto-layoutfigmadesign-systemscss+3
figma

Bridging design and code with Variants | Figma Blog (opens in new tab)

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

auto-layoutfigmadesign-systemsui-ux+2
figma

Embracing the tension between code and design | Figma Blog (opens in new tab)

Figma argues that design and code should not be forced into identical workflows, but should learn from each other. Designers need freedom to explore, while developers benefit from structure, reuse, and consistency. At Config Europe 2020, Figma announced features intended to connect these strengths through more code-like design systems and more efficient handoff. ## Design Systems That Mirror Code - Teams often maintain separate component libraries for design and development, even when the components represent the same product elements. - Differences between the two systems can cause miscommunication and slow implementation. - Figma introduced **Variants**, which group related versions of a component—such as button sizes, styles, interaction states, or platform-specific versions—into one component. - Variants are intended to make Figma components more closely resemble reusable code components and simplify the asset panel. ## Interactive Prototyping with Variants - Before Interactive Components, designers often had to connect multiple frames and overlays to simulate component behavior. - **Interactive Components** allow designers to define prototype transitions directly between Variant states. - This makes component instances immediately interactive in prototype mode and reduces the work required to simulate UI behavior. ## Auto Layout Inspired by CSS - Auto Layout already allowed designs to respond automatically to content changes, such as expanding a button when its label changes. - Figma planned to make Auto Layout more closely match the web’s CSS box model and Flexbox. - Planned improvements included: - A simpler user interface - Stretching elements along both axes - Independent padding controls - Better spacing options for common patterns, such as navigation icons ## Making Large Design Systems Easier to Use - The redesigned **Instance Swap Menu** helps users navigate large component libraries with: - Thumbnails - Search - Keyboard shortcuts - These improvements reduce the need to remember exact component names or browse long lists manually. ## Improving Developer Handoff with Inspect - The new **Inspect Tab** replaces Figma’s Code panel and presents implementation-relevant information more clearly. - It displays the selected layer’s name prominently, helping designers and developers identify what is being built. - Developers can inspect values for Variants, colors, shadows, content, typography, borders, and other properties. - Values and complete key-value snippets can be copied directly into code. Figma’s overall direction is to preserve the creativity of visual design while adding the structure and reusability associated with software engineering. Features such as Variants, Interactive Components, improved Auto Layout, and the Inspect Tab aim to make design systems easier to maintain and translate into production.

auto-layoutfigmadesign-systemsprototyping+4