Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

Figma528 Design Systems246 User Experience140 Prototyping135 AI110 Figjam98 Product Design76 User Interface63 Generative AI47 Collaborative Design47 Accessibility41 React39+1265

figmaJul 3, 20262 min readCurated summary

7 Questions We Had Going Into Config Leadership Collective | Figma Blog

The post captures lessons from Figma’s Config Leadership Collective, where more than 1,300 design, product, and engineering leaders discussed leading through AI-driven change. Its central argument is that successful leadership depends less on rigid processes or tool expertise and more on adaptability, human-centered design, judgment, collaborative teams, and supported experimentation. ## Leading Change Through Experimentation - Leaders are learning alongside their teams as AI rapidly changes established workflows. - Rather than adopting fixed processes, they emphasize adaptability and continuous adjustment. - Executives are experimenting directly with new tools, prototyping ideas, and sharing failures. - Teams need permission to explore, take risks, and remain enthusiastic even when experiments fail. ## Preserving Human-Centered Design Fundamentals - AI has changed methods, but core principles remain important: - Understand users and their workflows. - Continue prioritizing craft and quality. - Design for people rather than simply following new tools. - Leaders warn against “chasing the tool” at the expense of human needs and thoughtful design. ## Expertise Is Moving Toward Judgment - AI can increasingly handle execution and task completion. - Human expertise is becoming more valuable in higher-order activities such as: - Taste - Discernment - Contextual decision-making - Evaluating and editing AI-generated work - Expertise now means selecting the best answer for a particular situation, not simply knowing a single correct answer. ## Restructuring Teams for the AI Era - AI is blurring traditional boundaries between design, product, engineering, and other disciplines. - Airbnb is organizing work into small, self-contained pods that resemble startups. - These pods combine core product roles with perspectives such as data science or business expertise. - Strong editing judgment, diverse viewpoints, and constructive disagreement are treated as essential. - Effective teams should be scrappy, vocal, ambitious, and willing to challenge one another. ## Helping Teams Adopt New Tools - Adoption requires education, infrastructure, and psychological safety—not just instructions to use AI. - Expedia is building dedicated support and training to help employees become fluent with AI tools. - OpenAI recommends starting with small, low-risk tasks instead of imposing large automation programs from the top down. - A simple use case, such as summarizing a long Slack thread, can demonstrate value and encourage broader adoption. The practical recommendation is to lead AI adoption as an ongoing learning process: experiment personally, preserve user-centered standards, hire for judgment and curiosity, build cross-functional teams, and introduce tools through manageable, well-supported steps.

AI User Experience Prototyping Product Design+2

figmaJul 2, 20262 min readCurated summary

Issue no.17: Build with joy | Figma Blog

Figma’s Issue No. 17, “Build with joy,” celebrates the creative motivation behind making things: turning a vision into reality. Inspired by Config 2026, it presents tools, ideas, and stories that encourage designers to explore their own paths while developing stronger creative judgment. The central message is that tools help, but care, taste, and a clear point of view ultimately shape meaningful work. ## Config 2026 and Choosing Your Own Path - Figma introduces new tools and materials for its canvas, enabling teams to extend existing workflows and move faster. - The accompanying Config magazine uses a choose-your-own-adventure format, allowing readers to explore topics in any order. - Its broader focus is how teams are adapting established processes to reach new creative and professional goals. ## Cultivating Taste - Chief Design Officer Loredana Crisan defines taste as more than recognizing quality; it also involves sustaining the energy and care required to achieve it. - Her experience playing music helped shape her understanding of creative judgment. - The article emphasizes that taste develops continuously through practice, attention, and a strong point of view. - Crisan identifies care for the user, the craft, and the final result as essential qualities. ## Motion as Design in Time - Figma’s Brand Studio offers an introduction to motion design. - Motion is framed as the combination of design and time, with timing and movement affecting how an idea is perceived. - Small distinctions—such as whether an animation feels like a “whoosh” or a “whoop”—can significantly change its character and meaning. ## Color as Cultural Language - Pantone’s color experts explain how colors acquire cultural associations and influence behavior. - Familiar examples include Coca-Cola red, Barbie pink, and Brat green. - Brands use color to create meaning, communicate identity, and help drive cultural trends. - Color is presented not merely as decoration, but as a system of shared social and emotional signals. ## Further Exploration - Dylan Field recaps Config 2026 and the new dimensions Figma is bringing to its canvas. - Figma’s community imagines future software, including systems that respond to moods and tools that predict what comes next. - The latest Figma merchandise collection follows eight illustrators from initial sketches through production. Figma’s recommendation is ultimately to build with curiosity and joy: use new tools as a starting point, but rely on care, experimentation, and cultivated taste to determine what is worth making.

Figma Design Systems Motion Design Color Theory+1

figmaJul 1, 20263 min readCurated summary

Building Accessibility Into a Canvas-Based Product | Figma Blog

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.

React Accessibility Screen Readers Dom+3

figmaJul 1, 20263 min readCurated summary

Got Skills? Make the Figma Agent a Better Collaborator | Figma Blog

Figma’s custom skills turn team knowledge and workflows into reusable instructions for the Figma agent. They complement design systems by adding guidance such as brand voice, critique methods, writing standards, and review processes. Figma’s experience suggests that any repeated task or team-specific judgment can become a shared skill that improves consistency and collaboration. ## Custom Skills Capture Team Expertise - A skill is a reusable set of plain-English instructions for the Figma agent. - Skills can be triggered in chat with a forward slash (`/`). - Teams and organizations can publish skills so members do not have to recreate prompts or explain workflows repeatedly. - They are particularly useful for practices that are easy to use but difficult to document and often exist only in someone’s head. ## A Second Opinion on Demand Skills can provide focused critique and help teams apply shared standards. - **Simulate stakeholder feedback:** Figma created a skill based on CEO Dylan’s comments, allowing designers to pressure-test work before a review. - **Apply UX writing standards:** A skill based on Figma’s style guide checks capitalization, punctuation, and other consistency issues. - **Review work as a new user:** The agent can assess an experience from a first-time user’s perspective, exposing friction and missing context that experts may overlook. - Design systems supply components, patterns, and UI elements; skills add broader team expertise such as compliance rules, product principles, and critique frameworks. ## Build Once, Use Everywhere Repeated team rituals are strong candidates for automation through skills. - **Catch-me-up:** Summarizes recent file or project activity so returning teammates can quickly understand what happened without searching comment threads. - **Crit preparation:** Interviews the designer about the project, persona, scope, and audience, then creates a critique page with guided discussion prompts. - Figma’s crit-prep skill draws on Nielsen Norman Group best practices to encourage more effective research questions. - **Crit recap:** Organizes feedback into themes, decisions, action items, and deferred items. - Recaps can be placed on the canvas or copied into Slack, helping preserve decisions and keep follow-up work visible. ## Connecting Existing Tools The article begins describing how skills become more powerful when they can draw on the tools a team already uses, suggesting that skills can connect workflows and information across the organization. The provided excerpt ends before giving the specific examples or implementation details. Teams should start by identifying repeated tasks, recurring meetings, or expert review processes and turn those into shared slash-command skills.

Figma Design Systems AI Agents Accessibility+2

figmaJul 1, 20262 min readCurated summary

Trust You Can Verify: Figma Is Now ISO 42001 Certified | Figma Blog

Figma has achieved ISO/IEC 42001:2023 certification, making its AI governance independently verifiable rather than based solely on company assurances. An ANAB-accredited certification body, Schellman, audited Figma’s policies, risk management, data practices, and AI development processes. The certification is intended to give customers—especially regulated organizations—stronger evidence for vendor assessments, regulatory reviews, and board reporting. ## Why Independent Verification Matters - Vendors can describe their AI controls through questionnaires, whitepapers, and documentation, but those materials remain self-reported. - ISO 42001 requires an accredited third party to evaluate whether an organization’s AI management system meets an international standard. - Figma says this provides more reliable evidence than simply claiming to practice responsible AI governance. ## Scope of Figma’s Certification - The certification covers the AI Management System governing how Figma designs, develops, and operates AI features. - It applies across: - Figma Design - Figma Make - FigJam - Dev Mode - Figma Sites - Figma Slides - Figma Draw - Figma Buzz - Figma Weave ## What the Audit Evaluated - The audit took place in two stages: - **Stage 1:** Reviewed the design of Figma’s AI Management System, including documentation, policies, and risk methodology. - **Stage 2:** Tested operational effectiveness through staff interviews, process observation, and control evaluations. - Auditors assessed 38 controls across nine areas: - AI impact assessment - Governance and accountability - AI-specific risk management - AI system lifecycle management - Data governance - Third-party AI risk - Monitoring and performance evaluation - Human oversight - Responsible use of AI systems - Figma emphasizes that the certification validates implementation, not merely the existence of written policies. ## Relevance for Customers - The certification gives customers evidence they can reference in: - Vendor risk assessments - Board reporting - Regulatory submissions - AI procurement processes - It is particularly relevant to financial services, healthcare, insurance, and public-sector organizations with strict security, privacy, and regulatory requirements. - Figma connects the certification to the EU AI Act and emerging procurement standards, which increasingly require demonstrable governance rather than vendor promises. ## Ongoing Commitment - Figma plans to continue submitting its AI governance practices to independent verification as its AI capabilities evolve. - Its certificate and broader compliance documentation are available through `compliance.figma.com`. - The certificate can also be verified through Schellman’s directory, and Figma says it will update its documentation when governance changes affect customer risk assessments. ISO 42001 certification represents a baseline for Figma’s ongoing AI governance efforts, giving customers independently audited evidence they can use when evaluating the company’s AI products.

AI Data Governance Ai Governance Security Compliance+3

figmaJun 29, 20263 min readCurated summary

Start Anywhere, a Magazine by Figma | Figma Blog

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.

Figma AI React Design To Code+1

figmaJun 29, 20262 min readCurated summary

Meet the Artists Behind Figma's Season 5 Collection | Figma Blog

Figma’s Season 5 merchandise collection was created with eight artists from around the world, each bringing a distinct creative voice. Organized around play, iteration, and hands-on tools, the collection embraces experimentation, imperfection, and unexpected character. The result is an eclectic range of apparel and accessories featuring playful illustrations and tactile, artistic styles. ## Collection Themes - **Play:** Making freely without overthinking. - **Iteration:** Allowing ideas to develop through repetition and refinement. - **Tools:** Celebrating the physical process of creating by hand. - Figma’s Brand Studio selected artists whose existing work reflected these ideas. - The collection debuted at Config, Figma’s annual conference for product makers. ## Quentin Chambry: Repetition and Spontaneity - **Based in:** Tokyo, Japan - **Influences:** Skateboarding, street culture, graffiti, Japanese ceramics, and Tokyo pop culture - **Tools:** Black marker and white paper - Quentin fills hundreds of pages in a session, repeating movements until unexpected shapes emerge. - Using marker rather than pencil prevents erasing, making the process more immediate and exciting. - His designs include smiling figures and cubes featured on shirts, hats, and sweatshirts. - The work reflects play through exploration, editing, and accepting imperfections. ## Meazo: Childlike Creativity - **Based in:** Leicestershire, England - **Influences:** His children’s drawings, DIY illustrators, and tattoo artists - **Tool:** An old, cumbersome drawing app on his phone - Meazo intentionally uses a tool he cannot fully control to avoid becoming overly self-critical. - He combines familiar objects—such as butterflies, clocks, and tomatoes—with surreal transformations. - His designs feature colorful characters, including a cheerful tomato with the phrase “time to make!” - The artwork appears on hats, socks, and long-sleeve shirts, balancing comfort and strangeness. Figma’s Season 5 collection demonstrates how playful constraints, repetition, and imperfect tools can produce distinctive visual ideas. Its strongest recommendation is implicit: approach creative work with curiosity, experimentation, and less concern for making something “good” immediately.

Figma Design Tools Graphic Design Config+1

figmaJun 24, 20262 min readCurated summary

Introducing Figma Motion: Your Canvas Now Has a Timeline | Figma Blog

Figma Motion brings animation directly into the Figma canvas, alongside components, variables, and team collaboration. Its timeline, keyframes, presets, agent assistance, and Dev Mode support aim to make motion a shared design activity rather than a specialist handoff. The feature also enables reusable motion systems through animated components and motion variables. ## Design and Animate in the Same File - Motion is a new canvas mode alongside Design, Draw, and Dev modes. - Designers can switch a frame into Motion mode to access a timeline. - The timeline supports: - Dragging layers to control timing - Scrubbing through animations - Independent keyframes for position, scale, rotation, and opacity - Auto keyframing while the playhead is moving - Time-based comments tied to specific moments - Preset styles such as fade, move, and scale provide a quick starting point. - Animation styles can be stacked to run simultaneously or sequenced across the timeline. - Figma’s agent can guide less experienced designers and help generate or refine animations. - Motion remains in the same file as the rest of the design, reducing context switching and handoff friction. ## Build a Reusable Motion System - Animated components carry their motion behavior wherever the component is reused. - Motion can become part of a design system instead of being recreated as one-off work. - Motion variables allow teams to define reusable animation properties such as easing. - Variables can have multiple modes, letting teams switch animation behavior across an entire page or file. - Custom animation styles are planned for a future release. ## Collaboration and Handoff - Time-based canvas comments let teams review precise points in an animation. - Dev Mode gives developers access to the motion work, supporting smoother implementation. - Figma presents motion as a shared responsibility across designers, developers, and collaborators. - Atlassian users cited improved collaboration, faster feedback, and easier adoption by designers who are less familiar with animation. ## Shader Effects and Motion - Properties exposed by shaders can be keyframed on the motion timeline. - Any shader-controlled value with a slider or input field can potentially be animated over time. - This expands animation beyond Figma’s traditionally limited set of animatable properties. Figma Motion is positioned as a way to make motion native, systematic, and collaborative. Teams can prototype animations alongside interface designs, encode them into components and variables, and bring developers into the process earlier.

Design Systems Dev Mode Figma Motion Animation Timeline+3

figmaJun 24, 20263 min readCurated summary

Connecting Figma and Weave | Figma Blog

Figma is integrating Weave’s AI-powered creative workflows directly into Figma Design, bringing image, video, animation, audio, and 3D production closer to the collaborative design canvas. The initial release provides more than 20 prebuilt AI image tools for tasks such as style transfer, product photography, material extraction, and art direction. Figma’s broader goal is to make creative workflows inspectable, repeatable, shareable, and eventually publishable through the Figma Community. ## Figma Weave and the Open Creative Canvas - Figma’s acquisition of Weavy, now Figma Weave, is intended to combine generative AI with professional creative-editing tools. - Weave uses node-based workflows, allowing creators to: - Connect image, video, audio, text, and 3D-generation steps. - Inspect how creative outputs are produced. - Tweak individual stages and compare alternate approaches. - Run multiple creative explorations simultaneously. - The company sees this as a way to bring creative production into the same collaborative environment where teams already design and review work. ## Weave Tools in Figma Design - More than 20 Weave tools are available from Figma Design’s left panel. - Each tool packages a prebuilt Weave workflow behind a simpler interface. - Supported use cases include: - Transferring a visual style from one image to another. - Generating e-commerce and product-shoot imagery. - Extracting or applying material qualities. - Rendering artwork in different visual languages, including Art Nouveau. - Adjusting image aspect ratios and developing visual directions. - Users can provide inputs and generate production-quality results without writing freeform prompts. - Predefined workflows produce more consistent results for recurring tasks while still allowing designers to guide the creative direction. ## Reusable and Shareable Workflows - Weave is designed for users who want to build complex workflows as well as those who prefer ready-made tools. - Figma plans to let designers publish their own workflows as Weave tools. - A team member could define a creative process once and share it with colleagues or the broader Figma Community. - This makes the logic behind a workflow reusable instead of keeping it confined to the person who created it. ## OutSystems Customer Example - OutSystems designer Bruno Figueiredo uses Weave for presentation visuals, animation, event graphics, merchandise, and 3D assets. - He created a 3D model of the company’s mascot, Neo, for manufacturing without relying on an outside specialist. - Weave’s node-based structure lets him experiment with: - Illustration styles. - Costume colors. - Body proportions. - Multiple AI models and parallel flows. - He describes the tool as especially useful for exploratory work because several variations can run at once and be reviewed later. Figma’s recommendation is to use Weave tools for fast, repeatable creative tasks while using the underlying node-based canvas when deeper experimentation and customization are needed. Future integration, including a planned Figma node in Weave, should reduce the need to translate assets and instructions between design and creative-production tools.

Figma Generative AI Figma Weave Image Generation+2

figmaJun 24, 20262 min readCurated summary

Principles in Motion | Figma Blog

Motion design extends graphic design into time, using rhythm, pacing, sound, and sequencing to communicate ideas. The Figma designers argue that effective motion combines clear intent with an understanding of physics and human perception. Rather than copying trends, designers should draw inspiration from nature, film, art, and real-world movement. ## Motion Turns Design into a Sequence - Graphic design communicates through static images; motion adds: - Rhythm and pacing - Transformation and character - Easing and timing - Sound and synchronization - Motion allows designers to divide a story across multiple frames instead of forcing every idea into one image. - Timing can create emotion and direct attention, much like beats structure music. - Unexpected connections between sound and image can produce “happy accidents” and richer results. ## Physics as a Foundation - Real-world physics provides a reference for making animated movement feel believable. - A bouncing ball, for example: - Moves quickly after impact - Rises and slows near its highest point - Falls again - Loses height with each bounce - Viewers often recognize when motion feels “good” because it reflects familiar physical behavior, even if they cannot explain why. ## Finding More Original Motion References - Relying only on existing motion-design examples can lead to predictable trends. - Designers can develop more distinctive work by studying: - Movement in nature - Film storytelling and editing - Gestures and forms in art and design - These broader references help motion communicate character and meaning beyond standard bouncing shapes and rectangles. ## Core Motion Principles - **Ease in/ease out:** Controls acceleration and deceleration. - **Anticipation:** Prepares the viewer for an upcoming action. - **Overshoot:** Moves slightly beyond the destination before returning. - **Follow-through:** Keeps secondary elements moving after the main action ends. - **Hold:** Pauses so viewers can process an event. - **Settle:** Adds subtle final movement as an object comes to rest. ## Transitions and Continuity - Easing determines how movement begins, changes speed, and settles. - Match cuts connect separate shots through a shared movement. - Cutting at the fastest point of an action can make transitions feel seamless. - Transitions link individual story beats and help the overall piece feel cohesive. Motion works best when designers treat time as a storytelling material. Grounding movement in physics, using sound thoughtfully, and drawing from varied real-world references can make animation clearer, more expressive, and less predictable.

Figma AI Motion Design Animation+2

figmaJun 24, 20263 min readCurated summary

What Does the Future of Software Look Like? | Figma Blog

AI may reshape software around more human, contextual interactions rather than fixed menus and mechanical commands. The post argues that future interfaces could understand intent through voice, gesture, emotion, and situation, adapting their behavior to each person. Instead of forcing users to adapt to increasingly powerful systems, software could meet users where they are while encouraging focus, presence, and healthier technology habits. ## Ephemeral Tools - Controls appear only when users select an object and indicate what they want to do. - Contextual options replace persistent menus, panels, and modes. - A video editor, for example, might show timing, pacing, alternate cuts, and sound options around a selected clip. - This lets creators focus on decisions and intent rather than remembering how software is organized. ## Magic Marker - Users interact through a combination of voice, cursor movement, gestures, sound effects, and body language. - Someone could circle an object, drag it into position, and verbally request a change. - AI would interpret these signals together, making it feel more like collaborating with a teammate. - This reduces the need for precise prompt engineering or complex document references. ## Adaptive Presence - Intelligent systems adjust their communication style and level of assistance based on user behavior. - They might offer structured guidance when someone is confused, step back when help is unnecessary, or switch between text, voice, and visuals. - Software could change pacing, simplify language, and divide information into smaller steps. - This approach is especially valuable in healthcare and education, where differences in user readiness can have serious consequences. ## Empathetic Flows - Interfaces could infer emotional states from typing speed, stylus pressure, speech patterns, facial expressions, and repeated revisions. - A food app might reduce choices when someone appears overwhelmed. - A creative tool could become quiet when the user is concentrating, while a hotel app might stop promoting upgrades when the guest seems tired. - Rather than requiring users to explicitly state what they need, systems would respond to behavioral signals. ## Situational Cues - Sound, motion, pacing, progress indicators, and visual transitions can help users understand where they are in an experience. - Earlier digital products used cues such as dial-up sounds, progress bars, and “You’ve got mail” announcements to provide orientation. - Future interfaces should counteract the overstimulation caused by attention-driven notifications. - Persistent progress indicators, transition sounds, and consistent visual language could help users regulate their attention and nervous systems. ## Spatial Tuning - Users could control software through bodily movement instead of conventional tapping and clicking. - Examples include shaping music with hand movements, navigating augmented reality by changing body orientation, or adjusting design elements through gestures. - These interactions demand attention and presence, making them harder to rush or automate. - Technology becomes an experience that intentionally slows users down rather than continually rewarding speed. ## Mash-Ups - Future systems could combine any two inputs—files, objects, sounds, locations, or physical gestures—to create something new. - The system would synthesize the combined inputs while blending their structure, tone, and meaning. - Possible examples include merging a playlist with a city map or combining digital objects through touch or gestures. The overall recommendation is to design AI-powered software around human intent, context, emotion, and physical presence. The most successful future interfaces may be those that make technology feel less like a collection of controls and more like an adaptable, considerate collaborator.

AI User Experience Human Computer Interaction Augmented Reality+3

figmaJun 24, 20263 min readCurated summary

Figma’s 2026 AI Report: Can AI Help Us Collaborate Better? | Figma Blog

AI is shifting from a tool for individual productivity into a driver of team collaboration. Figma’s research shows that 41% of respondents believe AI is already changing how teams work together, up from 7% two years ago. The report concludes that shared workspaces, stronger design judgment, and coordinated adoption matter more than simply making individuals faster. ## AI Is Moving Work from Solo to Collaborative - Figma’s report draws on 8,403 survey responses and 639 interviews across ten markets. - Designers and developers are increasingly crossing into each other’s work: - Designers participating in development rose from 21% to 41%. - Developers doing design work increased from 44% to 60%. - Seventy-six percent of product builders say at least half their work happens on the canvas, while six in ten spend most of their time there. - Unlike terminals or prompts, a shared canvas lets teams explore ideas, compare designs, give feedback, and solve problems together. ## Design and Judgment Matter More in the AI Era - AI can generate products, copy, and assets quickly, but it cannot decide what is worth building. - As creation becomes cheaper and faster, teams must focus more on product choices, differentiation, user experience, and trade-offs. - Ninety percent of respondents say design is at least as important as before AI; nearly 60% consider it more important. - Developers increasingly share this view, with 65% saying design has become more important. - Collaborative decision-making helps teams develop sharper judgment instead of optimizing only for individual output. ## Four Patterns of AI Adoption - The report identifies four organizational approaches: - **Unified:** Individuals and leadership advance AI adoption together (36%). - **Directive:** Adoption is driven from the top down (27%). - **Grassroots:** Practitioners lead adoption from the bottom up (20%). - **Nascent:** AI adoption remains at an early stage (18%). - Directive and grassroots organizations both experience friction when teams lack shared practices and communication. - The main challenge is organizational alignment, not simply access to AI tools. ## Building Shared AI Practices - Grassroots adopters should make successful workflows visible, create structure, and promote shared spaces. - Leaders introducing AI should close the gap between strategy and everyday practice. - The goal is not for one person to move faster, but for the whole organization to make better decisions and move quickly together. Teams should treat AI adoption as a collaborative design and organizational challenge: establish shared workflows, keep work visible, and use AI to improve collective judgment rather than only individual productivity.

Figma AI Prototyping Collaborative Design+2

figmaJun 24, 20263 min readCurated summary

Config 2026: New Materials, New Tools and a More Expressive Canvas | Figma Blog

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.

Figma Generative AI Model Context Protocol React+3

figmaJun 24, 20262 min readCurated summary

Code on the Figma Canvas | Figma Blog

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.

Figma AI Agents React Github+2

figmaJun 24, 20263 min readCurated summary

Figma’s Design Agent, Now With Custom Tools and Greater Context | Figma Blog

Figma’s design agent is expanding beyond prompt-based assistance into a more context-aware collaborator that understands a team’s workflows and design conventions. In open beta, it can create reusable generative plugins, shader effects, and shader fills directly on the canvas, giving designers more control without requiring traditional development setup. The result is a more personalized and expressive design process that combines AI assistance with native Figma workflows. ## Context as the Foundation for Collaboration - Figma argues that context separates a merely productive agent from one that understands how a team works. - With knowledge of a team’s methods, the agent can collaborate rather than simply generate outputs. - Greater context also enables tools and visual effects tailored to specific design practices. ## Build Custom Generative Plugins - Designers can prompt the agent to create reusable plugins without setting up a traditional development environment. - Plugins can support tasks such as: - Importing HTML onto the canvas - Generating dashboard layouts - Organizing image assets - Visualizing data - Generative plugins use PropsKit, helping them look and behave like native Figma tools. - Because they operate directly on the canvas, designers can iterate interactively. - Classic plugins remain necessary for workflows involving external services, AI systems, or third-party APIs. - Plugins created by the user, teammates, or the Figma Community are free and available on all plans; asking the agent to create them will consume AI credits once the feature is generally available. ## Create Shader Effects and Fills - The agent can generate WebGPU-powered shaders: small programs that control how pixels are rendered. - Shader effects function similarly to native Figma effects and can be: - Customized through parameters - Stacked together - Combined with native effects - Possible effects include particle stretching, lens distortion, color outlines, dither, liquid metal, and fractal noise. - Shader fills generate dynamic visuals beyond solid colors and gradients, including: - Watercolor - Moiré patterns - Pattern grids - Halftone effects - Particle webs - Magnetic fields - Designers can use shaders to create reusable visual workflows for applications such as collage, marbling, light leaks, embossing, and prism effects. ## Designer-Controlled, Agent-Assisted Workflows - Product designer Edward Chechique used the agent to create generative tools that previously required developer assistance or switching between separate AI tools. - Creative technologist Anna Zhang used the agent to build custom image-remixing shaders while focusing on functionality and refining the interface collaboratively. - Figma presents the process as an iterative dialogue: the agent proposes solutions, while the designer guides the parameters and creative direction. - The tools are intended to help designers turn personal techniques into reusable workflows that can be shared with teams. Figma’s update positions the design agent as both a creative assistant and a tool-building partner. Designers should use it to prototype custom plugins and visual systems directly in Figma, while relying on classic plugins when external integrations are required.

Figma AI Agents HTML Shaders+2