Figma Make

35 posts

figmaMar 10, 20262 min readCurated summary

5 Design Skills To Sharpen in the AI Era | Figma Blog

AI is changing product creation by accelerating experimentation and expanding who can participate in design. Figma argues that designers should strengthen adaptable, technology-oriented skills rather than rely only on traditional craft. The first priority is becoming fluent with AI tools and learning to prompt them effectively, while maintaining human judgment and design fundamentals. ## AI Fluency and Prompting - AI skills are becoming essential for designers and increasingly important in non-design roles such as product management, development, and marketing. - More than half of designers and hiring managers consider AI design capabilities—such as rapid prototyping and “vibe coding”—important hiring skills. - Among designers who adopted AI during the past year: - 91% say it helps them create better designs. - 89% say it helps them work faster. - AI can support many activities, including: - Editing images directly within a workflow. - Building prototypes instead of writing traditional product requirements documents. - Testing assumptions and creating tangible artifacts for team alignment. ## Writing Better Prompts - Clear, structured prompts produce more reliable AI-generated results. - Figma recommends organizing prompts around: - The task - Context - Required elements - Behavior - Constraints - Prompting is presented as a repeatable design practice, not merely a way to get a one-off output. - Strong prompts help turn AI into a consistent design partner rather than an unpredictable experimentation tool. ## Broader Changes to Design Work - AI is lowering barriers to participation and blurring boundaries between product roles. - Designers are increasingly expected to work across disciplines and use AI to extend their capabilities. - Prototyping is becoming a faster way to communicate ideas, validate assumptions, and build momentum than relying solely on written documentation. Designers should build practical fluency with AI tools, practice structured prompting, and use prototypes to make ideas concrete—while applying their own judgment to guide and evaluate the results.

Figma Make Figma AI Prototyping+2

figmaMar 10, 20262 min readCurated summary

Vishal Kapoor’s 10 Rules for Building Honest Products with AI | Figma Blog

AI product development is ultimately a trust challenge, not merely a technical one. Vishal Kapoor argues that AI should accelerate exploration and execution without replacing human judgment, empathy, or accountability. His approach centers on building products that remain transparent, secure, emotionally aware, and honest—especially in sensitive areas such as personal finance. ## Start with First-Principles Thinking - Break complex problems into their fundamental components before reaching for an AI solution. - AI can accelerate ideation and iteration, but it cannot replace human intuition, taste, or a distinctive product perspective. - Question basic assumptions to uncover better alternatives. For example, Affirm challenges why customers receive three payment-plan options rather than one, five, or a customizable plan. - Thoughtful disagreement among people remains essential for generating meaningful insights; AI is best used to explore possibilities more quickly. ## Stay Close to Human Emotions - Product teams should regularly observe customers, conduct UX research, read app-store reviews, monitor social media, and speak directly with users. - Metrics and dashboards identify patterns, but they do not fully explain the emotions behind customer behavior. - Financial products especially require sensitivity to anxiety, frustration, trust, and relief—not just transactional outcomes. - Affirm uses an internal AI tool called Pluto to investigate recent customer disappointments, while still relying on human observation and empathy to interpret those experiences. ## Treat AI as a Teammate - AI is neither a guaranteed productivity multiplier nor an inevitable replacement for employees; it is another participant in a collaborative product-development process. - Tools such as Figma Make help teams convert customer insights into prototypes and test ideas faster. - AI can audit large numbers of screens and interaction patterns across web, mobile, and desktop experiences, identifying outdated or inconsistent designs. - Moving repetitive auditing and prototyping work from engineers to designers and product managers increases iteration speed and creates more room for creativity. ## Test the Edge Cases - Trustworthy products cannot be designed only around the happy path. - Teams should deliberately explore unusual inputs, failure modes, and unexpected customer situations rather than assuming normal usage. - The article begins this rule by emphasizing that authentic product quality depends on examining the difficult and overlooked scenarios where users are most likely to encounter confusion or harm. The overall recommendation is to use AI aggressively for exploration, prototyping, and repetitive analysis—but keep humans responsible for defining the problem, understanding customers, challenging assumptions, and ensuring the final product is honest.

Figma Make AI User Experience Prototyping+2

figmaMar 4, 20262 min readCurated summary

3 Ways Teams Are Building Conviction Faster With Figma Make | Figma Blog

Product teams are using Figma Make to turn abstract product ideas into interactive prototypes earlier in the process. By making concepts tangible, PMs can align designers and engineers, test assumptions, collect feedback, and build conviction before significant development begins. The article highlights examples from ServiceNow, Ticketmaster, and Affirm. ## Prototyping Instead of Relying Only on PRDs - Product managers traditionally translate customer needs, design goals, and engineering constraints into shared decisions. - Figma Make lets them create prototypes that demonstrate both a product’s appearance and behavior. - Interactive prototypes provide more useful early feedback than static mockups or abstract explanations. - Teams can identify problems, test ideas with users, and adjust direction before implementation progresses too far. - Earlier visibility helps teams make better-informed decisions and build products that more closely meet user needs. ## Bringing Complex Product Thinking Into Shared Focus - At ServiceNow, Product Director Ram Devanathan works with a design team serving multiple product groups, making dedicated design support difficult to obtain. - He needed to redesign a configuration page containing 15–20 settings, including technical options affecting incident prioritization and system load. - The initial mockup was functional but did not fully communicate the desired hierarchy, guidance, or tone. - Ram used Figma Make to transform the mockup into a clearer prototype: - Settings were grouped logically. - Simpler options appeared first. - Tooltips explained individual settings. - A warning clarified that changes required restarting the service. - The prototype gave Ram and the designer a shared, concrete representation of the intended experience. - Figma Make templates can also embed design systems and UX patterns, allowing PMs to iterate consistently without requiring designers for every early exploration. - Ram found that showing the idea directly was much more effective than describing it abstractly, helping the team reach agreement faster. ## Validating Features Before Building - The article next introduces Ticketmaster’s use of Figma Make for validating new features before development. - Ticketmaster applies prototypes to situations involving high-demand concert ticket purchases and internal dashboards for monitoring sales and troubleshooting issues. - The provided excerpt ends before explaining the specific feature-validation process or the third approach involving Affirm. Figma Make is presented less as a replacement for design or engineering and more as an early collaboration and validation tool. Product teams can use it to communicate complex behavior, explore alternatives, and secure alignment before committing substantial resources.

Figma Make AI Design Systems User Experience+3

figmaJan 22, 20262 min readCurated summary

Show Don’t Tell: Embed Make Prototypes Everywhere You Work in Figma | Figma Blog

Figma is introducing live Figma Make prototype embeds for Figma Design, FigJam, and Figma Slides. The goal is to replace static screenshots and abstract explanations with interactive experiences that support alignment, feedback, and faster iteration. New editing controls also let users refine text, styling, and individual elements directly in prototypes. ## Embed Prototypes Across the Workflow - **FigJam:** Teams can use interactive prototypes as the focus of early discussions, making it easier to prioritize features and identify gaps in user journeys. - **Figma Design:** Designers and collaborators can review UI, copy, and interactions in context, compare iterations side by side, and turn feedback into concrete Make updates. - **Figma Slides:** Presenters can let stakeholders experience concepts directly and use Slides’ voting tool to gather input before refining the prototype. ## Refine Prototypes with Direct Editing - Users can edit text directly in a prototype to explore content variations and respond quickly to feedback. - The point-and-edit tool supports precise changes to color, spacing, and text styling. - Specific prototype nodes can be deleted without disrupting the rest of the structure. - `Command+Z` can undo deletions, supporting rapid experimentation. ## Greater Visibility Into AI-Generated Work - As prototypes become more complex, Figma Make is adding visibility into how the model builds them. - This allows users to review the model’s approach and course-correct while ideas evolve. Figma’s update positions Make prototypes as interactive, continuously refined artifacts that can travel from brainstorming through design review and stakeholder presentation. Teams can embed prototypes where decisions happen, gather more realistic feedback, and make targeted changes without leaving the workflow.

Figma Make Figjam Figma Slides Figma Design+2

figmaJan 4, 20263 min readCurated summary

Cooking with Constraints: A Designer’s Framework for Better AI Prompts | Figma Blog

Design and cooking both depend on preparation: clear inputs and intentional constraints lead to better outcomes. The article argues that AI models do not need politeness or emotional framing; they need precise instructions that reduce ambiguity. For product designers, structured prompting bridges the gap between probabilistic AI outputs and the repeatable, purposeful results design requires. ## Prompting as Mise en Place - “Mise en place,” or “everything in its place,” means preparing ingredients before cooking—and serves as a useful model for preparing AI prompts. - Effective prompts should establish: - **Clarity** - **Context** - **Constraints** - The author’s framework is **TC-EBC**: - **Task:** What should be built or accomplished? - **Context:** Who is it for and why? - **Elements:** Which features or components are required? - **Behavior:** How should the system respond to user actions? - **Constraints:** What technical, platform, accessibility, or product limits apply? - This approach aligns with broader prompt-engineering guidance emphasizing defined intent, modular construction, and predictable results. ## Why Vague Prompts Underperform - A request such as “build an app that uses pantry photos to suggest recipes” leaves too many decisions to the model. - Polite language and conversational phrasing can bury the actual task without adding useful information. - The resulting prototype may include basic functionality but remain visually generic, uninteresting, and barely beyond a wireframe. ## Applying TC-EBC to a Design Prompt For a pantry-based meal suggestion app, the structured prompt specifies: - **Task:** Build an AI-powered meal suggestion app using pantry and refrigerator photos. - **Context:** Create a home-cooking assistant for households with dietary restrictions. - **Elements:** Include camera input, pantry scanning, dietary settings, meal suggestions, and recipe cards. - **Behavior:** Let users upload photos, scan inventory, apply dietary preferences, and receive recipes. - **Constraints:** Make the experience mobile-first, support iOS and Android, provide accessible UI, and allow multiple household profiles. This structure makes the request easier to scan and gives the model explicit guidance about the app’s purpose, interface, behavior, and limitations. ## Design Requires Structured Uncertainty - LLMs are stochastic, meaning their outputs are probabilistic and variable. - Design, by contrast, depends on precision, consistency, and intentional decisions. - Structured prompts help “collapse uncertainty into structure,” much as a design system provides reusable rules and guidance. - The article presents the TC-EBC prompt as producing a substantially more purposeful prototype than the original one-shot request. A practical recommendation is to treat prompting like preparation for a complex recipe: define the task, provide relevant context, list required parts and behaviors, and state constraints before asking the AI to generate a design.

Figma Make Design Systems Large Language Models Prototyping+2

figmaDec 15, 20253 min readCurated summary

Prototypes Are the New PRDs | Figma Blog

Prototypes are increasingly replacing traditional Product Requirements Documents because they communicate product intent more clearly than static text. Figma argues that interactive, high-fidelity prototypes help product managers explore uncertain problem spaces, generate alternatives, and build alignment earlier. Using Figma Make, PMs can turn vague ideas into tangible experiences that teams can critique and refine. ## Product Management Is Becoming More Prototype-Driven - PMs are increasingly prompting and prototyping alongside designers and engineers instead of relying primarily on documents for review. - Interactive prototypes show behavior and nuance that mocks, diagrams, slide decks, and written requirements often leave teams to imagine. - A working example can create momentum, expose assumptions, and make discussions more concrete. ## Exploration: Defining the Problem Space - Prototypes help teams investigate poorly understood problems before committing to a specific solution. - Figma PM Tara Nadella used Figma Make to explore “Check designs,” a design-system linter that identifies raw values and recommends variables. - By experimenting with rough flows and interactions, she clarified questions about: - Whether to use wraparound plugins - How the end-to-end experience should work - Which visual and interaction choices were intuitive - Prototyping helped her form an informed opinion before the team progressed too far with an early concept. ## Exploring Multiple Directions - Figma Make reduces the blank-canvas problem by quickly producing several approaches to evaluate. - Make kits ground generated prototypes in real product components, making them more realistic than generic AI mockups. - The Copy design feature converts Make previews into editable Figma Design layers, allowing teams to: - Create variations - Add visual refinement - Move designs back into Figma Make for continued prototyping - Sean Lee used Figma Make to test how Figma Slides might automatically apply brand colors based on a user’s prompt. - He remixed existing Slides templates to simulate automated color selection, helping the team demonstrate the idea rather than merely describe it. - AI image tools further speed up exploration by removing backgrounds, isolating objects, and reframing images directly on the canvas. ## Practical Guidance from Figma PMs - **Use real design systems:** Attach libraries and start from a base UI so prototypes reflect the actual product. - **Take breaks:** Returning to a prototype later can reveal inconsistencies and overlooked details. - **Use templates:** Make templates establish a polished baseline and provide controls over what teammates can modify, supporting consistent exploration and brand alignment. ## Validation - After generating ideas, teams still need to determine which concepts deserve investment. - Prototypes support this transition by helping secure stakeholder buy-in and gather user feedback. - Because users can react to an experience rather than an abstract description, prototypes can produce more meaningful validation and help confirm whether a direction is sound. The article’s central recommendation is to build early and use prototypes as living requirements. Teams should ground those prototypes in their real design systems, iterate collaboratively, and use them to replace assumptions with observable behavior.

Figma Make Figma AI Design Systems+2

figmaDec 10, 20252 min readCurated summary

Figma Make Is Now Available in Figma for Government | Figma Blog

Figma Make is now available in Figma for Government, giving federal agencies a secure way to create and test interactive prototypes. Figma argues that faster, collaborative design can help modernize public services, improve accessibility, and build public trust. The feature is available within Figma’s FedRAMP Moderate–authorized environment, although some cloud infrastructure will not reach full compliance until 2026. ## Modernizing Public Services - Government teams are improving services such as public portals, operational systems, benefits platforms, and research tools. - The online passport renewal system demonstrates the potential impact: by 2025, more than two million people had renewed passports online, with 97% reporting a positive experience. - Public-sector projects are difficult because policymakers, technologists, and operational leaders must coordinate under changing requirements and limited resources. - A 2025 executive order highlighted usability, accessibility, and design consistency as essential to citizen-facing services. ## Faster Prototyping and Collaboration - Figma Make enables teams to turn ideas into interactive prototypes in hours rather than weeks. - Designers, policy leaders, researchers, engineers, and IT staff can collaborate in a shared workspace. - Teams can test workflows and validate assumptions with citizens before development begins. - Shared libraries, integrations, accessibility standards, and design patterns help agencies maintain consistency. - Prototyping supports a wide range of initiatives, including federal benefits, financial communications, education platforms, space systems, and internal agency tools. ## Security and Compliance - Figma Make is included in Figma for Government and operates within its authorized environment. - Figma for Government is FedRAMP Moderate authorized, providing agencies with a compliant foundation for design and prototyping. - Figma notes that part of its cloud infrastructure is expected to achieve full FedRAMP Moderate compliance in 2026, while Make is usable today within the authorized environment. ## Broader Government Design Efforts - Federal agencies are already using Figma to modernize complex public services. - Shared design systems can improve accessibility and consistency across agencies and products. - Examples such as the National Park Service’s digital app illustrate how small teams can transform large, paper-based systems into accessible digital experiences. Figma positions Make as a practical tool for helping agencies adopt faster, citizen-first design processes. Government teams can use it to explore ideas early, collaborate across disciplines, and test accessible services before committing development resources.

Figma Make Figma Design Systems Prototyping+3

figmaDec 8, 20252 min readCurated summary

Updates to AI Credits in Figma | Figma Blog

Figma is expanding access to AI while adding clearer controls over credit consumption. The company has introduced usage tracking for both administrators and individual users, and will soon offer subscription-based and pay-as-you-go options for additional credits. Seat credit limits will become enforceable beginning March 18, 2026. ## Tracking AI Credit Usage - Billing administrators can see: - Which team members use AI features - How many credits each person has consumed - Which users have run out of credits - How many days remain before credits reset - Individual users can view their remaining balance and reset date. - Most AI actions will display the number of credits they consume. ## Purchasing Additional Credits Beginning March 11, 2026, teams will have two ways to buy credits beyond their included allowances: - **AI credits subscription** - Provides a shared monthly credit pool. - Offers better rates for teams with regular AI usage. - Packages begin at 5,000 credits per month. - **Pay-as-you-go billing** - Charges teams only when additional credits are needed. - Can be used independently or alongside a subscription. - Supports a team-defined spending limit. - Expected to become available by Q2 2026. Example pricing includes: - 5,000 credits: $120 monthly subscription or $150 pay-as-you-go - 7,500 credits: $180 monthly subscription or $225 pay-as-you-go - 10,000 credits: $240 monthly subscription or $300 pay-as-you-go ## Included Credit Allowances and Enforcement Monthly seat allowances vary by plan: - Starter: 500 credits - Professional full seats: 3,000 credits - Organization full seats: 3,500 credits - Enterprise full seats: 4,250 credits - Other seats: generally 500 credits Figma will begin enforcing all seat credit limits on March 18, 2026. Teams should therefore monitor usage and choose either an add-on subscription or pay-as-you-go billing if their AI needs exceed the included amounts.

Figma Make Figma Prototyping Figma Ai+3

figmaNov 25, 20253 min readCurated summary

Version Control: One Founder’s Mission to Save Local Farms with Figma Make | Figma Blog

Aaron Veale used Figma Make to build Planet Food, a marketplace connecting British Columbia farmers with Vancouver restaurants, in under three weeks. Motivated by the financial crisis facing local farms, he used rapid AI-assisted prototyping to validate the idea directly with farmers and chefs. The project shows how prompt-to-app tools can help founders move quickly while tailoring products to real user workflows. ## The problem facing local farms - British Columbia farmers lost a record CAD $457 million last year, with the sector operating at a net loss since 2017. - Rising costs, disrupted supply chains, regulatory changes, and factory-farm competition are pushing small growers out of business. - Farmers are skilled at producing food but often lack time and resources for marketing and sales. - Large distributors can pressure farmers into selling produce at a loss. - Veale envisioned a marketplace linking farms directly with restaurants seeking high-quality local ingredients. ## Building the first marketplace prototype - Veale spent six weeks interviewing farmers before developing the product. - Planet Food required two connected systems: - **Farm OS:** Farmers record and categorize available produce. - **Restaurant OS:** Chefs search for and order ingredients. - He built both systems in parallel using separate Figma Make projects. - Roughly 20 prompts produced the first prototype in a single day. - Early versions became conversation starters that Veale could show farmers and restaurants for immediate feedback. ## Designing for farmers’ daily reality - The app uses dark mode to reduce glare for farmers working outdoors. - Because farmers may work 12–16-hour days, tasks were designed to take fewer than three clicks. - Veale prioritized simple workflows over feature-heavy interfaces. - He used screenshots of familiar interactions, such as swipes and slide-ups, as prompt references. - Figma Make allowed him to refine the product’s mobile-first interface without relying on a large engineering team. ## Humanizing the product through personas - Veale used his design and filmmaking background to treat prompting as a form of storytelling. - He created detailed personas describing users’ traits, motivations, responsibilities, and pain points. - The farmer persona emphasized: - Small or midsize British Columbia operations - Limited administrative capacity - Seasonal workloads and slim teams - The need for fair prices and predictable income - Common frustrations included manually updating spreadsheets, guessing restaurant demand, and overselling or underselling due to poor synchronization. - Veale used ChatGPT to turn these personas and the onboarding flow into more detailed Figma Make prompts. - Custom icons and branded interactions helped make the interface more approachable and engaging. ## Speed as a startup advantage - Figma Make enabled Veale to move from an idea to a functioning MVP in weeks rather than following the traditional fundraising-and-development sequence. - Demonstrating an actively used product gave him stronger evidence of market demand and a potential signal for investors. - The process also let him remain closely involved in product design instead of compromising his vision through multiple layers of implementation. Planet Food illustrates how AI-assisted development can accelerate product validation while keeping design grounded in user research. For founders addressing urgent problems, rapid prototyping combined with direct customer feedback can be more valuable than waiting to assemble a conventional product team.

Figma Make AI User Experience Design Chatgpt+2

figmaNov 18, 20252 min readCurated summary

5 Shifts Redefining Design Systems in the AI Era | Figma Blog

Design systems are evolving from static libraries into living frameworks that preserve craft, context, and brand identity while AI accelerates product development. The article argues that speed without direction creates divergence, whereas AI grounded in a strong design system can increase exploration and execution without sacrificing quality. This shift requires systems to encode not only reusable assets, but also the reasoning and standards behind them. ## From consistency guides to carriers of craft - AI can generate quickly, but without clear foundations its work may drift from a team’s vision. - Design systems increasingly encode taste, intuition, interaction patterns, and creative identity. - Components, layouts, and interactions can carry a consistent sensibility throughout development. - The goal is to scale production while preserving the human qualities that distinguish a product. ## Enabling grounded exploration - AI tools such as Figma Make allow teams to generate many design directions rapidly. - A robust design system keeps those explorations usable by grounding them in shared components and established patterns. - Teams can test variations in layouts, colors, and component arrangements without starting from scratch. - Once a direction is selected, moving to production becomes more about refinement than reconstruction. ## Building systems for AI consumption - Traditional systems assumed that designers and developers could infer missing context from the brand and business. - AI lacks that implicit understanding, so systems must explicitly document: - Design rationale - Constraints and decision criteria - Examples of quality - Usage guidance across documentation, code, and design - Tokens and components alone are insufficient; AI needs the surrounding context to produce aligned outputs. ## Expanding into governance - Design system teams are moving beyond maintaining component libraries. - Their role increasingly includes governing the broader set of tools and workflows through which people contribute to products. - This is especially important as AI enables contributors without traditional design or product titles to influence product experiences. - The provided excerpt ends while introducing this broader governance role, so the article’s fifth shift is not included. Overall, teams should treat design systems as active sources of craft and context—not merely collections of reusable components. Systems that make implicit knowledge explicit can help AI increase speed while keeping product decisions coherent and distinctive.

Figma Make Figma AI Design Systems+2

figmaNov 17, 20253 min readCurated summary

Gemini 3 Is Now Available In Figma Make | Figma Blog

Figma has made Gemini 3 Pro available as an experimental model in Figma Make, positioning it as a tool for turning design ideas into polished, interactive prototypes. Early tests suggest it is particularly strong at exploring varied visual styles, layouts, motion, and interaction patterns while preserving functional fidelity. Figma’s broader conclusion is that AI expands designers’ creative range rather than replacing their role in directing and refining ideas. ## Bridging the Design-to-Code Leap - Gemini 3 Pro was tested on a Thanksgiving gratitude board designed in Figma Design. - It generated animated SVG leaves with on-screen physics, creating a calm, organic motion. - A Supabase connection allowed visitors to submit gratitude notes. - New notes appeared as leaves that revealed their messages on hover. - The example demonstrated how a visual concept could quickly become a functional, code-backed experience. ## Exploring Distinct Visual Styles - A New Year’s Eve RSVP page was used to test Gemini’s stylistic flexibility. - The model first created a Y2K-inspired design with: - Retro-futuristic visuals - Dark chrome styling - A functioning RSVP form - It then transformed the same experience into a “concrete poetry” treatment featuring: - Severe typography - Brutalist tension - Minimal decoration - Gemini maintained the core interaction and form functionality across both radically different aesthetics. - Motion and interactive details were adapted to match each visual direction. ## Working Within Design Systems - Figma tested Gemini 3 Pro in a mature UI environment using Make kits, npm imports, and Figma’s UI3 library. - Starting with a FigJam template, the team asked it to add a canvas background-style switcher. - Gemini produced 12 background styles using the correct UI3 components and functional interactions. - It also added unexpected refinements, including: - Animated transitions between textures - Sticky-note layering - Scaling effects - The result showed that the model could extend an existing design system rather than only generate isolated concepts. ## A Wider Canvas for Design - Figma argues that AI can increase the range of ideas designers are able to explore. - Gemini 3 Pro combines rapid iteration with visual and interaction fluency. - Gemini 3 Flash is also available as a faster, lighter option for quick ideation and refinements. - Both models can be enabled through Figma’s settings under the experimental models section, marked by the lab icon. Overall, Figma presents Gemini 3 Pro as a practical bridge between design, code, and experimentation. It is most valuable when designers use it to explore possibilities quickly while continuing to guide the creative direction and quality of the final result.

Figma Make AI Design Systems Figjam+4

figmaNov 5, 20252 min readCurated summary

Issue No.13: All Systems Go | Figma Blog

Design systems are becoming essential infrastructure as teams move faster and adopt AI-assisted design and coding tools. Figma argues that well-structured systems extend quality and design intent across human and machine-generated work. The issue highlights how Figma’s products and customer practices are helping teams design, build, and collaborate more reliably in this new environment. ## Unlocking Design Systems - Schema by Figma emphasized that design systems now serve AI as well as human designers. - Figma is adding design-system context to Figma Make to improve generated results. - Its MCP server supports more effective agentic coding workflows. - The broader goal is to produce more consistent, polished, and reliable outputs as teams scale. ## Forging New Paths with Figma Make - Figma Make enables teams to move beyond traditional design workflows by working more directly in code. - Companies including Maven Clinic, Pendo, ServiceNow, and LinkedIn are using it to rethink: - Product roadmaps - Product requirements documents - Starter templates - Design-system deployment - Designers can use prompts to explore ideas, prototype faster, and create new paths for collaboration. ## Clarifying Design Context - As developers increasingly rely on AI coding agents, design files need to communicate more than visual appearance. - Clear file organization, meaningful structure, and annotations help developers—and AI tools—understand design intent. - Providing strong context allows coding tools to implement designs more accurately and efficiently. - Designers should treat their files and systems as shared sources of information, not merely presentation artifacts. ## Further Reading - Figma points readers to foundational design-system material covering basic principles through AI-driven automation. - It also recommends guidance for design leaders building resilient teams and helping designers adapt to rapid change. Strong design systems, combined with clear context and modern tools like Figma Make and MCP, can help teams preserve craft while increasing speed. The practical recommendation is to build systems that are understandable, reusable, and structured for both people and AI.

Figma Make AI Design Systems Model Context Protocol+1

figmaOct 7, 20252 min readCurated summary

4 Ways for Design Teams to Chart New Territory With Figma Make | Figma Blog

Figma Make helps design teams turn early ideas into interactive, high-fidelity prototypes without starting from scratch. The article argues that this accelerates buy-in, exploration, collaboration, and design-system consistency, allowing designers to focus more on strategy, vision, and refinement. Maven Clinic’s experience shows how a prototype can revive a shelved feature and shorten development dramatically. ## Getting Ideas Back on the Roadmap - Maven Clinic had postponed a map-based fertility clinic finder because of launch deadlines. - Product Design Manager Loric Avanessian used initial designs with Figma Make to create an interactive prototype. - The prototype looked and felt like part of Maven’s existing product, generating enthusiasm across the company and even attracting CEO attention. - Its realism helped restore the feature to the roadmap despite competing priorities. - Designers could iterate between Figma Make and Figma Design, refining the concept and testing details. - The prototype exposed important micro-interactions early and enabled Maven to design, develop, test, and launch an MVP in fewer than four sprints—after the idea had remained in the backlog for two years. ## Exploring Unfamiliar Directions - Figma Make helps teams quickly generate and compare multiple ideas. - By providing something tangible to react to, it reduces the blank-canvas problem and supports divergent exploration before requirements are finalized. ## Collaborating on New Interfaces - Interactive prototypes make ideas easier for cross-functional partners to understand and critique. - Teams can share prototypes, gather focused feedback, and identify issues earlier than they might with static mockups. ## Incorporating Design Systems Early - Figma Make can produce explorations that remain visually consistent with established product patterns. - This reduces redundant layout work while allowing designers to concentrate on taste, strategic decisions, and product vision. Figma Make is most valuable when used as an early design partner: create a credible first version quickly, gather feedback, refine it in Figma Design, and use the result to align stakeholders before development begins.

Figma Make Design Systems Prototyping Generative AI+2

figmaOct 6, 20252 min readCurated summary

6 Winning Figma Makes—and What You Can Learn From Them | Figma Blog

Figma’s first global Make-a-thon demonstrated how Figma Make can turn ideas into interactive prototypes quickly. More than 10,000 creators competed for $100,000 in prizes, and the winning projects were judged on creativity, innovation, execution, and prompt quality. The featured lesson is that creators should define an app’s structure and technical foundations—not merely describe the task. ## Make-a-thon and Figma Make - Figma Make is designed to bridge the gap between concepts and working, interactive creations. - The competition was held in partnership with Contra. - Entries ranged from a *Severance*-themed virtual escape room to a “Figma-Kart” racing game. - Winners showed how thoughtful prompting and experimentation can extend the tool beyond basic prototypes. ## Define the Structure, Not Just the Task - Second-place winner Sebastian Lumbi created a frame-by-frame SVG animation tool. - The app lets users: - Copy SVGs from Figma into the tool. - Build animations frame by frame. - Preview and export animations as GIFs. - His initial prompt described the product’s structure: a canvas at the top for drawing frames and a timeline below for viewing and adding frames. - Sebastian researched state management and component interaction before developing the app. - He used an iterative dialogue with the AI, beginning with two prompts and eventually adding roughly 80 more. - Figma Make’s revert feature allowed him to experiment safely and return to earlier versions when bugs or crashes occurred. ## Technical Understanding Improves AI-Generated Code - Even non-programmers benefit from understanding basic concepts relevant to their application. - Clear instructions about structure make generated code easier to debug and extend. - When technical decisions are unclear, creators can consult another AI for recommendations. - The main lesson is to establish the application’s architecture early, then use iterative prompts to refine features and solve problems. A practical approach is to describe the app’s components, state, and interactions up front, while treating AI generation as an iterative process with frequent testing and rollback.

Figma Make Prototyping Svg Animation+2

figmaSep 24, 20252 min readCurated summary

Bringing Figma Make to the Canvas | Figma Blog

Figma is bringing its AI-generated Figma Make previews directly into the Figma Design canvas through a new “Copy design” feature. Users can copy previews as editable, structured layers rather than static screenshots, making it easier to refine ideas collaboratively and move from prompt to prototype to production. Figma views this as the first step toward making Make outputs fully native and integrated with Design. ## Copying Make previews as editable layers - “Copy design” lets users bring any design from a Figma Make preview into Figma Design. - Imported previews become editable layers that can be: - Edited and remixed - Refined by teams - Used as building blocks for further design work - The feature removes the need for extra exporting, naming, or switching between separate workflows. - A product manager, for example, can generate and refine a mockup in Make, then place it into the Design canvas for the team to develop further. ## From screenshots to collaborative building blocks - Figma emphasizes that Make outputs should be more than finished-looking images. - Structured layers preserve context and enable direct iteration on the canvas. - This creates a more flexible path from: - Natural-language prompt - Prototype - Collaborative design - Production-ready work - The canvas becomes a shared space where anyone can contribute to and evolve AI-generated ideas. ## Learning from html.to.design - Figma acquired the technology behind <div>RIOTS’ `html.to.design` plugin. - The plugin converts live prototypes and HTML into editable Figma frames. - Figma Make users had already adopted the plugin to reconnect generated prototypes with the Design canvas. - The technology was demonstrated at Config 2025 and has been developed over three years, reaching nearly two million users. - <div>RIOTS will continue independently building and maintaining `html.to.design` and its other tools. - The partnership is intended to accelerate future development and new plugin features. ## Figma’s broader vision for Make - Figma wants AI to accelerate existing creative workflows rather than create isolated outputs. - The company sees the canvas as a place where ideas from any source can be imported, explored, and transformed collaboratively. - Copy design is presented as an early step toward deeper integration between Figma Make and Figma Design. Figma’s recommendation is implicit: use Make for rapid idea generation, then bring those ideas into Design as editable layers for collaborative refinement and production work.

Figma Make AI Prototyping CSS+3