figmaNov 18, 2024

Why Devs Should Play an Active Role in Design | Figma Blog (opens in new tab)

Developers should participate actively in design rather than treating design files as read-only specifications. Nicholas Villapiano argues that Figma’s Dev Mode reduces friction, improves confidence, and creates a shared workflow between designers and developers. Teams should advocate for these tools because they understand day-to-day collaboration problems better than management often does. ## Shared Tools Create a Common Language - Dev Mode gives developers a dedicated space within Figma instead of forcing them to work cautiously in designer-oriented files. - It treats developers as contributors to the product process, not merely implementers of finished designs. - Figma’s Auto Layout offered an early example of shared understanding by resembling CSS Flexbox and making designs behave more like responsive web layouts. - Dev Mode extends that connection into a broader framework for collaboration between design and engineering. ## Developers Should Advocate for Better Workflows - Managers may not see the practical pain points developers encounter when translating designs into code. - Developers already advocate for change through GitHub issues, pull requests, and technical discussions, so they should apply the same behavior to design and collaboration tools. - Useful opportunities to raise these needs include one-on-ones, sprint retrospectives, and team meetings. ## Exploring Designs Without Fear - Dev Mode is read-only by default, preventing accidental edits or deleted work. - This works much like branch protection on `main`: developers can investigate freely without risking the source file. - Greater confidence encourages developers to explore designs instead of avoiding or cautiously navigating them. ## Comparing Design Changes Clearly - Dev Mode provides version history and visual comparisons similar to Git commit history and pull requests. - Developers can see what changed, when it changed, and who made the change. - Differences become an actionable checklist, such as updating copy, adjusting margins, or adding a component variant. ## Reducing Context Switching - Developers often lose time switching between design files, documentation, and code. - Dev Mode and related tools such as Code Connect aim to bring implementation details closer to the design workflow. - Centralizing relevant information can reduce the “tab-switching tax” and make design-to-code work more efficient. ## Practical Recommendation Developers should actively evaluate and promote shared design-development tools like Dev Mode. By creating safer exploration, clearer change tracking, and a common language around implementation, teams can improve productivity, collaboration, and morale.

flexboxfigmadesign-systemsgithub+3

figmaAug 20, 2024

A Year With Dev Mode: 10 Lessons From An Engineering Manager | Figma Blog (opens in new tab)

After a year using Figma Dev Mode at Decathlon, Laurent Thiebault found it transformative for connecting design and development workflows. The biggest improvement came from Code Connect, which links Figma components to real implementation code and helps resolve mismatches in properties, naming, and states. His overall recommendation is to adopt Dev Mode incrementally, using design tokens, advanced inspection, and embedded documentation to build trust and alignment. ## Start Small, Think Big - Developers may resist adding another tool to established workflows, so the team began with small wins rather than a full process overhaul. - Figma variables helped the team improve design-token handoff. - Variable aliasing creates a clear token hierarchy and supports semantic theming. - Variable scoping prevents incorrect usage, such as applying background colors to text or spacing values to corner radii. - Customized code syntax allows token names to match developer conventions across platforms. - Token changes can expose the corresponding implementation changes directly to developers. ## Use Advanced Inspection Capabilities - Dev Mode handles complex layouts, including Flexbox, and generates implementation-ready code. - Teams can inspect CSS, SwiftUI, UIKit, Android XML, and Jetpack Compose properties. - These inspection tools help designers verify that components are implemented according to specifications. - The Figma VS Code extension adds autocompletion and makes it easier to navigate CSS, Compose, and SwiftUI implementations. ## Define What “Done” Means - Keeping design-system documentation current is difficult, and design intent can be lost during handoff. - Dev Mode documentation and annotations keep requirements closer to the designs themselves. - Designers can add free-text explanations, defined values, measurements, alignment details, and sizing guidance. - Developers can be linked directly to relevant annotations for additional context. - The team documents components with links to GitHub source code, README files, and related playgrounds. ## Code Connect as the Central Improvement - Code Connect connects Figma components directly to the components used in production code. - It helps reconcile differences between how components are structured in design files and how they are implemented in code. - The feature improves consistency around component properties, naming conventions, and state management. - Combined with design tokens and inspection tools, it makes Dev Mode a more reliable bridge between design systems and engineering. Teams adopting Dev Mode should start with focused improvements—especially token management and documentation—then expand toward deeper code integration with Code Connect.

flexboxdesign-systemsdesign-tokensswiftui+4

figmaNov 18, 2020

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.

flexboxfigmadesign-systemscss+3

figmaSep 16, 2020

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.

flexboxfigmadesign-systemsprototyping+4