Figma

532 posts

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

figmaJun 17, 20263 min readCurated summary

Speaking the Language of Color | Figma Blog

Color is presented as a cultural language that influences emotions, perception, branding, and consumer behavior. The Pantone Color Institute studies these associations through psychology and trend forecasting, helping organizations choose colors that communicate specific messages. Effective color decisions require cultural awareness, a clear brand purpose, and consideration of the physical or digital medium where the color will appear. ## How Colors Influence Perception - Color associations often arise from nature: - Yellow suggests sunlight, warmth, and joy. - Green implies renewal and growth. - Brown conveys groundedness. - Blue is associated with dependability and stability. - Orange recalls fruit and tangy sweetness. - Cultural trends also shape color preferences, including: - Film, art, travel, sports, and technology. - Lifestyle changes and broader social conditions. - Economic pressures, which can cause palettes to shift. - Color meanings vary by region: - Black is associated with mourning in much of the West, while white serves that role in parts of the East. - Red can suggest love, anger, or urgency in Western contexts, but luck and prosperity in Eastern cultures. - Brands should research local color sensibilities rather than assume that a trend has universal meaning. ## Building a Brand Story Through Color - Strong brand palettes express what a company stands for and support its broader narrative. - Coca-Cola’s red communicates energy and excitement and has become inseparable from the brand. - Airbnb’s 2014 shift from baby blue to salmon pink was intended to convey warmth, humanity, comfort, and connection—qualities that supported its expansion into local Experiences. - “Brat Green,” associated with Charli XCX’s 2024 album, illustrates how an unconventional color can capture attention and reflect cultural attitudes: - Its yellow undertone adds energy and vitality. - Its organic associations suggest authenticity amid increasing digital saturation. - Its unusual appearance helps it stand out on social media. - Pantone’s own Config palette combines bright, pastel, earthy, aquatic, and nature-inspired colors to connect the physical and digital worlds. ## Designing for Materials and Surfaces - Colors do not appear identically across screens, fabrics, packaging, or other physical materials. - A color that looks appealing digitally may seem overly harsh in person. - Some hues achievable in fabric dyes may not be practical for products made from other materials. - Color decisions should therefore begin early in the design process, with the material, surface finish, and viewing context already considered. ## Tracking Cultural Change - Pantone’s Color of the Year program has run for more than 26 years and is one of the design industry’s most closely watched color forecasts. - The institute’s broader work combines color psychology, global observation, and trend forecasting to identify how cultural shifts influence color preferences. The practical recommendation is to treat color as a strategic design decision: define the intended message, understand the audience’s cultural associations, and test the color in its actual material and environmental context.

Figma Design Systems Branding Color Theory+2

tossJun 16, 20264 min readCurated summary

Why the Designer Built an App Instead of a Mockup

AI is changing design by letting designers create working prototypes rather than only static mockups. While building Toss’s “underlay” component, the author used SwiftUI, AI, and Metal shaders to design interactions directly on an iPhone. The experience reduced the translation gap between design and development and showed that a functional code prototype can become a more accurate specification than a traditional design document. ## Turning End Screens into New Starting Points - Toss identified screens that appear after users finish tasks, such as completing a transfer or payment. - These “dead ends” usually signal the end of an experience and encourage users to leave the app. - The project aimed to turn them into starting points for new experiences through a reusable component that could work throughout the app. ## The Idea Behind Underlay - Existing notification patterns—bottom sheets, toasts, push notifications, and overlays—attract attention but can interrupt what users are doing. - The author found inspiration in removing a shipping label from a moving box and revealing text that had already existed underneath. - This led to the concept of an **underlay**: instead of placing new information on top of the current screen, the component reveals something beneath it. - The component needed to be recognizable as a feature, preserve the existing experience, and remain reusable across the app. ## Designing Interaction with AI and Code - Figma prototypes showed that underlay’s movement mattered more than its static appearance. - Without experience in Protopie or Framer, the author built an iOS playground in SwiftUI using Xcode and AI. - The designer’s role was to: - Describe the intended experience - Select the best options proposed by AI - Evaluate the result on a real device - The process became a cycle of designing, choosing, testing, and refining. ## Building and Refining the Prototype - The author first created a personal playground for quickly experimenting with layouts, buttons, and text. - Each change was tested through actual device interaction rather than static previews. - The prototype was revised hundreds of times because imagined motion often felt different once implemented. - A scanning-light interaction was created to suggest that AI was reading the screen and finding relevant information. - The visual effect used a Metal shader to control pixel-level properties such as: - Light diffusion - Tint and width - Movement speed - Background darkening - The author gradually began adjusting shader values directly, despite having no prior shader or interaction-tool experience. ## Replacing Interaction Guidelines with a Repository - Instead of preparing a detailed document specifying timing, easing curves, and delays, the author gave developers the working prototype repository. - The developers reproduced the core structure almost immediately because they could inspect and run the implementation directly. - During refinement, the designer adjusted values and interactions directly on the developer’s laptop with AI. - A working reference made communication more precise than phrases such as “the motion feels wrong.” - Both the AI and developers could respond to the same concrete behavior rather than interpreting abstract descriptions. ## Designing the Implementation Structure - The production iOS code ended up closely resembling the prototype’s structure. - This happened because the author had built the prototype for rapid user testing and iteration, not specifically for production. - A well-structured prototype allowed design changes to be communicated through code and reused during implementation. - The article argues that a good design is not only visually convincing; its underlying construction should also be viable. - When a prototype is built in a development-ready way, it can function as the specification rather than disposable code. ## Applying the Approach - Start with the best possible experience instead of limiting ideas to what a familiar design tool can express. - Use AI and code to create a working artifact, since real devices reveal details and textures static tools may hide. - When handing off complex interactions, provide executable code or a repository instead of relying solely on written guidelines. - As AI handles more of the “how,” designers increasingly differentiate themselves through what they choose to imagine and build.

Figma iOS Design To Code Interaction Design+3

figmaJun 10, 20262 min readCurated summary

Steal This Template: Bring a User Persona to Life with Figma Weave | Figma Blog

The post shows how Figma Weave can make Ideal Customer Profiles (ICPs) more vivid and useful by turning static personas into realistic visual scenes. Dropbox designer Sara Clayton used a headshot, prompts, and reference images to depict media professionals in authentic work environments. The result was faster iteration, greater emotional connection, and more effective storytelling for product strategy. ## Static Personas Lack Context - Dropbox’s ICPs represented video editors, audio engineers, and production managers. - Traditional diagrams, user stories, and repeated headshots failed to show these users in their real working environments. - Story-driven slide decks worked better, but lacked visual variety and realism. - Clayton wanted personas to feel more human and connected to tools such as timelines, mixing boards, and editing software. ## Creating Realistic Persona Scenes with Figma Weave - Clayton used Figma Weave to transform a profile picture into an image of a media producer working from home. - A single prompt placed the persona in front of a Premiere Pro screen. - She uploaded a reference image to revise the character’s outfit when the initial style was not appropriate. - Weave provided more control over visual variables and iterations than general-purpose chatbots such as Gemini or ChatGPT. - The workflow took less than two minutes. ## Figma Weave’s Role in AI-Native Creation - Figma Weave emerged from Figma’s acquisition of Weavy. - The platform combines generative AI with professional editing tools on an open canvas. - Its intended capabilities include image, video, animation, motion design, and VFX generation and editing. - The post also highlights persona-focused templates for car scenes, character sheets, outfits, and character variations. ## Impact on Product Strategy - More realistic visuals help teams connect with personas and understand their contexts. - Higher-fidelity storytelling can make ICPs more influential in strategic decisions. - Clayton’s broader goal is to “humanize” product work by showing users as real people rather than static profile images. - Readers can use the featured Figma Weave template to create a more engaging ICP quickly. Figma Weave is best suited for teams that want to supplement traditional persona documentation with realistic, editable visual narratives that make customer needs easier to understand and remember.

Figma Generative AI Motion Design Figma Weave+2

figmaMay 28, 20263 min readCurated summary

4 New Ways to Go From Idea to Product With AI Tools | Figma Blog

AI tools are reshaping product development by enabling teams to prototype, test, and refine ideas earlier and across both code and design. The article argues that working prototypes can expose problems that static mockups miss, while preserving design context throughout the path to production. It illustrates this shift through examples from FloQast, Merkle, Affirm, and Accor. ## AI-enabled product workflows - Product teams are: - Prototyping earlier instead of relying solely on traditional requirements documents. - Testing ideas in code before finalizing designs. - Exploring more possibilities at greater scale. - Carrying design-system context into implementation. - Figma presents these practices as ways to balance faster iteration with deliberate product decisions. ## Testing constraints in code AI coding tools make it easier for non-developers and product teams to build functional prototypes involving: - Multi-step workflows. - Conditional behavior based on user permissions or data. - Actions that trigger subsequent actions. - Realistic backend logic and data relationships. A prototype can then be moved into Figma with Codex to Figma for collaborative exploration and refinement. If implementation work continues in code, teams can move the design back through MCP while retaining the relevant design context. ## FloQast’s complex workflow prototype ### The challenge - FloQast needed to redesign an accounting workflow for investigating discrepancies. - Users previously had to move between multiple pages to: - Find an issue. - Investigate it. - Resolve it. - The team wanted one page where users could see tasks, identify blocked work, and take action. - Because the workflow depended on interconnected steps, real data, and business logic, a static mockup could not fully validate the concept. ### The unlock - UX manager Benjamin Ellis built a working prototype with an AI coding tool. - The prototype included: - A simulated backend. - Realistic data based on an actual customer’s workflows. - Clickable scenarios where completing one task affected the next. - Testing the workflow revealed interactions that appeared sound in a design mockup but failed when subjected to realistic conditions. ### The impact - The team and designer committed to a direction only after testing it against real scenarios. - They identified interaction problems earlier. - The approach reduced later surprises and increased confidence in the final design. ### When this approach is useful - When behavior depends on permissions, data, or sequential actions. - When a small fix is faster to make directly in code. - When designers and developers need a working example to scope a complex experience together. ## Exploring with AI on the canvas The next section introduces using AI directly in the Figma canvas to explore product possibilities. The provided excerpt ends before describing the specific workflow or company example. Teams should use code-backed prototypes when logic and real data are central to the experience, then bring those prototypes into collaborative design tools to refine decisions with greater confidence.

Figma Design Systems Prototyping Model Context Protocol+4

figmaMay 26, 20262 min readCurated summary

Issue no.16: Trust the process | Figma Blog

Issue 16 of Figma’s newsletter, “Trust the Process,” explores how AI and agentic tools are changing product design. Its central argument is that faster creation makes judgment, context, and craft more important—not less. Teams need to choose the right problems, preserve design intent, and build workflows that connect design and code. ## Choosing What’s Worth Shipping - AI enables product teams to build and iterate rapidly. - The main risk is moving quickly in the wrong direction or settling for “good enough” output. - Strong product judgment and a clear sense of what creates meaningful differentiation remain essential. ## Using MCP to Preserve Context - Model Context Protocol (MCP) allows coding agents to access context from Figma files and design systems. - Figma’s MCP server helps developers translate design decisions into code more accurately. - Better documentation and structured design systems can make this workflow more effective. ## Building Visual Workflows with AI - Figma Weave supports AI-assisted work across video, photography, illustration, and 3D effects. - The newsletter highlights more than 20 workflow templates and methods for creating asset libraries from reference images. - Effective prompting depends on understanding the logic behind a visual language, including how to build, edit, and direct imagery consistently. ## The Design-to-Code Loop - Modern teams increasingly move back and forth between canvas and code. - This “roundtripping” gives designers and developers faster feedback and deeper product context. - Keeping real product states connected to the canvas can reduce drift between what is designed and what ultimately ships. - The convergence of design and development creates more opportunities to improve both speed and craft. ## Practical Experiments - A workflow lab demonstrates how Figma MCP can help teams refine a video export flow by bringing real product states into the design canvas. - Figma also offers efficiency tips for users who rely heavily on Figma Make, including ways to manage credits and streamline workflows. The newsletter recommends treating AI as an accelerator rather than a substitute for direction. The best results come from combining faster tools with deliberate judgment, strong context, and continuous collaboration between design and code.

Figma AI Model Context Protocol Design To Code+2

figmaMay 19, 20262 min readCurated summary

Friends of Figma’s Brand Refresh Tells the Story of a Global Community | Figma Blog

Friends of Figma has introduced a refreshed brand identity to represent its rapidly growing, globally diverse community. The redesign aims to remain recognizably connected to Figma while giving local chapters freedom to express their own cities, cultures, and members. Its central idea is a flexible, community-owned design system built around shared principles rather than uniform results. ## Friends of Figma’s Global Community - Friends of Figma is Figma’s official user group program for connecting, learning, and sharing inspiration. - The program includes more than 250 chapters across 82 countries. - In the previous year, chapters hosted over 900 events, including: - Workshops and webinars - Craft talks and watch parties - Casual meetups and social events - The program began in 2020 after communities had already been organizing meetups since 2018. - Figma says community is especially important as AI rapidly changes the design industry. ## A Brand That Is Globally Local - The new identity had two primary goals: - Stay connected to the Figma brand so chapters can attract members and sponsors. - Give chapters enough flexibility to reflect their own regions and cultures. - Rather than forcing every chapter to look identical, the system is designed to be shared, owned, and shaped by local organizers. - Figma describes this as a “democratic design system” connected by a common spirit. ## Reworking the Figma Shapes - The redesigned Friends of Figma logo separates the basic shapes of the original Figma mark. - These shapes become building blocks for new compositions. - Their coming together symbolizes individual chapters forming a larger global community. - The identity extends across: - Color guidelines - Chapter badges - Stickers - Event materials - Photography ## Flexible Guidelines for Chapter Creativity - The toolkit provides enough structure to create consistency without limiting local expression. - Chapters share a core color system but can select six additional colors from an approved palette. - Sticker templates offer basic shapes and guidance, while chapters decide what imagery and content to place inside them. - The visual system focuses on real people, local places, and in-person events rather than abstract corporate branding. - New photo guidelines encourage a street-level perspective rooted in what local communities recognize and understand. The refresh positions Friends of Figma as a shared global framework with strong local ownership. Chapters can use the common identity to feel connected to Figma while still creating a brand presence that genuinely reflects their own communities.

Figma Design Systems Branding Visual Identity+1

figmaMay 12, 20263 min readCurated summary

What the Design-to-Code Loop Unlocks | Figma Blog

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.

Figma Design Systems Generative AI React+2

figmaApr 28, 20263 min readCurated summary

FigJam Is Now Your Coding Agent’s Whiteboard Too | Figma Blog

FigJam is being positioned as a shared whiteboard for coding agents and engineering teams. New MCP skills let agents generate architecture and ER diagrams, write to and read from FigJam, and turn research or project plans into collaborative visual boards. The workflow connects agent-generated planning, human review, and implementation, reducing architectural confusion as teams ship code faster. ## Turning Agent Output into Visual Plans - The author built on Figma’s existing `generate_diagram` MCP tool to support more complex architecture and ERD layouts. - The new `figma-use-figjam` MCP skill allows agents to read and write directly to FigJam boards. - Skills such as `generate-project-plan` can transform documentation, codebases, and conversations into visual project plans. - Diagrams can include: - Architecture and entity-relationship diagrams - Notes and annotations - Code blocks - Implementation context and technical decisions ## Step 1: Research, Plan, and Visualize - The coding agent gathers relevant documentation, codebase structure, existing patterns, and implementation constraints. - It evaluates possible solutions, researches tradeoffs, identifies affected services and files, and proposes stacked PRs and testing strategies. - Instead of leaving the plan in a dense Markdown document, the agent exports it to FigJam as an interactive architecture review. - Visualizing the options helps teams understand the system and identify the cleanest approach more quickly. ## Step 2: Collaborate Before Coding - Engineers share the FigJam board with teammates for asynchronous or live review. - Team members can comment on concrete design questions, such as: - Whether a tool should support multiple file types - Whether it should accept a `folderId` - Where newly created files should be stored - FigJam provides a collaborative format that preserves technical context for distributed teams. - Teams can review and refine agent-generated diagrams before implementation begins. ## Step 3: Feed Decisions Back to the Agent - After review, the author uses the `get_figjam` tool to retrieve the board’s diagrams, comments, and decisions. - The coding agent uses that context to update the implementation plan and begin coding. - Pull requests can link back to the FigJam board, preserving the architectural rationale alongside the code. - Because the design has already been reviewed, the resulting PR is easier to evaluate and merge. ## Broader Figma Integration - The workflow builds on `use_figma`, which lets agents create or edit designs directly on the Figma canvas using real components. - `create_new_file` allows agents to generate designs in new Figma files. - Together, these capabilities extend agent collaboration beyond code into design, architecture, planning, and technical communication. Teams adopting coding agents can use FigJam as a reviewable source of shared context: let agents generate the initial plan, have humans refine the architecture visually, then return the approved decisions to the agent for implementation.

Figma AI Agents Figjam Model Context Protocol+3

figmaApr 15, 20262 min readCurated summary

The TL;DR on MCP: Why Context Matters and How to Put It to Work | Figma Blog

MCP (Model Context Protocol) connects AI tools to the design decisions and data stored in tools like Figma. Figma argues that giving coding agents structured access to components, tokens, and layout rules produces code that better matches the intended design and design system. It also creates a two-way workflow in which developers and designers can move between code and canvas without losing context. ## MCP Connects Design and Development - Product work is increasingly iterative rather than a linear design-to-development handoff. - MCP lets AI coding tools access Figma files as structured design sources, not merely as screenshots. - Figma’s MCP server helps bring design context into code, while code-to-canvas tools can bring working interfaces back into Figma. - This keeps the broader product team involved as designs and implementations evolve. ## Why Context Matters for AI-Generated Code - Without context, an AI tool may: - Choose a color that resembles the brand color but is not linked to the correct design token. - Recreate a card instead of reusing an established component. - Flatten a complex, nested form into a single basic element. - These seemingly minor deviations accumulate across screens and components. - MCP exposes the underlying components, tokens, and layout decisions that explain how a design was built. ## Designers: Files Directly Influence Production Code - Design systems now influence not only human implementation but also AI-generated code, from prototypes through production. - Well-structured, consistent Figma files can guide AI toward more reliable and on-brand results. - Poor organization or small inconsistencies can spread widely because AI reproduces them at scale. - MCP also lets designers review code-built interfaces in Figma, add missing states, refine details, and prepare work for production without starting over. ## Developers: Less Translation, More Building - AI coding tools can accelerate implementation, but their output is less accurate when design intent is unavailable. - MCP reduces the translation required between a visual design and working code by supplying the system and component context behind the design. - Developers can spend more time building instead of reconstructing design decisions from screenshots or incomplete handoffs. Figma’s practical recommendation is to treat design files and design systems as active inputs to AI workflows. The better the structure and context captured in those files, the more consistently AI can generate code that reflects the intended product.

Figma AI Design Systems AI Agents+3

tossApr 3, 20263 min readCurated summary

Why Toss reduced its design roles to two

On April 1, Toss’s Design Chapter consolidated six design roles into two: Product Designer and Visual Designer. The change reflects how role boundaries had already blurred as designers crossed disciplines and technology reduced the importance of tool-specific expertise. Toss’s central argument is that designers should be organized around judgment and user problems—not the tools, media, or screens they work with. ## Why Role Boundaries Became a Problem - The previous structure separated designers by tools and outputs rather than by the decisions they made. - Ambiguity emerged in areas such as: - Whether interaction in a design system belonged to Platform or Interaction Designers - Whether interactive graphics should be handled through Lottie, code, or UI design - Whether expanding a PC product to mobile belonged to a Tools Product Designer or Product Designer - These divisions sometimes determined ownership based on medium instead of capability or context. ## Designers Were Already Crossing Disciplines - Tools Product Designers began designing mobile products. - Interaction Designers worked on parts of internal design tools. - Graphic Designers created semantic icon systems. - Platform Designers built interactive web pages. - Brand Designers with visual-design backgrounds worked on lighting products. - AI and other tools have shortened the time needed to learn formerly specialized skills, including: - Video and Lottie production - Figma prototyping - Coding interactive experiences - As tool proficiency becomes less differentiating, the ability to judge what creates a good experience becomes more important. ## Product Designer - Product Designer and Tools Product Designer were merged into one role. - The distinction between mobile and PC disappeared. - The role now focuses on: - Understanding the user’s context and problems - Deciding how those problems should be solved - Designing across screen sizes and product environments ## Visual Designer - Platform, Interaction, Graphic, and Brand Designers were combined into Visual Designer. - Visual Designers are expected to work across media and produce what the experience requires, such as: - Building interactions within systems - Creating icons for prototypes - Designing interactive web experiences - The defining capability is visual judgment: deciding what is beautiful, appropriate, and correct. - The title was chosen to emphasize visual decision-making rather than a specific medium or technique. ## Lessons from Other Industries - Disney animation reduced many physical and intermediate production steps through software while preserving stages requiring important creative judgment. - Digital audio workstations allow artists such as Billie Eilish and Finneas to compose, perform, record, and mix with a laptop, but human judgment about what sounds good remains essential. - Digital cinema and streaming weakened the historical distinction between film and television production. - Across these industries, tools converged while the value of creative judgment increased. ## What Comes Next - The new job structure will not immediately change how people work. - Toss still needs to redesign hiring standards, onboarding, and career-development paths. - The consolidation is intended to give designers broader ownership and more room to make decisions across disciplines, ultimately improving the experiences delivered to users.

Figma Design Systems Product Design Interaction Design+4

figmaApr 1, 20263 min readCurated summary

6 Designs That Reimagine How We Interact With Software | Figma Blog

This Figma Make-a-thon showcase argues that software interaction can become more expressive, playful, and socially connective when designers rethink familiar conventions. The winning projects use technology to recreate communal crafts, enable hands-free control, and expand physical experiences beyond traditional limits. Together, they suggest that creativity and emotional connection—not just speed and efficiency—should shape digital experiences. ## Collaborative Embroidery: Common Thread - Charlota Blunárová’s winning project adapts the tradition of handmade samplers into a shared online canvas. - Visitors choose thread colors and stitch types, then contribute to a communal embroidery piece alongside strangers. - The project deliberately imposes constraints: one shared canvas becomes more meaningful as people add to it over time. - More than 100,000 stitches have been added, turning the site into an evolving, collectively authored artifact. - Blunárová built the real-time collaboration and canvas interactions in Figma Make despite having no engineering background. - Her process began with the desired feeling and used visual references, including logos and color palettes created in Figma. ## Hands-Free Interaction: Pucker - Aleyna Çatak’s “Pucker” replaces tapping and voice commands with head movements and a lip gesture. - Users tilt their heads to move through an interface, hold still to select an item, and pucker their lips to confirm. - The concept is designed for situations where users’ hands are occupied, such as cooking, knitting, or designing. - It also points toward more accessible interfaces that can be operated without touch or speech. - Pucker uses a device’s front camera for real-time tracking and states that no data is stored or transmitted. - Çatak describes it as a flexible interaction layer rather than a finished product, potentially adaptable across apps and platforms. - Her advice is to understand basic coding concepts so prototypes can be refined and troubleshot more effectively. ## A Remote Photo Booth: Duet Booth - Paige Latimer reimagines the traditional photo booth as a remote, asynchronous experience. - Duet Booth allows two people in different places—or participating at different times—to take photos that are combined into one photo strip. - The project preserves the photo booth’s sense of immediacy and shared participation while removing its physical and geographic constraints. - Latimer recommends concentrating on the core interaction before polishing visual details, giving the rest of the design a strong foundation. The projects presented in the article demonstrate how Figma Make lowers the barrier to prototyping ambitious ideas. Designers can use it to turn emotional concepts, alternative input methods, and collaborative rituals into working experiences—provided they begin with a clear sense of the feeling or interaction they want to create.

Figma Real Time Collaboration Figma Make Computer Vision+2

figmaMar 24, 20263 min readCurated summary

Agents, Meet the Figma Canvas | Figma Blog

Figma is opening its canvas to AI agents, allowing tools such as Claude Code and Codex to create and modify designs directly in Figma files. Through the `use_figma` tool and customizable skills, agents can use a team’s components, variables, design decisions, and workflows instead of producing generic designs. The feature is free during beta but is expected to become usage-based and paid. ## Agents Work Directly on the Figma Canvas - Figma’s MCP integration lets agents read and write Figma files through the `use_figma` tool. - Agents can create or update: - Design assets - Components - Files based on existing design systems - Designs linked to established variables and conventions - Teams can move between code, the command line, and Figma while keeping design context shared. - Figma positions the canvas as the place where product decisions become visible and refined. ## Working Across Code and Canvas - The existing `generate_figma_design` tool converts HTML from live apps and websites into editable Figma layers. - The new `use_figma` tool operates directly on the canvas, using existing components and variables. - The tools are intended to work together: - `generate_figma_design` brings current implementation details into Figma. - `use_figma` edits those designs or creates new system-aligned assets. ## Skills Encode Design Intent - Skills are Markdown-based instructions that tell agents: - Which workflow steps to follow - What sequence to use - Which team conventions to respect - What quality standards and specialized knowledge to apply - Anyone can author a skill without building a plugin or writing traditional code. - The foundational `/figma-use` skill teaches agents Figma’s structure and core principles. - Teams can customize that foundation to reflect their own design systems and working methods. ## Example Skills and Workflows Figma highlights skills for tasks such as: - Generating component libraries from code - Creating designs from existing components and variables - Producing accessibility specifications for VoiceOver, TalkBack, and ARIA - Creating components from structured JSON contracts - Applying design systems to existing designs - Managing spacing through variables and fallbacks - Synchronizing design tokens between code and Figma - Running parallel, multi-agent design workflows ## More Predictable and Self-Correcting Output - Skills make AI behavior more consistent by encoding repeatable instructions and implementation rules. - Agents can use screenshots to identify mismatches and iteratively refine generated screens. - Because agents work with real Figma structure—components, variables, and auto layout—corrections affect the underlying design system rather than only the visual appearance. - Team conventions become active rules that agents apply during creation, rather than static documentation they merely reference. Figma’s agent workflow is most useful when teams invest in well-defined components, variables, and skills. During the beta, teams can experiment with `use_figma` and community skills to automate design work while preserving their existing design intent and system standards.

Figma Design Systems AI Agents Model Context Protocol+4

figmaMar 16, 20262 min readCurated summary

Issue no.15: The State of Design | Figma Blog

AI is reshaping design by blurring the boundary between code and canvas, while expanding—not eliminating—the need for designers. Figma’s research suggests designers are adapting to new expectations by strengthening both AI-related capabilities and enduring creative fundamentals. The future favors people who can move fluidly across tools, teams, and stages of product development. ## AI’s impact on design work - 91% of surveyed designers say AI tools are helping them improve their work. - “Better design” means different things to different designers, including: - Visual polish - More thoughtful problem-solving - More intuitive user experiences - These differing priorities influence how designers understand and experience their jobs. - Design is increasingly defined by outcomes and problem-solving rather than by a single medium. ## Design hiring remains strong - AI is not reducing demand for designers according to Figma’s research. - 82% of surveyed hiring managers say their need for designers has either remained stable or increased. - Demand is growing beyond technology companies. - Organizations are seeking designers who can help translate new AI capabilities into useful products and experiences. ## Skills for the AI era - Designers are exploring emerging practices such as: - Prompting - MCP-related workflows - Connecting AI tools and processes - Translating between design, engineering, product, and other teams - AI-specific skills complement rather than replace foundational design abilities. - Communication, judgment, craft, and the ability to understand user and business needs remain essential. - The strongest designers are likely to combine technical fluency with human-centered thinking. ## Product teams are prototyping earlier - Product managers are using Figma Make to explore ideas and build conviction more quickly. - Teams at ServiceNow, Ticketmaster, and Affirm use prototypes to: - Communicate complex product behaviors - Test and develop ideas - Make better roadmap decisions - Prototyping is becoming accessible beyond traditional design roles. ## Code and canvas converge - Ideas can begin in code, visual design, or anywhere in between. - Figma presents the future of design as a continuous movement between code and canvas. - This shift makes designers less defined by their tools and more by their ability to shape ideas across mediums. Designers should treat AI as an extension of their creative and problem-solving toolkit, while continuing to develop core design judgment, communication, and craft. The most valuable practitioners will be those who can connect AI-enabled workflows with strong product thinking and cross-functional collaboration.

Figma AI Prototyping Model Context Protocol+3