Dev Mode

30 posts

figmaJun 25, 20242 min readCurated summary

Config 2024 In Review | Figma Blog

Figma’s Config 2024 announcements focus on making design more exploratory, efficient, and connected to development. The company introduced Figma AI, a redesigned UI3 interface, Figma Slides, major Dev Mode improvements, and quality-of-life updates. Figma argues that as AI makes software creation easier, thoughtful design will become an even stronger differentiator. ## Figma AI: Faster exploration and production - **Visual Search** lets users find similar designs across accessible team files using a screenshot, selected frame, image, or sketch. - Improved **Asset Search** understands the context of queries, even when search terms do not match asset names. - New AI-powered efficiency features can: - Generate realistic images and copy - Rewrite, translate, or vary text - Automatically create prototype connections - Rename layers - **Make Designs**, available through the Actions panel, generates initial UI layouts and component options from text prompts. - Figma says these tools are built around practical user needs rather than AI hype, using large language models to reduce tedious work and help designers explore more possibilities. ## Other major Config announcements - **UI3** redesigns the Figma interface. - **Figma Slides** introduces a dedicated environment for building, collaborating on, and presenting presentations. - **Dev Mode updates** aim to move teams from designs being merely “design ready” to being fully “dev complete.” - Additional improvements target **Auto Layout, UI kits, and the prototype viewer**. ## Availability - Figma AI and UI3 were announced as limited betas with gradual rollout. - Users can join the waitlist through Figma’s help menu by selecting **“Join UI3 + AI waitlist.”** Figma’s overall direction is to support the full path from idea generation through design, presentation, and development, while using AI to automate routine tasks and expand creative exploration.

Dev Mode AI Design Systems Large Language Models+3

figmaJun 2, 20242 min readCurated summary

Updates to how drafts work | Figma Blog

Figma is moving Drafts for Starter and Professional users into team-associated spaces. The change is intended to clarify ownership, permissions, security, and plan features while keeping drafts private and free to create or edit. Users must eventually move existing drafts into a team, though no immediate deadline applies. ## Why Figma Is Changing Drafts - Drafts previously existed outside teams, creating: - Unclear ownership and team association - Inconsistent behavior across Figma plans - Limited access to paid features such as advanced prototyping, password protection, and Dev Mode - Ambiguous permissions between personal and professional work - Potential security, intellectual-property, and file-loss risks ## New Drafts Structure - Every draft must now belong to a team. - Each team provides members with a private drafts space. - Drafts in Professional teams can use Professional features when edited by eligible users. - Collaborators who are not full team members will be changed from editors to viewers when a draft moves, preventing unexpected paid seats. - Users with one Starter team may have their drafts migrated automatically. ## What Remains the Same - Drafts remain private to their owner and invited collaborators. - Users can create and edit personal drafts for free. - Starter teams can have unlimited viewers and unlimited editors on up to three collaborative files. ## Moving Existing Drafts - Users will find their files in a temporary “Drafts to move” space. - Drafts can be moved into any existing team or into a newly created free Starter team for personal work. - Existing collaborators can continue editing before migration, but new collaborators can only be added after moving a file to a team. - There is no hard deadline yet; unmoved drafts will eventually be transferred to a new free Starter plan after advance notice. ## Future Billing and Collaboration Improvements - Figma plans to make paid editor-seat upgrades clearer. - Planned improvements include better freelancer handoffs, support for users on multiple teams, license management, admin tools, and guest management. - The company is also redesigning its core billing experience. Figma recommends organizing drafts into the appropriate team—or creating a free Starter team for personal projects—to establish clearer separation between professional and personal work.

Dev Mode Figma Prototyping Access Control+2

figmaMay 21, 20242 min readCurated summary

Unlocking the Power of Code Connect | Figma Blog

Code Connect helps design systems bridge the gap between design and engineering by making implementation guidance and production code available directly in Figma’s Dev Mode. Leaders from Bumble, GitHub, and HP argue that successful adoption depends on creating shared terminology, meeting developers in their existing workflows, and introducing the tool incrementally. The broader conclusion is that Code Connect is a practical first step toward tighter, more consistent design-to-code collaboration. ## Establish a shared language - Designers and developers often use different naming conventions, component properties, and expectations. - Design systems can serve as a “third language” by defining shared terms, patterns, and components. - Documentation and design decisions must be easy to discover and implement, not merely documented somewhere. ## Bring design guidance into developer workflows - Teams often struggle to identify a single source of truth, leading to inconsistent implementations and duplicated code. - Designers may rely on design documentation while engineers consult separate technical sources. - Code Connect surfaces design-system documentation and implementation details directly in Dev Mode, reducing the need for developers to switch to external websites or tools. - This helps teams reuse established patterns instead of repeatedly creating custom solutions. ## Start small to encourage adoption - Design systems cannot assume that people will adopt them simply because they exist; reducing friction is essential. - Code Connect lets developers inspect how a design has been implemented without leaving their existing workflow. - Teams should begin with small, high-impact components such as toggles. - Mapping a few components first makes it easier to learn the process, demonstrate value, and expand gradually. - HP’s Gilson Hoffmeister describes Code Connect as a first step toward broader design-system improvements. ## Value both disciplines’ expertise - Effective design-to-code collaboration requires recognizing that designers and developers contribute different forms of expertise. - Code Connect is intended to connect those perspectives by delivering design-system code into Dev Mode. - Better alignment can improve consistency, speed, and the quality of handoff without requiring either discipline to abandon its established practices. Teams should begin with a small set of frequently used components, establish shared terminology and ownership, and use Code Connect to make authoritative implementation guidance available where developers already work.

Dev Mode Figma Design Systems Design To Code+2

figmaFeb 13, 20242 min readCurated summary

5 Things Designers Need to Know for a Smooth Handoff | Figma Blog

Design handoff should be treated as an ongoing process of communication and collaboration, not a single event at the end of design. The article argues that clear annotations, shared terminology, and organized files help ensure that “Ready for dev” genuinely means developers have the context they need. These practices reduce ambiguity while preserving conversations between designers and developers. ## Streamline and Clarify Callouts - Use annotations to explain design intent and highlight details that might otherwise be missed. - Focus callouts on information developers actually need, such as: - New components - Specific interactions not obvious from a prototype - Platform-specific differences - Specs, measurements, and behavior - Avoid duplicating information already captured through variables or styles. - Figma’s annotations in Dev Mode can pin measurements, properties, and notes directly to designs. - Annotations are intended to improve—not replace—designer-developer discussions. ## Adopt a Shared Language - Design and development may use different terms for similar concepts, so teams should align on naming early. - Clarify terms such as “toggle” or “switch” to avoid misunderstandings. - Coordinate variable, style, and component names with conventions already used in code. - Use variables and styles for foundational properties such as: - Fonts - Colors - Spacing - Shared names like `bg-primary-active` are more reliable than manually communicating hex codes or font specifications. - A color wheel within the design system can help teams consistently reference shades and tints. ## Organize Files with Labels - Infinite canvases can become difficult for developers to navigate, especially when they contain unfinished explorations. - Clean up and structure files before inviting developers to build. - Use sections to group related designs and reduce navigation overhead. - Mark completed sections or frames with a “Ready for dev” status so developers know where to focus. - Standardized team templates can reduce context switching and create a more predictable handoff process. A smooth handoff depends on shared context, precise communication, and intentional file organization. Designers should tailor annotations and terminology to their development partners, then clearly separate exploratory work from implementation-ready designs.

Dev Mode Figma Design Systems Design Tokens+3

figmaJan 30, 20243 min readCurated summary

Everything You Need to Know About Dev Mode | Figma Blog

Figma built Dev Mode to make the transition from design to code more efficient for developers, who now represent roughly one-third of its weekly active users. Rather than separating developers into different tools or files, Figma created a dedicated space within the same collaborative environment. After an open beta shaped by extensive user feedback and more than 200 updates in its first two months, Dev Mode moved out of beta with a focus on clearer handoff and developer-centered workflows. ## Why Figma Built Dev Mode - Developers were already using Figma alongside designers, product managers, and other collaborators, despite Figma not being optimized for their workflows. - Figma wanted to support varied development roles, including: - Front-end developers working with design systems - Design systems engineers building components - Developers implementing content layouts and exporting assets - In 2021, Figma acquired Visly, a team of eight designers and engineers experienced in React UI development and developer tooling. - The Visly team emphasized that developers should not have to learn every interaction in design mode; the experience should be tailored to their needs. ## An Integrated Development Workspace - Figma considered both fully separate files and tightly integrated design and development experiences. - It ultimately chose a dedicated mode inside Figma: - Developers get tools and workflows optimized for implementation. - They retain access to the design context and collaboration surrounding the work. - The approach avoids forcing teams to switch tools or lose important information during handoff. - Dev Mode launched as an open beta at Config 2023, with customer feedback driving rapid improvements and over 200 requested updates delivered in the first two months. ## Communicating Design Intent - Traditionally, designers had to manually create measurements, callouts, and organized specifications for developers. - Dev Mode introduces annotations that remain connected to the design and update as the design changes. - Designers can: - Click and drag to measure - Highlight important details without cluttering the canvas - Add live specifications and contextual notes - Automate or customize annotations through plugins - Designers can mark a section as “ready for development” without creating a separate file or page. - Developers can use diffing tools to compare changes between versions and stay current with design updates. ## Practical Impact Dev Mode is intended to make design handoff less manual and more collaborative by giving developers a purpose-built workspace without removing them from Figma’s shared context. Teams can use annotations, readiness labels, and frame comparisons to reduce ambiguity and keep implementation aligned with evolving designs.

Dev Mode Figma Design Systems React+3

figmaJan 30, 20242 min readCurated summary

The Art and Science of Annotations in Dev Mode | Figma Blog

Figma’s Dev Mode annotations aim to make designer–developer collaboration clearer and less manual. The feature centralizes design context, keeps specifications synchronized with changing designs, and avoids cluttering the design canvas. Its core conclusion is that annotations should be dynamic, connected to design properties, and presented in a developer-focused workspace. ## Solving Designer and Developer Needs - Designers need to document information that visuals cannot fully express, including: - Accessibility requirements - Interaction behavior - Rationale behind design decisions - Developers need more than access to an entire design file; they need a curated engineering specification that identifies the relevant work. - Figma placed annotation workflows in Dev Mode so designers can: - Annotate from the same perspective developers use - Create a focused specification - Share a direct Dev Mode link with developers - Dev Mode is intended to involve the broader product team rather than isolate developers after design work is complete. ## Dynamic Annotations That Stay Current - Traditional annotations are manually created and quickly become outdated as designs evolve. - Figma explored connecting annotations directly to design properties so they update automatically when the underlying design changes. - Measurement indicators can also respond dynamically to layout or dimension changes. - Referencing actual variables and components from a design system reduces ambiguity and helps keep specifications aligned with implementation. - This approach supports the constantly changing nature of product development, where developers need visibility into ongoing design updates. ## Positioning Annotations Without Canvas Clutter - Manual annotations often force designers to move frames and rearrange the canvas to make room for notes and pointers. - Figma wanted annotations to remain visible to developers without consuming space in the design itself. - The proposed solution was to position and display annotations automatically. - This required handling complex interactions such as: - Zooming and panning - Scaling - Selecting and hovering - Minimizing annotations - Engineering worked through numerous prototypes and tuned the display logic to make automatically positioned annotations usable in practice. Figma’s approach treats annotations as a living, developer-oriented specification rather than static notes on a canvas. Connecting them to design properties and displaying them dynamically can reduce maintenance for designers while giving developers clearer, more reliable implementation context.

Dev Mode Figma Design Systems Accessibility+2

figmaJan 24, 20242 min readCurated summary

What’s next for Dev Mode: Annotations, Compare Changes, Plugins, and More | Figma Blog

Figma is moving Dev Mode out of free beta on January 31, 2024, while adding features designed to improve design-to-development handoff. The update introduces connected annotations, richer visual and code comparisons, customizable plugins, Jira integration, and a redesigned VS Code experience. Dev Mode will require a paid seat after the beta ends. ## Annotations for clearer handoff - Designers can add measurements, properties, specifications, and contextual notes directly to design layers. - Annotations update automatically when the associated design changes. - They appear or disappear at different zoom levels, keeping designs informative without cluttering the canvas. - Teams can use plugins to create and manage annotations in bulk. ## Visual and code-based change comparisons - The compare changes experience has been redesigned to show differences both visually and in code. - The Figma for Jira app brings design context into Jira issues. - Jira users can receive notifications when related designs change. ## Custom code generation with plugins - Codegen plugins let teams generate code for technologies such as HTML, React, Tailwind, and Bootstrap. - Organizations can customize generated output around their frameworks, design systems, component libraries, and internal APIs. - Plugins can validate design-system usage, link to documentation, and identify existing code components. - Enterprise administrators can pin plugins and configure them to run by default across organizational files. - Figma highlights custom implementations such as Razorpay’s RazorSharp plugin. ## Improvements to Figma for VS Code - The extension makes it easier to inspect designs without switching between tools. - A redesigned navigation experience replaces difficult canvas panning with a grid of frames. - Developers can open individual frames in a focused view. - Plugins can now run directly in VS Code, including private and customized tools. Teams using Dev Mode should prepare for the paid-seat requirement and evaluate annotations, plugins, Jira integration, and the VS Code extension to fit their existing handoff and design-system workflows.

Dev Mode Figma Design Systems Plugins+4

figmaDec 17, 20232 min readCurated summary

Figma and Adobe are abandoning our proposed merger | Figma Blog

Figma and Adobe jointly ended their proposed acquisition after 15 months of regulatory review, concluding that approval was no longer achievable. Although the merger was intended to accelerate both companies’ impact, Figma will remain independent and explore future partnerships with Adobe. CEO Dylan Field framed the decision as a renewed opportunity to pursue Figma’s original mission: helping people turn ideas into digital products. ## Why the Merger Was Abandoned - The companies spent thousands of hours addressing regulators’ concerns worldwide. - Despite explaining the differences between their businesses, products, and markets, they no longer saw a viable path to approval. - The decision was made jointly, ending the pending acquisition. ## Figma’s Progress During the Review - Figma continued shipping products despite the uncertainty surrounding the acquisition, including: - Native AI features for FigJam - Dev Mode for improving the handoff between designers and developers - Variables - Advanced prototyping - The company also: - Opened new hubs in the United Kingdom and Asia - Hosted Config 2023 in San Francisco - Acquired AI startup Diagram - Added more than 500 employees ## Figma’s Independent Direction - Figma will continue operating as an independent company. - The company remains focused on eliminating the gap between imagination and reality. - Field sees the growth of the digital economy and advances in AI as making this mission more urgent and attainable. - Figma aims to support the entire product-development process on a single multiplayer canvas, from ideation through production. Figma’s practical next step is to maintain its independent momentum, deepen its design-to-development platform, and use AI and collaboration tools to help more people build digital products.

Dev Mode Figma AI Prototyping+4

figmaDec 6, 20232 min readCurated summary

Top 10 things we shipped this year | Figma Blog

Figma’s 2023 product updates focused on helping teams design and build together, from major launches like Dev Mode and variables to smaller quality-of-life improvements. Rather than ranking features strictly, the company highlights updates that improve different stages of product development. The excerpt spotlights faster font selection and more powerful component exploration. ## A Year of Design-to-Development Improvements - Figma describes 2023 as a major year, marked by: - The largest Config conference to date - The launch of Dev Mode for developer-focused workflows - Variables and advanced prototyping - More than 200 product updates, including the “Little Big Updates” - The company emphasizes that small fixes and major features both meaningfully improve users’ work. ## New Serifs in Town - Font picker previews now appear directly on the canvas. - Users can hover over typefaces and immediately see how text will look without selecting each font. - This makes comparing typefaces faster and reduces friction when choosing typography. ## The Smart Play - The component details modal and playground are available from the assets panel. - Selecting an asset opens component information and provides a link to its main library. - On Professional plans and above, the playground lets users: - Preview component variants - Test component properties - Explore variable modes - These capabilities support quicker experimentation and easier iteration within the design workflow. Overall, the featured updates show Figma’s effort to improve both everyday design tasks and the broader collaboration between designers and developers.

Dev Mode Figma Design Systems Prototyping+3

figmaDec 6, 20233 min readCurated summary

Figma’s 2023 Handoff | Figma Blog

2023’s tensions—especially between rapid AI adoption and renewed human connection—reinforced Figma’s belief that collaboration is essential. The company frames its year-end “Handoff” as a reflection on how teams can work together more continuously, rather than treating work as a series of disconnected transfers. Its major launches, including Dev Mode and FigJam AI, are presented as tools for reducing barriers and making collaboration more inclusive and iterative. ## A Year Defined by AI and Human Connection - 2023 was characterized both by AI’s rapid expansion and by people reconnecting after the pandemic. - Figma argues that these developments are not necessarily contradictory: technology can support more meaningful human collaboration. - The company emphasizes that people need one another to interpret challenges and understand the world around them. ## Reimagining the Handoff - In American football, a handoff is a coordinated pass between teammates; in product development, it has often meant throwing work “over the wall.” - Designers and developers traditionally work from different perspectives, despite being deeply dependent on each other. - Figma advocates for “multiplayer” work: shared spaces where people can solve problems together and understand one another’s needs. - A successful handoff should be an ongoing conversation, enabling faster iteration and better products. ## Dev Mode and Developer Collaboration - Figma launched **Dev Mode** to provide developers with a developer-focused view of design files. - The feature is intended to give developers the information and tools they need at the appropriate stage of the workflow. - Figma describes Dev Mode as a way to eliminate the traditional handoff barrier and make design-development collaboration more continuous. ## AI as a Collaborator - Figma’s new AI features in **FigJam** are designed to accelerate ideation. - The goal is not to replace human interaction, but to make meetings and collaborative moments more productive and meaningful. - Figma connects this approach to “lowering the floor and raising the ceiling”: making products more accessible while expanding what experienced users can accomplish. ## The 2023 Handoff Collection The article introduces several additional reflections and features from Figma’s year, including: - The year’s top ten product launches - How product managers brought AI features to market - Questions for rediscovering enthusiasm for technology - Guidance for more effective meetings - New workplace vocabulary - Professional career pivots - The enjoyment and culture surrounding mechanical keyboards Figma’s practical conclusion is that strong collaboration requires more than efficient workflows. Teams need shared spaces, continuous dialogue, inclusive tools, and enough practice and collective experience to play to one another’s strengths.

Dev Mode Figma AI Figjam+2

figmaNov 21, 20233 min readCurated summary

Dev Mode: Building a Design Tool that Works Harder for Developers | Figma Blog

Figma built Dev Mode to make developers first-class participants in product design rather than secondary users of a designer-focused tool. The team initially emphasized code generation, but real-world differences in teams, workflows, and codebases exposed its limitations. By combining developer research, the acquisition of Visly, and a broader focus on inspection and collaboration, Figma shifted toward reducing the gap between design and code. ## Designing for Developers as Core Users - Figma’s multiplayer canvas was created for entire product teams, including product managers and developers. - Developers were already using Figma to explore work in progress, despite the tool not being optimized for their workflows. - By 2023, developers represented roughly one-third of Figma’s users. - The goal became a tailored developer experience that did not require developers to learn or navigate design-centric interactions. - Proposed directions included: - Component playgrounds - Code snippets - GitHub and Storybook integrations - Developer-specific resources - Design inspection and change comparison ## The Visly Acquisition - Figma acquired Visly in 2021, bringing in eight designers and engineers who had built a React UI development tool. - The Visly team contributed: - Extensive research into developer tooling - Practical experience with development workflows - A developer-oriented perspective and intuition - Their involvement accelerated Figma’s efforts and helped the company understand how developers work across different environments. ## Moving Beyond a Codegen-First Strategy - Early versions of Dev Mode focused on code generation: automatically translating designs into code according to predefined rules. - Codegen could save hours or even days when designs mapped cleanly to implementation. - Testing showed that successful code generation in controlled scenarios did not necessarily work in production. - Companies differ in their: - Team structures - Engineering practices - Toolchains - Codebases - Workflow conventions - These variations made it difficult to generate universally useful code, prompting the team to reconsider codegen as the central solution. ## Redefining Design-to-Code Handoff - Figma’s broader objective was to break down the traditional “handoff wall” between designers and developers. - Dev Mode was positioned as a dedicated space where developers could inspect designs, compare changes, work with VS Code, and access implementation-oriented information. - The team continued refining the product through beta feedback, including daily customer requests collected through an internal Slackbot. - Rather than assuming developers would live inside a design tool, Figma focused on making the parts of the design process they needed more accessible and useful. Dev Mode’s central lesson is that developer tooling must reflect real engineering practices, not just generate code from idealized designs. A practical developer experience combines accurate design context, collaboration, integrations, and workflow flexibility with code generation where it genuinely helps.

Dev Mode Figma React Github+3

figmaAug 21, 20233 min readCurated summary

Dev Mode fast follows: 200+ new features and fixes | Figma Blog

After two months of open beta, Figma released more than 200 Dev Mode features, improvements, and bug fixes based on over 5,000 pieces of community feedback. The updates improve design inspection, component workflows, code generation, file navigation, and integration with developer tools. Together, they make Dev Mode more practical for translating designs into implementation-ready code. ## New Dev Mode capabilities - Status labels can now be added to components, instances, and frames—not just sections—to indicate development readiness. - Layout grids, rulers, and outline mode are available through the View menu and familiar Design Mode shortcuts. - Detached components can be compared with their main components to identify differences. - Android XML and iOS UIKit have been restored as code-generation options. - The Inspect panel now supports the `UIColor` format. - Version history allows users to inspect previous design iterations. ## Usability and performance improvements - Components from external libraries display the library name. - Nested component properties and component modes, such as light and dark themes, are available in the component playground. - `rem` units can be applied specifically to text while other properties remain in pixels. - Multiple canvas objects can be selected and exported together using Shift-click. - Figma files and notifications can surface in VS Code through Figma’s VS Code integration. - Typography previews expose style name, font size, and line height, which can be copied directly. - Individual text portions can be inspected on the canvas. - The Layers panel can be resized vertically. - Figma suggests matching design-system variables when raw values resemble existing variables. - Values can be inspected as Figma properties as well as code snippets. - Source files such as images can be downloaded. - Alternative unit preferences are easier to find. - Section-level links are grouped by frame. ## Code-generation updates - Holding Shift copies all available code snippets at once. - CSS generation supports directional properties such as `padding-top` and `padding-left` when only one padding value is defined. - Snippets consistently include `font-style`, `line-height`, and `font-weight`. - Line height is shown in both percentage and pixel formats. - CSS codegen supports OpenType features including `font-feature-settings`, `font-variant-numeric`, and `font-kerning`. - Variables can be used for auto-layout constraints such as minimum and maximum dimensions and vertical gaps in wrapping layouts. - Text layers containing multiple styles generate separate CSS for each style. - The Figma Community now offers nearly 80 code-generation plugins, including tools for Tailwind, React, and Vue. ## Bug fixes and navigation - Users can switch between Design Mode and Dev Mode with tab navigation. - Alternative units now display correctly in hints and tooltips. - The release also includes additional fixes, including smoother handling of gradients in text. Figma’s fast-follow release shows that Dev Mode is being shaped around developer feedback. Teams using it should revisit their workflows and integrations to take advantage of improved inspection, code export, component exploration, and VS Code support.

Dev Mode Figma React CSS+4

figmaJul 23, 20233 min readCurated summary

The anatomy of launching a Figma open beta | Figma Blog

Launching a product is only the beginning of its go-to-market process. Figma used the two weeks after Dev Mode’s open beta launch as a coordinated research period to measure adoption, understand user sentiment, identify bugs, and prioritize improvements. The central lesson is to define success metrics and responsibilities before launch so teams can quickly turn feedback into product decisions. ## Post-launch work requires cross-functional ownership - Product, marketing, and support shared responsibility for evaluating Dev Mode. - The product team tracked feature usage. - Marketing monitored public sentiment and audience reach. - Support focused on bugs, requests, and potential improvements. - Product manager Avantika Gomes synthesized information from all sources, prioritized actions, coordinated follow-up, and guided iteration. - Constant communication ensured that important social posts and recurring user issues reached the broader team. ## Dev Mode as an open-beta test - Dev Mode is a Figma workspace designed specifically for developers. - It functions similarly to a browser inspector for design files, letting developers collect measurements, specifications, assets, and other information directly from the canvas. - The open beta provided free access to all Figma users through the end of 2023. - Figma used the beta to test whether Dev Mode addressed developer needs and to discover how it could be improved. ## Define metrics before launch - Feedback from developers and designers during the closed beta helped Figma refine core workflows, collaboration features, and newly identified needs. - The team selected a north star metric: the percentage of weekly active users in developer roles who used Dev Mode. - They also established benchmarks before launch, making it easier to judge whether results were strong or weak. - Prebuilt dashboards allowed the team to compare activity before and after the open-beta release. ## Measure adoption, reach, and user reaction - Figma tracked usage of individual features, including: - The Inspect panel - Compare changes - Related links - These measurements showed which capabilities were being adopted and which were most compelling. - To evaluate reach, the team monitored: - Social media impressions - Email open rates - In-product message impressions - Social sentiment and live audience reactions during Config helped reveal which features generated enthusiasm. ## Track problems through multiple feedback channels - Figma monitored Help Center article views to identify areas where users needed clarification. - In-product feedback submissions and support tickets provided direct reports of bugs and improvement requests. - Combining behavioral metrics with qualitative feedback helped the team understand not only what users did, but also where they struggled. The practical recommendation is to treat launch as the start of an intensive learning cycle: assign clear owners, establish benchmarks and dashboards in advance, and combine product analytics, public sentiment, and support data to guide rapid improvements.

Dev Mode Figma Design Tools User Research+3

figmaJun 20, 20233 min readCurated summary

Config 2023 in Review: The Complete Recap | Figma Blog

Figma’s Config 2023 announcements reposition the platform as a workspace for the entire product development team, not just designers. The major launches—Dev Mode, variables, and advanced prototyping—aim to connect design more directly with code, development workflows, and real product behavior. Supporting updates to auto layout, fonts, and file discovery further improve everyday work, while Figma also signals a major investment in AI through its acquisition of Diagram. ## Dev Mode Connects Design and Development - Dev Mode is a dedicated Figma workspace designed around developers’ needs. - It helps developers: - Translate designs into code more quickly. - Connect Figma to Jira, GitHub, Storybook, and other tools through plugins. - Track designs and changes that need to reach production. - Inspect Figma files alongside code in VS Code. - Dev Mode launched in beta and was available free through 2023. ## Variables Bring Design Systems Closer to Code - Figma introduced variables to make design systems more flexible and scalable. - Variables can store reusable: - Colors - Numbers - Text values - Boolean values - They support aliasing and scoping, allowing teams to organize and contextualize values. - Variable modes enable themes such as light and dark designs. - Plugin and REST API support allows teams to manage variables programmatically. - The goal is to connect design tokens and systems more directly with the code that implements them. ## Advanced Prototyping Makes Designs More Dynamic - Variables can now be used in prototypes to represent changing application state. - Designers can use mathematical expressions and conditional logic, such as: - Increasing a number variable after each click. - Navigating to different screens depending on a variable’s value. - These capabilities let teams test realistic interactions before development begins. - In-context editing and inline preview allow designers to edit and play back prototypes in the same view. ## Quality-of-Life Improvements - Auto layout gained wrapping and minimum/maximum width and height controls. - The font picker now supports search, filtering, and previews displayed in each font. - The file browser makes it easier to locate files and projects shared by external teams. ## Figma’s Investment in AI - Figma expects AI to help people express ideas visually, speed up workflows, and create strong first drafts. - The company argues that turning a good draft into a world-class product will still require human judgment and expertise. - Figma acquired Diagram, founded by Jordan Singer, to accelerate AI development across the platform. - Diagram had previously built AI-assisted design tools on Figma’s platform. Overall, Config 2023 presents Figma as a shared environment spanning design, prototyping, development, and increasingly AI-assisted creation. Teams should consider Dev Mode and variables as the most significant changes for improving handoff, design-system management, and collaboration with engineering.

Dev Mode Figma Design Systems Prototyping+4

figmaJun 20, 20233 min readCurated summary

Introducing Figma’s New Dev Mode | Figma Blog

Dev Mode is Figma’s dedicated workspace for developers, designed to reduce friction between design and implementation. It provides familiar inspection tools, customizable code output, integrations with development workflows, and an extension for VS Code. Figma’s broader goal is to keep designers and developers working from the same, up-to-date source of truth. ## A Developer-Focused Workspace - Dev Mode works like a browser inspector for Figma files. - Developers can inspect layers and designs to find: - Measurements and implementation specs - Exportable assets - Design-system context - Connections between visual elements and code concepts - The interface is intended to feel familiar to developers who use tools such as Chrome DevTools. ## Faster, More Flexible Code Handoff - Dev Mode’s code panel includes: - A CSS box model - Modern syntax and tree views - Configurable dimension units - Customizable output for different languages and codebases - Generated code is positioned as a starting point that reduces repetitive translation from design to implementation. ## Connecting Design to the Development Toolchain - Figma’s GitHub integration links designs and components with files, issues, and pull requests. - Plugins connect Figma to tools including: - Jira, Linear, and GitHub for project tracking - Storybook for viewing coded components alongside designs - AWS Amplify Studio, Google Relay, and Anima for code generation - Teams can also build custom plugins to match their own workflows. - Design tokens and variables further improve consistency between design systems and code. ## Tracking Work Toward Production - Dev Mode is intended to support the increasingly blurred boundary between design and development. - It helps teams understand what is ready for implementation and maintain context while designs continue to evolve. - Figma emphasizes collaboration around work that remains in progress rather than waiting for designs to be fully polished. ## Bringing Dev Mode into VS Code - The Figma for VS Code extension lets developers: - Review designs - View comments and notifications - Track design changes - Inspect designs without leaving the editor - Use design-based code autocomplete - This keeps design context inside the developer’s primary coding environment. ## Availability and Pricing - Dev Mode and the VS Code extension were announced as beta features, free to all users through the end of 2023. - Beginning in 2024, Dev Mode requires a paid plan. - Dedicated Dev Mode-only access was planned at: - $25 per seat per month on Organization - $35 per seat per month on Enterprise Figma presents Dev Mode as an initial step toward tighter designer-developer collaboration. Teams should use it alongside integrations such as GitHub, Storybook, and VS Code to keep specifications, implementation context, and feedback in one continuously updated workflow.

Dev Mode Figma Design Systems Github+4