figmaAug 13, 2026

How To Move Fast Toward the Right Thing | Figma Blog (opens in new tab)

AI has made software execution dramatically faster, but it has not made judgment easier. The article argues that teams must deliberately decide what is worth building, provide agents with strong context and constraints, and preserve a distinct human point of view. Otherwise, polished prototypes can create hidden tech debt and increasingly average products. ## AI Accelerates Execution, Not Clarity - AI can quickly produce polished, production-like outputs, but apparent polish may hide weak decisions and fragile implementation. - Large language models often fill in missing requirements themselves, causing prototypes to fail under real-world constraints. - **Cognitive surrender** describes accepting AI-generated decisions without scrutiny or independent deliberation. - Teams should follow a “consideration imperative”: pause to understand the problem and define the right outcome before accepting the first plausible solution. ## Context Has to Come First - Agentic engineering shifts developers from manually writing every line of code to expressing intent clearly and directing AI. - Effective intent requires: - **Deterministic layers**, such as tests, type checks, and validation, to catch model errors consistently. - **High-signal context**, including specifications and documented components. - **Clear interfaces**, so agents understand how systems and components connect. - Tools such as Figma MCP’s Code Connect can provide agents with real production components, including props and variants, rather than forcing them to infer implementation from pixels. - Investing in design systems and documented decisions gives agents a precise vocabulary and guardrails, producing more consistent output, leaner code, and less technical debt. ## Good Can Still Be Average - AI tends to generate work that resembles common patterns in its training data, or work that is “in distribution.” - Typical AI-generated results—geometric gradient logos, familiar presentation fonts, or rounded-corner cards—are competent but interchangeable. - When teams repeatedly accept adequate results, their judgment can narrow from asking “What should this be?” to choosing “Which option is least wrong?” - As AI raises the baseline of acceptable work, products can become unremarkable unless people deliberately define what makes them distinctive. ## The Point of View Needs to Be Yours - AI can improve execution, but it cannot replace a team’s responsibility to establish intent, standards, and a meaningful perspective. - Without a clear point of view, the model’s default assumptions determine both what gets built and how it looks. - Moving quickly is valuable only when speed is paired with careful consideration, strong context, and deliberate choices. Teams should treat AI as an execution partner—not as the source of product judgment. Define the problem, encode decisions in systems and safeguards, and challenge generic outputs before shipping.

reactaidesign-systemsllm+3

figmaAug 5, 2026

Better Code, Fewer Tokens: The Benefits of Code Connect in MCP | Figma Blog (opens in new tab)

Code Connect improves how coding agents translate Figma designs into production code by supplying real design-system components, imports, and prop values. Figma’s evaluations found that Code Connect reduced median task duration by 19.6%, lowered token usage by 29.5%, and increased code quality by one point on a 1–4 scale. The central conclusion is that better design-to-code context helps agents work faster while producing code that fits existing codebases. ## The Problem: Visually Correct but Technically Wrong Code - Without production context, agents often: - Rebuild interfaces from basic primitives. - Invent components that already exist. - Choose the wrong design-system component. - Spend extra tokens searching, debugging, and rewriting. - Figma’s MCP server normally provides a React representation of the design through `get_design_context`. - This output may match the visual design but does not explain how the design maps to a company’s actual component library. ## How Code Connect Enriches MCP Responses - Code Connect links Figma components to their real implementations in a codebase. - With Code Connect templates configured, MCP responses replace generic React markup with production-relevant snippets. - Agents receive: - Correct component imports. - Accurate component names. - Appropriate property values. - Code that reflects the company’s design system. - For example, generic markup for a tab control can be replaced with an existing component such as: ```tsx <SegmentedControl value="design" options={["Design", "Code"]} /> ``` ## Coinbase Case Study - Coinbase’s Design Systems team adopted Code Connect as engineers increasingly used coding agents. - Without Code Connect, agents sometimes fabricated alternatives, such as constructing a stepper from progress bars. - With Code Connect, agents received literal imports and accurate code representations for Coinbase Design System components. - Coinbase reported improved output quality and reduced token usage. ## Evaluation Results - Figma created an evaluation harness that ran identical design-to-code tasks: - Once without Code Connect. - Once with Code Connect templates. - The evaluation covered 27 test cases. - It measured: - Code quality. - Token consumption. - Task duration. - The tests used two React-based design systems: - Simple Design System (SDS), Figma’s example system. - Figma Pattern Library (FPL), a larger internal system. - Across the tests, Code Connect produced: - **19.6% lower median task duration** - **29.5% lower median token usage** - **A one-point increase in code quality on a 1–4 Likert scale** Teams using coding agents for design-to-code work should connect their Figma components to production implementations through Code Connect. Providing exact component context reduces guesswork and tokens while helping agents produce maintainable, design-system-compliant code.

reactdesign-systemstypescriptcode-connect+2

figmaJul 1, 2026

Building Accessibility Into a Canvas-Based Product | Figma Blog (opens in new tab)

Figma’s canvas-based rendering enables performance features such as infinite zoom and real-time collaboration, but it removes the browser’s built-in accessibility support. To restore that support, Figma built a synchronized “Mirror DOM” that represents the canvas in ordinary DOM elements for screen readers and keyboard users. The system combines an internal accessibility tree, React-rendered mirror elements, bidirectional selection syncing, and announcements for non-navigational changes. ## Why Canvas Requires a Different Accessibility Strategy - Figma renders designs on a canvas rather than with traditional HTML and DOM. - This improves performance but leaves the browser’s accessibility tree nearly empty. - Unlike a conventional web app with semantic elements such as `<button>`, `<p>`, and `<img>`, Figma’s canvas effectively has only one focus-holding `<input>`. - Without additional work, screen readers cannot navigate or meaningfully interpret the layers in a Figma file. ## Synthesizing an Accessibility Tree - Browsers normally derive an accessibility tree from the DOM, semantic HTML, ARIA attributes, and computed state. - Figma created its own internal accessibility tree to provide equivalent non-visual information for each design layer. - Each layer receives an accessible summary describing the role and content a screen reader should announce. - Summaries vary according to context: - In prototypes, editing-related layers can be omitted, while text and interactive roles are preserved for viewers. - In editing mode, structures such as autolayout frames need to remain available. - The tree is flattened by removing omitted nodes and connecting their relevant descendants. - Figma builds the tree initially, then applies surgical updates as documents change instead of rebuilding everything. ## Rendering the Mirror DOM - A recursive React component converts the internal accessibility tree into DOM elements. - Each component subscribes to accessibility data for one design layer and renders its role, label, and children. - React’s incremental updates help keep DOM changes minimal as the design changes. - The resulting elements are invisible to sighted users but available to assistive technologies. ## Synchronizing Canvas and Screen Reader Interaction - Figma maintains bidirectional synchronization between the visual canvas and the Mirror DOM. - Selecting a layer on the canvas moves focus to the corresponding DOM element. - When a screen reader user navigates the Mirror DOM, Figma updates the canvas selection accordingly. - This connects non-visual navigation with the editor’s visual state. ## Announcing Changes - A separate announcement system communicates changes that are not primarily navigational. - It reports actions such as nudging objects, switching tools, and other updates that would normally be apparent visually. - Together with the Mirror DOM, these announcements help screen reader users understand both the document structure and ongoing editor activity. Figma’s approach shows that accessibility can be rebuilt for canvas applications by maintaining a semantic representation alongside the rendering layer. Applications that prioritize canvas performance should provide a synchronized accessibility model rather than relying on the canvas itself to expose meaning to assistive technologies.

reactaccessibilityscreen-readersdom+3

figmaJun 29, 2026

Start Anywhere, a Magazine by Figma | Figma Blog (opens in new tab)

Figma’s 2026 *Start Anywhere* magazine explores how new tools are expanding the ways people begin and develop creative work. Its central argument is that as motion, code, and AI become more integrated into the design canvas, creative workflows are converging and becoming more expressive. Rather than prescribing one starting point, Figma encourages designers of all experience levels to choose an entry point and keep exploring. ## A Magazine About Design’s Changing Landscape - The magazine was created for Config 2026 by No Ideas, featuring work by several artists and designers. - Figma’s annual publication aims to capture what matters in design beyond rapidly changing product releases. - This year’s theme reflects the difficulty—and freedom—of writing about tools that evolve quickly. - The enduring principles are curiosity, patience, and understanding what something is before focusing on what it does. ## More Materials on the Canvas - Figma Motion introduces a timeline directly into the canvas, allowing designers to work with movement alongside components, variables, and collaborators. - Motion design principles remain important even as tools become easier to use: - Timing and mechanics give movement meaning. - Foundational craft helps designers make better creative decisions. - Code is also moving into Figma’s shared multiplayer environment. - Code layers allow teams to explore design and implementation side by side, making code a more direct part of the design process. ## The Design-to-Code Loop - As work moves fluidly between code and canvas, design and development workflows increasingly converge. - The magazine examines how this connected process can: - Enable faster experimentation. - Support multiple directions in parallel. - Improve collaboration between designers, engineers, and AI-focused teams. - Carry ideas more smoothly from early exploration into production. ## AI as a New Path from Idea to Product - AI tools are changing where product work begins and how ideas move through the development process. - The magazine presents examples from four organizations using AI in different ways. - These approaches suggest that AI can influence: - Ideation and initial exploration. - Product design and iteration. - The transition from design concepts to working software. - The continuity of ideas through production. ## Imagining Future Human–Computer Interaction - The “Future states” section asks what it might mean to reduce the gap between human and machine intelligence. - Contributors imagine software that interacts in more human-centered ways, including: - Interfaces that respond to users’ emotions. - Systems that help people anticipate the consequences of decisions. - New forms of interaction beyond traditional interfaces. ## Who the Magazine Is For - The publication addresses: - Beginners with ideas but no clear starting point. - Experienced practitioners looking for new creative possibilities. - Anyone who wants to produce effective design efficiently. - Its three covers represent different prompts and entry points into the same broader questions. The practical message is to start wherever the most interesting possibility appears—whether in design, motion, code, or AI—and continue iterating. The tools may change quickly, but curiosity and strong creative fundamentals remain useful across every workflow.

reactfigmaaidesign-to-code+1

figmaJun 24, 2026

Config 2026: New Materials, New Tools and a More Expressive Canvas | Figma Blog (opens in new tab)

Figma’s Config 2026 focuses on making the canvas a more expressive, collaborative environment where code, motion, shaders, generative plugins, and Weave tools work alongside traditional design layers. The company argues that code is a design material rather than a separate discipline, and that AI should support—rather than replace—human creativity. New features aim to let teams explore ideas faster while keeping design, implementation, and collaboration connected. ## Code Layers on the Canvas - Figma is introducing code layers, allowing any design layer to become an interactive code layer with one click or a prompt. - Teams can duplicate code layers and explore multiple directions side by side, just as they would with design frames. - Code layers support collaborative workflows including riffing, commenting, and iteration within the same Figma file. - Designers can extract code-generated designs back into editable design layers. - When changes are made to the design, a single click updates the corresponding code layer. - Early access is expected to begin in July 2026 through the Figma beta waitlist. ## Motion as a Core Design Material - Figma Motion brings animation directly into Figma Design, reducing the need to move between separate tools. - Its timeline includes keyframes, presets, and other controls for creating motion from scratch or adding animation to existing designs. - The Figma agent can generate an initial motion concept for designers to refine. - Motion can become part of a design system: an animation applied to a component can carry across screens and collaborators’ files. - In Dev Mode, developers can inspect the complete timeline, including timing values, easing curves, and keyframes. - Animation can be copied as CSS, JSON, or React-ready code. - Motion is MCP-compatible, allowing animated frames to be passed directly to coding agents. - Export formats include MP4, WebM, Animated SVG, and GIF, with additional formats planned. ## A More Unbounded Canvas - Figma describes the canvas as more than a place to store work: it is intended to connect ideas, tools, collaborators, and implementation. - The company’s broader Config strategy is to provide composable materials that let users experiment at the speed of their thinking. - Upcoming capabilities include shader fills and effects, generative plugins, Figma Weave tools, and expanded Figma agent functionality. - Figma argues that AI has lowered the barrier to creating, but people—not AI—will raise the creative ceiling through experimentation and bold expression. Figma’s direction is to unify design and development in one collaborative workspace. Designers and developers should use the new materials selectively: code layers for interactive exploration, Motion for reusable animation systems, and the canvas as a shared environment for rapid iteration from concept through implementation.

reactfigmagen-aimcp+3

figmaJun 24, 2026

Code on the Figma Canvas | Figma Blog (opens in new tab)

Figma is introducing code layers, making interactive code a collaborative object directly on the Figma canvas. Teams can generate, import, compare, edit, and convert code and designs in both directions, bringing designers and developers into one shared workflow. The feature aims to make experimentation and design-to-code iteration more visual, collaborative, and accessible. ## Creating and Sharing Code on the Canvas - Users can add a code layer from Figma Design, convert an existing frame into code, or ask the Figma agent to generate an implementation. - Projects can begin from templates, natural-language prompts, imported GitHub repositories, or uploaded local folders. - Code generated in Figma Make can be brought into Figma Design as a code layer. - Interactive code becomes part of the shared file, allowing teammates to inspect, comment on, and refine it together. ## Exploring Multiple Alternatives - Code layers work like duplicated design frames, allowing teams to explore several working alternatives side by side. - Designers can move, resize, and adjust elements while seeing the corresponding code update immediately. - Prompts can generate new versions while preserving the original. - Teammates can collaborate on the same code layer through comments and additional prompts. ## Moving Between Code and Design - The **Extract designs** feature converts a code layer’s current state into editable Figma layers. - Teams can extract a single screen, a particular state, or an entire user flow. - Design edits can then be applied back to the code layer, enabling fluid movement between visual design and implementation. ## Editing and Shipping Code - Users can open the code editor, annotate desired changes, ask the agent to implement them, or edit the code manually. - Once approved, the updated implementation can be converted back into a code layer and pushed to the project repository. - The resulting changes remain visible to the wider team on the Figma canvas. ## Availability - Code layers are rolling out in closed beta over the following weeks. - Interested users can request early access through Figma’s Config beta sign-up. Figma’s code layers are intended to make the canvas a shared space for designing, testing, and refining real interfaces. Teams interested in combining visual collaboration with AI-assisted development can request beta access and evaluate the workflow against their existing design and repository processes.

reactfigmaai-agentgithub+2

figmaMay 22, 2026

7 Tips for Using Figma Make Credits More Efficiently | Figma Blog (opens in new tab)

Figma argues that efficient AI prototyping is less about writing longer prompts and more about setting up projects carefully, limiting changes, and knowing when to edit manually. The first prompt should establish a strong foundation, while follow-ups should describe precise deltas. For minor visual or code changes, direct editing is often faster and cheaper than another AI request. ## Build a Strong First Prompt - Treat the initial prompt as a complete project brief. - Include: - The project goal and context - Key elements and behaviors - Constraints and exclusions - A clear definition of what “done” means - Use follow-up prompts as deltas that explain: - What should change - How it should change - What should remain unchanged - For larger projects, work in stages: - Establish the structure first - Add logic and behaviors - Refine content and visual polish afterward - Keep follow-ups tightly scoped. Combine requests only when they affect the same component or logic. - Specific instructions such as “Update the calendar component” or “Edit `tokens.ts`” are more efficient than vague requests like “Redo it.” ## Prefer Manual Edits for Small Changes - Use Figma Make’s **Edit tool** for minor adjustments such as: - Changing spacing - Removing an element - Adjusting text - Direct edits avoid spending credits on changes that do not require a new design solution. - Use **Go to source** when the relevant value is dynamic or unavailable in the preview. - Press **⌘F** to search the code for a specific tag or data source. - Start with `App.tsx`, then inspect other `.tsx` files in the component folder if necessary. - Direct source editing is particularly useful for repeated components or content populated from lists.

reacttypescriptfigma-makeui-ux+3

figmaMay 12, 2026

What the Design-to-Code Loop Unlocks | Figma Blog (opens in new tab)

AI is bringing design and engineering into a more continuous, bidirectional workflow. Instead of treating code as an expensive final step, teams can use functional prototypes, editable designs, and AI assistance to explore behavior and visuals together. The result is broader participation, faster learning, and a shift from mechanical translation between design and code toward more semantic collaboration. ## AI Makes Code Part of Design Exploration - Code was traditionally costly and difficult to revise, while design allowed cheap, broad exploration. - AI reverses that relationship by making functional wireframes easier to create and iterate. - Designers can explore interaction and behavior—not just static layouts—then move work between code and canvas. - AI can translate between the two mediums in a way that preserves intent and structure rather than simply converting files or syntax. ## A More Bidirectional Collaboration Model - Code-based workflows tend to move in one direction and are often constrained by the patterns already present in a codebase. - Figma’s canvas gives teams space to reconsider assumptions and explore radically different directions. - Designers and developers can work from the same evolving artifact instead of repeatedly handing work off. - AI lowers participation barriers: people without access to an internal design system can import a live product into Figma as editable frames and begin contributing. ## Lower Learning Curves for Designers and Developers - AI turns steep technical learning curves into gradual ramps by providing a capable starting point. - People can learn frameworks, routes, React, and other concepts in the context of real work rather than abstract exercises. - Designers can extend beyond previous technical limits into areas such as shaders, 3D, and custom tools. - Deeper specialization remains possible, but the initial investment is much smaller and learning becomes more contextual. ## Curiosity as the New Differentiator - When AI tools become broadly available, access to technology alone is less likely to distinguish practitioners. - Curiosity and taste become more important: people who actively experiment can discover new possibilities. - AI functions as a patient tutor, reducing the friction of learning tools, frameworks, syntax, and development environments. - Staying effective requires continually exploring what can be built rather than relying only on existing technical expertise. The design-to-code loop is therefore less about replacing designers or developers and more about making experimentation and collaboration accessible across disciplines. Teams should treat AI as both a creative medium and a learning partner, moving freely between canvas and code while preserving room to question the initial direction.

reactfigmadesign-systemsgen-ai+2

figmaApr 2, 2026

Build With More Context and More Control in Figma Make | Figma Blog (opens in new tab)

Figma’s Make kits and Make attachments add structured context to AI-generated prototypes, helping them start closer to production reality. Make kits provide design-system guidance through code packages, libraries, styles, and tokens, while attachments bring in project-specific data and requirements. Together, they reduce cleanup and make generated designs more consistent with how products are actually built. ## Make Kits Teach Make About the Design System - Make kits are reusable packages that combine components or styles with guidelines explaining how they should be used. - They can use: - JavaScript components from public npm packages - Packages from Figma’s secure private registry - Styles and design tokens from Figma libraries - Guidelines tell Make not only which components exist, but also how to apply them. - Instead of starting with generic UI and repeatedly correcting spacing, patterns, and components, Make can begin with production-aligned structures. - This helps: - Maintain consistency across forms, dashboards, settings, and onboarding - Let teams generate work in parallel without drifting from the design system - Reduce preparation and correction before review - Engineers can more easily recognize familiar components and focus on evaluating the proposal rather than translating it into their system. - Figma plans to expand kits to represent more design-system structure, including component structures from Figma libraries. ## Make Attachments Ground Prototypes in Project Context - Design systems do not capture every project-specific constraint, such as: - Real data - Migration requirements - Edge cases - Compliance rules - Legal copy and content - Make attachments allow users to provide source material directly instead of describing everything in a long prompt. - Supported materials include: - PDFs and Markdown files - CSV and JSON datasets - Screenshots and images - Brand guidelines - Legal copy - Media and SVG files - Code and other project assets - Attachments help Make create prototypes that reflect actual data, validation states, content, and requirements rather than producing an idealized version that omits complexity. - For example, an onboarding flow can be grounded in real user data, complete legal requirements, and multiple validation states instead of shortened copy and simplified edge cases. ## A More Production-Aligned Starting Point - Make kits provide the reusable design and code foundation. - Attachments add the details and constraints unique to a specific project. - The combination is intended to shorten the distance between an AI-generated prototype and a shippable product, allowing teams to spend less time rewriting and more time refining the experience.

reactdesign-systemsjavascriptfigma-make+3

figmaOct 5, 2025

Turn Your ChatGPT Brainstorms Into FigJam Diagrams | Figma Blog (opens in new tab)

Figma’s new ChatGPT app turns brainstorms, sketches, uploaded files, and technical documents into editable FigJam diagrams. It supports flowcharts, sequence and state diagrams, and Gantt charts, helping users move quickly from exploration to collaborative artifacts. The feature is powered by Figma’s remote MCP server and is available to logged-in ChatGPT users outside the EU. ## Turning Conversations into Diagrams - Users can mention Figma in a prompt, such as “Figma, make a diagram from this sketch.” - ChatGPT can recommend the Figma app when diagramming is relevant. - Photos, drawings, PDFs, and other files can provide context. - Generated diagrams can be revised, expanded, or represented in alternative formats. - Figma plans to add more diagram types over time. ## Accelerating Design Iteration - Hand-drawn sketches can become shareable FigJam files. - Designers can ask ChatGPT to update diagrams or explore different visualizations. - Dense documents can be uploaded so ChatGPT can produce an initial draft. - This helps teams move ideas from informal notes or whiteboards into a collaborative workspace. ## Clarifying Technical Systems - Developers can use uploaded documentation and screenshots to create or update software architecture diagrams. - ChatGPT can research technical approaches using blogs and case studies, then visualize them. - Screenshots, such as a pricing page, can be used to map likely React component structures. - The resulting diagrams support system design discussions, technical communication, and interview preparation. ## Planning Products and User Experiences - Product managers can visualize tradeoffs, such as simplicity versus power in a permissions flow. - PRDs can be converted into user journey or process flowcharts. - Product, engineering, and design requirements can be combined into Gantt charts for launch planning. - ChatGPT supports individual exploration, while FigJam enables teams to review and iterate together. The feature is currently live for logged-in ChatGPT users outside the EU. It offers a practical workflow for using ChatGPT to generate a first visual draft and FigJam to refine, discuss, and collaborate on it.

reactfigmafigjamchatgpt+4

figmaJun 24, 2025

Canvas, Meet Code: Building Figma’s Code Layers | Figma Blog (opens in new tab)

Figma’s code layers bridge visual design and web development by making React code behave like editable objects on the Figma canvas. They preserve the canvas’s flexibility—moving, resizing, nesting, duplicating, and comparing layers—while enabling advanced interactions, APIs, shaders, and forms. The approach combines a new canvas primitive, an integrated web IDE, AI-assisted coding, and multiplayer collaboration. ## Reconciling Design and Code - Figma’s canvas is spatial, flexible, and designed for rapid experimentation. - Code is traditionally organized in a hierarchical filesystem with strict syntax and structure. - This difference raises workflow questions about duplication, source of truth, and how canvas objects should map to files. - Figma identified three major challenges: - Integrating code layers with Figma’s existing ecosystem and components - Building an accessible but powerful browser-based IDE - Supporting collaboration between designers and developers ## Code as a Canvas Material - Code layers are implemented as a new Figma canvas primitive. - Like regular layers, they can be: - Moved, resized, and reparented - Nested inside frames - Used in layouts and components - Duplicated and arranged side by side - Option-dragging creates a fork of the source code, making experimentation comparable to creating Git branches but faster and more visual. - Figma chose React because its reusable component model aligns with Figma components. - React props connect to Figma component properties, allowing users to edit code-defined values through visual controls such as toggles, sliders, and dropdowns. ## AI and Direct Code Editing - Code layers can be created and modified using AI, including the model behind Figma Make. - Users can also edit the underlying code directly when they need complete control. - Designs can be converted into code layers with a single click, after which developers or designers can add behavior and interactivity. ## A Web-Based IDE - Figma built an integrated coding environment rather than requiring users to leave the canvas. - The editor uses CodeMirror as its extensible foundation. - CodeMirror supports features including: - Syntax editing and extensions - Themes - Find-and-replace - Line numbers - Figma customized default editor behavior to fit its own systems, including replacing CodeMirror’s undo and redo with Figma’s multiplayer-aware undo stack. Code layers are designed to make code feel like another creative material: structured enough for developers, but flexible enough to support the visual experimentation that defines Figma’s canvas.

reactmultiplayer-collaborationcode-editorcodemirror+2

figmaJun 16, 2025

Make your site interactive with code layers | Figma Blog (opens in new tab)

Figma’s new code layers let designers add custom React-powered interactions directly within Figma Sites. They bridge the gap between static canvas designs and production-like experiences by combining AI-assisted coding, direct code editing, and reusable components. The feature is intended to make advanced interactions—such as drag-and-drop systems, animations, calculators, maps, shaders, and 3D effects—accessible without external developer support. ## Customizing Existing Designs - Code layers extend Figma Sites’ built-in responsive elements and interactions. - Designers can convert an existing element into a code layer through the Figma Make icon in the Design panel. - AI chat can then generate or modify behaviors such as: - Spinning or bouncing animations - Animated counters and text effects - Loan calculators and price estimators - Hover effects, ripples, and color changes - Code layers can be duplicated with **Command D** to create and compare multiple interaction variations. - Example use case: a flower shop could let visitors duplicate, drag, rotate, and layer flower images to create custom bouquets. ## Creating Code Layers from Scratch - Designers can use the Make tool or press **E** to draw a standalone code layer on a blank canvas. - A modal opens for generating the layer through AI prompts or writing code directly. - Suggested prompts and starter components—such as buttons, image galleries, and navigation menus—provide ready-made starting points. - These components can be used as-is or customized to match an existing design. ## Reusable and Extensible Components - Code layers support customizable properties, including strings, numbers, and references to other components. - AI can generate these properties automatically, or users can request specific controls. - A code layer can be converted into a reusable Figma component for use across pages, projects, and team design systems. - Designers can import npm packages such as `motion` and `@react-three/fiber` to add advanced animation, 3D rendering, and other functionality. ## Code Layers Compared with Figma Make - **Figma Make** is suited to building a functional app from a prompt without relying heavily on precise canvas design. - **Code layers in Figma Sites** are designed for adding custom interaction and motion to an existing visual design. - Together, the tools support both prompt-first development and design-first experimentation. Code layers are available to all Figma Sites users, offering a practical way to prototype and publish richer web experiences directly from the Figma canvas.

reactaiprototypinginteraction-design+4

figmaApr 15, 2025

Version Control: Three Ways Figma Explored Horizontal Scrolling | Figma Blog (opens in new tab)

Figma’s request for horizontal scrolling in the Layers panel exposed significant design and engineering complexity. The panel contains interactive, virtualized layers whose names and nesting change dynamically, so scrolling could easily obscure hierarchy or disrupt users’ mental models. Through three unshipped prototypes, the team learned that preserving context and preventing accidental actions mattered more than applying seemingly simple scrolling behaviors. ## Why Horizontal Scrolling Was Difficult - Nested layers can extend beyond the panel, requiring users to move horizontally to see their full hierarchy. - Layers are interactive: users can hide, lock, collapse, and expand them while scrolling. - Virtualization renders only visible layers for performance, meaning newly visible rows may have different text lengths. - The design needed to communicate that more content existed without making the hierarchy harder to understand. - Code-based prototyping with JavaScript, HTML, CSS, and React helped the team test behavior across thousands of layers and complex interactions. ## Version One: Indicators at the Panel Edges - The team explored showing icons at the top-left and bottom-right edges when layers moved out of view. - This symmetrical treatment was intended to help users understand their position in the hierarchy. - Engineering challenges arose because edge icons needed opaque backgrounds that covered layer text while scrolling. - Layer rows did not have enough positional knowledge to determine which areas should be covered or revealed. - The design also created a ragged edge where partially visible layer names ended, introducing visual clutter. - The experiment demonstrated that a symmetrical solution could create new problems, particularly around unused white space. ## Version Two: Automatically Scrolling to Selected Layers - Another prototype automatically scrolled the Layers panel to center a layer selected on the canvas. - Although this made the selected layer easy to find, it often moved the panel both vertically and horizontally. - Testers found the behavior disorienting because parent layers and surrounding context disappeared. - Figma compared the experience to a map suddenly jumping to another location while driving. - The team concluded that users need to retain their mental model of a layer’s name, location, and relationship to parent components. ## Version Three: Renaming Layers While Scrolling - Horizontal scrolling created ambiguity when a user began editing a layer name and then scrolled to another layer. - One possible behavior was to save the edited text automatically when scrolling away. - The team rejected this because scrolling was not a strong enough signal that the user intended to confirm the rename. - The issue highlighted the need to avoid turning navigation actions into irreversible edits. Figma’s experiments show that horizontal scrolling in a dynamic hierarchy is not merely a visual or mechanical feature. The best solution must preserve orientation, context, and user control while handling virtualization and interactive layer states.

reactfigmaui-designjavascript+4

figmaJun 25, 2024

Why Are We So Afraid Of Code As A Commodity? | Figma Blog (opens in new tab)

AI may commoditize code production, including language translation and design-to-code workflows, but that does not eliminate the need for engineers. The article argues that engineering’s lasting value lies in identifying the right problems, understanding users and constraints, and designing elegant, maintainable systems. AI should therefore be viewed less as a threat and more as a tool that expands creativity and shifts engineers toward higher-level decision-making. ## Code Generation Is Not the Same as Engineering - AI can increasingly: - Translate between programming languages, such as Python and C++. - Generate code more efficiently. - Convert designs into implementations using frameworks such as React, TypeScript, Kotlin, and Jetpack. - Design-to-code is comparable to translating between programming languages because modern design tools already represent designs in structured, code-like forms. - Producing code is only one part of engineering. Engineers must also: - Decide which problems are worth solving. - Choose appropriate solutions. - Create abstractions for reasoning about complex systems. - Balance correctness, simplicity, context, and constraints. - Framework-specific expertise becomes less valuable over time than first-principles reasoning about the common ideas underlying different platforms. ## The Art and Creativity of Engineering - AI is expected to automate rote work, potentially freeing engineers to focus on more creative activities. - There are often many viable ways to build a system; AI may expose additional approaches that engineers would not have considered. - Engineers remain responsible for evaluating tradeoffs among those options. - Technical implementation is presented as a creative discipline in which constraints can inspire better solutions and product decisions. ## Embracing Shifts in Engineering Roles - Engineering work begins before coding: - Teams discuss user needs. - They triage problems. - They align on what to build and how to approach it. - As AI handles more low-level implementation, coding will represent a smaller portion of an engineer’s responsibilities. - Engineers will spend more time prioritizing, aligning teams, interpreting context, and making product and system-level decisions. - The abstraction level of software development is rising as AI takes responsibility for increasingly lower-level parts of the technology stack. ## What AI Will Not Commoditize - AI still struggles to fully understand: - What users actually need. - The context surrounding a problem. - Conflicting constraints and product priorities. - How to compose intuitive, maintainable systems. - Engineers will continue to add value by reasoning from first principles and solving technical challenges from the ground up. - The central question is not whether AI automates design-to-code, but how engineers use that automation to work faster and explore better solutions. The practical recommendation is to embrace AI for repetitive implementation work while developing the higher-level skills that remain difficult to automate: problem selection, user understanding, system design, tradeoff analysis, and creative technical reasoning.

reactgen-aitypescriptdesign-to-code+2

figmaApr 15, 2024

What We Launched at Framework 2024 | Figma Blog (opens in new tab)

Figma’s Framework 2024 launches focus on increasing design-system adoption across organizations. The central argument is that creating a system is only half the challenge; teams must also make it useful and accessible to developers and other stakeholders. Code Connect, typography and gradient variables, and the Design System Analytics API are presented as tools for bridging design and code, improving consistency, and measuring adoption. ## Design System Adoption as the Central Challenge - Design systems have become more powerful and sophisticated, but that complexity can make organizational adoption harder. - Figma emphasizes that successful systems require more than components and documentation—they need an adoption strategy. - The new releases build on earlier updates such as variables, theming, state management, advanced prototyping, and Dev Mode. - Figma frames design-system advocacy partly as a marketing problem: teams must persuade designers and developers to use the system consistently. ## Code Connect Bridges Design and Code - Code Connect brings production-ready code snippets directly into Figma’s Dev Mode. - Developers can find the implementation for a design-system component without searching through separate documentation. - Copying the relevant snippet is intended to reduce inconsistencies and make the design-to-code process faster. - The beta supports React, iOS, and Storybook, with additional frameworks and platforms planned. - Bumble, GitHub, and HP shared their design-system challenges and early experiences with Code Connect. ## Typography and Gradient Variables Expand Token Coverage - Figma describes typography as an essential part of a complete design system that was previously difficult to represent with variables. - Typography variables allow teams to define font scales once and apply them consistently throughout a product. - They can support platform-specific adjustments and accessibility goals, including WCAG-compliant type scales. - Gradient variables, introduced alongside typography variables, further align Figma variables with the range of design tokens teams need. ## Analytics for Measuring Adoption - Figma also announced the Design System Analytics API, referred to in the introduction as the Library Analytics API. - The API is intended to help design-system teams understand usage across an organization. - By measuring adoption, teams can identify where systems are being used effectively and where additional education, improvements, or outreach may be needed. Figma’s overall recommendation is to treat a design system as an organizational product: provide developers with usable code, cover essential tokens such as typography and gradients, and use analytics to guide adoption efforts.

reactfigmadesign-systemsdesign-tokens+3