figmaAug 13, 2026

Try These 10 Skills—And Show Off Your Own | Figma Blog (opens in new tab)

Skills are plain-text Markdown instructions that help Figma’s agent apply a designer’s preferences, workflows, and judgment. The post argues that skills are useful not only for engineers but also for codifying creative approaches, such as easing curves, typography, image audits, and motion principles. Figma now lets users create, preview, edit, and iterate on skills directly in the product, with some also compatible with Figma’s MCP server. ## What Figma skills enable - Designers can create skills from: - A reference design frame - Specific instructions or guidelines - Repeated personal workflows - The agent can draft a skill, which users can preview and test in chat. - Skills can be refined by: - Editing instructions and formatting - Asking the agent for recommendations - Opening the Markdown editor for manual changes - Skills can capture individual design judgment and help teams reproduce a consistent point of view. - Some skills work with Figma’s MCP server and third-party agents. ## Examples of personal design skills - `/image-audit` checks whether images in a file can be exported and places a report on the canvas. - `/shader-starter` helps users write more effective shader prompts. - `/make-a-type-scale` creates a type scale from selected text and generates corresponding font variables. - `/ease-like-miggi` applies the author’s preferred easing curves to motion keyframes, allowing teammates to use the same motion style. ## `/xray-scan`: Create radiographic image effects Created by Adele Ix, this skill transforms a photo or description into a realistic X-ray image. - Produces two visual treatments: - Glowing white lines on black - Darker tones on white - Supports layered monochrome collages with glowing edges. - Is especially suited to combining multiple scans into a unified composition. ## `/find-animation-opportunities`: Identify missing motion Created by Emil Kowalski of Linear, this skill reviews a design and suggests where animation could improve the experience. - Identifies elements that should animate and areas that may be over-animated. - Recommends: - What should move - Where the motion should occur - Exact animation values - Suggestions can be implemented manually in Figma Motion or applied by the agent. - Works best when focused on one frame with contextual information, such as the target persona. - It can also be asked which elements should remain static. ## `/camera-pan-and-zoom`: Animate static compositions Created by Mallory Dean, this skill adds camera-like movement to a static design. - Builds a nested camera rig around selected content. - Supports pan, zoom, and roll animations. - Can create directed sequences, such as touring a grid of cards before zooming out to reveal the full composition. - The skill is intended to make static compositions feel more cinematic and dynamic. ## Practical takeaway Designers can use skills to turn personal techniques and repeatable creative decisions into reusable tools. Start with a focused workflow, test the generated skill in Figma, and refine its Markdown instructions until it reliably produces the desired result.

figmadesign-systemsai-agentmarkdown+2

figmaAug 3, 2026

Code, Craft, and the Making of Nested Folders | Figma Blog (opens in new tab)

Figma’s nested folders feature required much more than a file-browser update: it involved rethinking content structure, permissions, sharing, administration, and core infrastructure. The team responded to changing priorities and faster AI-assisted development by replacing a sequential product process with code-led experimentation, flexible roles, and continuous collaboration. This approach helped them turn early ideas into working solutions and ship a complex, long-requested feature. ## Nested folders required foundational changes - Nested folders help growing teams organize files within shared projects. - Implementing them affected: - The file browser - Admin controls - Sharing and permissions - Figma’s underlying content model - Core infrastructure - The feature was therefore treated as a systems-level redesign rather than a simple quality-of-life improvement. ## Moving beyond the traditional product process - Initially, the team followed a conventional sequence: - Product defined requirements. - Design mapped the user experience. - Engineering started implementation after the concepts were considered complete. - Midway through the project, priorities shifted as resources were also needed for AI-native initiatives. - Tools such as Figma Make, the Figma MCP server, agent skills, codebase prototyping, and context-aware agents made it possible to begin work from prototypes, code, or even informal ideas shared in Slack. ## Leading with code - As code became faster and cheaper to produce, the team used pull requests as a way to explore product ideas. - Working prototypes and PRs helped the team test assumptions directly instead of spending too long debating theoretical solutions. - Code became a proposal and a communication tool, not merely the final implementation step. ## Flexible roles and shared ownership - Responsibilities shifted according to the problem being solved: - Engineers made design decisions. - The designer contributed code. - The product manager focused less on daily execution and more on strategic questions. - This flexibility allowed the team to respond quickly as technical and product requirements evolved. ## Replacing handoffs with conversations - Blurred roles turned team members into both students and teachers. - Instead of relying on formal handoffs between product, design, and engineering, the team collaborated continuously. - Sharing specialized knowledge and previously guarded parts of each craft helped build the trust needed to make decisions quickly. The broader lesson is that complex product work benefits from treating code, design, and product thinking as shared responsibilities. For teams building foundational features under changing conditions, early prototypes, cross-functional ownership, and ongoing conversation can be more effective than rigid sequential handoffs.

figmaai-agentmcp-servercode-prototyping+2

figmaJul 30, 2026

A Properties Panel and Annotations, Now in Figma Make | Figma Blog (opens in new tab)

Figma Make now combines visual editing with code-aware prompting through a properties panel and annotations. The properties panel handles precise visual changes, while annotations let users describe interactions and animations in context. Together, these tools reduce prompting guesswork, use fewer credits, and help ensure visual edits are reflected in the underlying code. ## Visual Editing with the Properties Panel - Users can select elements and adjust spacing, typography, layout, opacity, z-index, borders, corner radii, and other properties. - A DOM tree acts like a layers panel, making it easier to find and select elements in the code. - Multiple instances of an element can be updated simultaneously. - Edits use existing color and typography tokens from the codebase. - Each change is staged in the prompt box for review or disposal before being applied. - Applying the changes updates the underlying code and creates a new file version. - Future Code Connect integration will link Make elements to Figma Design components. ## Contextual Changes with Annotations - Users can mark one or more areas directly on the canvas and describe the desired change. - Annotations support behavior beyond basic styling, such as: - Hover zoom effects - Delayed button fades - Press effects - Full-screen navigation overlays - The agent receives the exact location and context of the selected elements, making prompts more specific. - This approach supports flexible natural-language instructions while avoiding the ambiguity of describing element locations manually. ## Credit Savings and Workflow - Direct manipulation gives the agent a precise target and requires fewer tokens than a text-only prompt. - Edits are staged without consuming credits. - Credits are used only when the user applies the changes. - The workflow keeps design experimentation, review, prompting, and code updates in one continuous process. Figma’s broader goal is to make code editing feel more like visual design. The same properties-and-annotation workflow is planned for code layers on the Figma canvas, further connecting design exploration with production code.

figmafigma-makedesign-to-codecode-connect+2

figmaJul 27, 2026

Digital Tools, Human Expression: The Visual Identity Behind Config 2026 | Figma Blog (opens in new tab)

Config 2026’s visual identity used digital tools and AI to express human creativity rather than replace it. Figma’s Brand Studio built a system around evolution, fluidity, and harmony, combining expressive glyphs, imperfect textures, and structured compositions. The result connected AI-assisted making with craft, experimentation, and distinctly human irregularity across digital and physical conference spaces. ## A Visual System for Human–Machine Collaboration - The identity reflected three aspects of modern design: - **Evolution:** remixing and reinventing ideas into something new. - **Fluidity:** moving between design and code while starting from different points. - **Harmony:** using generative tools while maintaining human judgment. - The system combined: - Sketchy, generative, and crisp glyphs. - AI-prompted textures. - Structured, dynamic compositions. - The contrast between “wonky” results and programmatic digital processes represented how ideas can morph and multiply. - Particle glyphs suggested ideas spawning and generating, while clean rectangles represented more resolved concepts. - Glyphs were translated into 14-foot foam sculptures and installed around San Francisco’s Moscone Center. ## AI-Assisted Texture Generation - Figma’s Brand Studio created tools in Figma Make to codify three lo-fi visual effects: - Scribbly linework. - Blurred gradients. - Oval-shaped particles. - Images were processed through these tools to create compositions that felt surprising, hand-drawn, and imperfect. - A custom dithering tool applied a consistent pointillist treatment to hundreds of speaker portraits. - The textures balanced digital precision with human qualities such as irregularity, grain, and imperfection. - Animated versions of the textures appeared at the conference’s block party and on keynote screens. ## Designing Static and Motion Assets Together - The team developed motion and still graphics in parallel rather than treating animation as a final production step. - Motion influenced visual design, while design informed motion decisions. - Bringing glyphs to life helped the team discover new directions for the identity. - This iterative process reinforced Config’s theme of ideas evolving through experimentation and collaboration. Figma’s approach demonstrates how AI can support a strong visual identity when it is guided by human taste and craft. The practical lesson is to use generative tools to create possibilities, while preserving controlled imperfections and human judgment in the final system.

figmaaifigma-makemotion-design+2

figmaJul 16, 2026

Workflow Lab: Deploying Designs Directly with Figma Make | Figma Blog (opens in new tab)

Figma’s workflow connects design, production code, and team review so designers can handle small, high-impact improvements without waiting for engineering backlog prioritization. Using Figma Make with a real codebase, a designer can identify accessibility issues, implement craft-level fixes, and move the work toward a merged pull request. The approach keeps engineers focused on larger architectural work while preserving design nuance and collaboration. ## The Problem with Backlog-Driven Fixes - Minor accessibility and usability improvements often enter a backlog where they compete with larger engineering priorities. - Small changes may be too granular to prioritize but too valuable to ignore. - Written handoffs can lose important nuance, creating clarification cycles between designers and engineers. - The example organization, the fictional Museum of Speculative Futures, is simultaneously improving accessibility and rewriting its website architecture. ## A Shared Ownership Model - The product manager proposes that engineers continue handling the major rewrite. - The designer takes end-to-end ownership of lower-risk, craft-level changes. - Figma Make with production code enables the designer to work directly against the real website implementation. - The workflow is intended to take changes from the Figma canvas through team review and into a pull request without filing a ticket. ## Testing the Existing Experience - Before making changes, the designer uses the Figma agent to generate synthetic personas, including: - A first-time visitor planning a trip - A returning member - Someone navigating with a screen reader - These personas explore the site and surface obvious friction early. - The audit identifies several issues: - A confusing exhibition or visit-page label - A call-to-action that is easy to miss - A date picker that is difficult to understand - A blank state when search returns no results - The article emphasizes that synthetic personas do not replace real user research, but they can identify issues before in-person sessions. ## Reviewing Design Improvements - The designer addresses the findings directly on the canvas. - The designer, engineer, and product manager review the proposed changes together. - They agree on improvements such as: - Clearer navigation language - A more prominent call-to-action - A more usable date picker - The changes support the shared goal of making the site easier to navigate for people with different ways of experiencing the web. The recommended workflow is to reserve engineers’ time for substantial technical work while enabling designers to directly resolve small, accessibility-focused issues in production code. Figma Make, the Figma agent, GitHub integration, and canvas-based review create a path from design insight to implementation without losing context or waiting indefinitely in the backlog.

figmaaiaccessibilitygithub+2

figmaJul 10, 2026

How Decagon Uses AI For Design System Saturation | Figma Blog (opens in new tab)

Decagon built its Deco design system to maintain quality and consistency as its AI-powered customer service platform scaled. By connecting Figma, Storybook, coding agents, and Figma MCP, the company reduced design-to-code friction and enabled agents to produce higher-fidelity implementations. The result is a shared design language and a continuous loop between design and engineering. ## Building a Design System for Quality at Scale - Decagon initially had no formal design system, while its product and team were expanding rapidly. - Inconsistencies across the platform weakened the polish expected by enterprise customers. - Designers and engineers created Deco together, addressing implementation details early, including: - Focus-mode behavior - Disabled, read-only, error, and warning states - Placeholder decisions - Existing code patterns and edge cases - Deco grew into an organization-wide Figma library with hundreds of components, styles, and variables. - Library analytics recorded tens of thousands of component insertions in 30 days, indicating broad adoption. - The system provides: - A single source of truth for design and implementation - A shared vocabulary between designers and engineers - Faster screen assembly from reusable components - Greater consistency across teams and product areas ## Connecting Design and Code with Figma MCP - Before MCP, designers exported specifications, developers interpreted them, and discrepancies were discovered during review, creating repeated back-and-forth. - Decagon moved its design-system components into Storybook so engineers and coding agents could work from precise, documented implementations. - The team created coding-agent skills that: - Require agents to use approved design-system components - Help designers add new components while keeping Figma and code aligned - With Figma MCP enabled, agents can access design specifications, code context, and the Figma canvas within the same workflow. - Designers can provide a Figma link to a coding agent, which uses design context and maps the requested interface to Deco components. - This produces high-fidelity starting points and speeds up iteration while reducing divergence between the intended design and the final code. Decagon’s experience suggests that design systems become significantly more valuable when they are connected directly to development tools and AI agents. Maintaining synchronized component libraries across Figma and code can help fast-moving teams scale without sacrificing consistency or implementation quality.

figmadesign-systemsai-agentdesign-to-code+2

figmaJul 9, 2026

How to Lead Design Teams Through the AI Era | Figma Blog (opens in new tab)

Jen Dunnam argues that design leaders should respond to AI-driven change with calm, deliberate experimentation rather than panic. The fundamentals of design remain human-centered, so teams should prioritize clear thinking, strong principles, and the ability to turn insights into products. Her approach emphasizes investing in emerging talent while hiring and developing designers who can challenge assumptions. ## Lead with Calm - Leaders should steady their teams instead of adding to the urgency already felt by ambitious designers. - Break AI-related change into manageable steps: - Choose an approach. - Experiment with appropriate tools. - Refine design principles. - Learn from the results. - Designers should avoid chasing every new capability simply because it is novel or impressive. - AI may transform workflows, but designing for human needs remains the central responsibility. ## Hire for Critical Thinking - Dunnam would invest more heavily in designers fresh out of school, many of whom are disadvantaged by today’s pressure to ship quickly. - Pair early-career designers with experienced practitioners who can help turn ideas into shippable products. - Look for researchers who can move beyond gathering insights and contribute decisively to product direction. - Critical thinking has become especially valuable as AI tools make polished but potentially shallow solutions easier to produce. - Interviewers should ask candidates: - Where did they disagree with a stakeholder? - How did they push back? - What product decision still bothers them? - These questions reveal whether candidates can challenge attractive but poorly reasoned solutions. Dunnam’s practical recommendation is to keep teams grounded in human-centered design, combine emerging and experienced talent, and hire people with the judgment to question what appears easy, polished, or technologically exciting.

figmaaiproduct-designhuman-centered-design+2

figmaJul 2, 2026

Issue no.17: Build with joy | Figma Blog (opens in new tab)

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.

figmadesign-systemsmotion-designcolor-theory+1

figmaJul 1, 2026

Got Skills? Make the Figma Agent a Better Collaborator | Figma Blog (opens in new tab)

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.

figmadesign-systemsai-agentaccessibility+2

figmaJun 29, 2026

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

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

figmaaireactdesign-to-code+1

figmaJun 29, 2026

Meet the Artists Behind Figma's Season 5 Collection | Figma Blog (opens in new tab)

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.

figmadesign-toolsgraphic-designconfig+1

figmaJun 24, 2026

Connecting Figma and Weave | Figma Blog (opens in new tab)

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.

figmagen-aifigma-weaveimage-generation+2

figmaJun 24, 2026

Principles in Motion | Figma Blog (opens in new tab)

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.

figmaaimotion-designanimation+2

figmaJun 24, 2026

Figma’s 2026 AI Report: Can AI Help Us Collaborate Better? | Figma Blog (opens in new tab)

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.

figmaaiprototypingcollaborative-design+2

figmaJun 24, 2026

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

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

figmagen-aireactmcp+3