figma-make

35 posts

figma

Measuring Time Savings From Figma Make | Figma Blog (opens in new tab)

Figma’s Data Science team found that Figma Make reduced design-task completion time by 20% and made work 16% easier. Product managers benefited most, completing tasks 23% faster and reporting a 37% improvement in ease. Because ordinary A/B tests and observational analyses could not adequately control for task complexity and user experience, Figma used a randomized controlled trial (RCT) with 100 participants. ## Why Measuring AI Time Savings Is Difficult - Productivity is influenced by confounders such as: - Job tenure and career experience - Individual design ability - Task complexity - Without controlling for these factors, it is difficult to determine whether improvements come from AI or from differences among users and tasks. ## Limitations of Common Research Methods - **Online A/B testing** - Randomly assigning users to treatment and control groups helps balance user characteristics. - However, users may perform different tasks, making it difficult to ensure that task complexity is comparable. - **Causal inference using product logs** - Methods such as propensity score matching require all relevant confounders to be present in the data. - Anonymized logs cannot capture subjective factors such as a user’s design experience. - Instrumental-variable analysis requires a valid factor that influences AI usage without independently affecting task speed; Figma could not identify one. ## The Randomized Controlled Trial - RCTs were selected because they can control confounders before data collection begins. - The study combined: - Random assignment to Figma Make and control groups - Identical tasks for all participants - Moderation by trained researchers - The study focused only on Figma Make to avoid introducing variables from multiple AI tools. - Participants included 100 people: - 50 product designers - 50 product managers - The sample size was based on effect sizes from prior industry research, including GitHub Copilot RCTs, followed by a statistical power analysis. ## Findings - Overall, Figma Make: - Made design work **20% faster** - Made work **16% easier** - Product managers experienced the largest gains: - Tasks were **23% faster** - Tasks were **37% easier** The study suggests that a carefully controlled RCT is a more reliable way to measure AI’s productivity impact when task differences and user characteristics are difficult to capture in product data. Teams evaluating similar tools should standardize tasks, randomize participants, and moderate the study to separate genuine AI benefits from other sources of variation.

figma

AI Fluency Isn’t the Finish Line | Figma Blog (opens in new tab)

AI skills are increasingly viewed as essential, but Figma argues that tool fluency is only the starting point. As AI makes it easier to generate work, the more valuable capabilities are building shared systems, guiding teams toward decisions, and creating an environment where people can experiment together. The goal is not for one person to work dramatically faster alone, but for entire teams to move faster collectively. ## Become an Internal Product Builder - Individual AI expertise has greater impact when turned into shared tools that benefit the whole team. - Useful examples include: - Prototyping agents - Brand plugins - Shared prompt libraries - Internal prototyping playgrounds - Figma researcher Shane Johnston used AI to build an interactive website for exploring the company’s AI report data, making the information accessible to cross-functional stakeholders. - Figma’s Brand Studio created an image-effect generator in Figma Make so teammates could apply custom, on-brand textures to designs with one click. - AI enables more employees—not just engineers—to identify workflow friction and build tools that solve it. - The broader opportunity is shifting from one person working “10x faster” to the entire team becoming more productive. ## Guide People to a Decision - When AI can produce dozens of possible directions quickly, evaluating and selecting among them becomes a core product skill. - Effective facilitation requires involving the right stakeholders, including: - People with dissenting or contrarian perspectives - Colleagues with historical context - Experts who can identify operational, security, or governance risks - One team discovered that an internally vibe-coded app exposed sensitive company project information, illustrating why data governance experts should be involved early. - Teams should provide context before review meetings through: - Prototype demonstrations - Loom videos - Annotated FigJam files - At Figma, these materials help shift meetings away from explaining options and toward discussing trade-offs and making decisions. - Facilitators should ensure discussions reach a clear outcome by inviting quieter participants, clarifying vague recommendations, asking forward-moving questions, and confirming next steps. ## Share Bad Ideas - AI adoption is occurring at different speeds across teams and organizations. - The report found that: - 20% of respondents said individual contributors were advancing faster than their organizations could support. - 27% said leadership was pushing AI adoption while teams struggled to keep up. - Without deliberate knowledge-sharing and collaboration, the gap between early adopters and less experienced users can continue to widen.

figma

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.

figma

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.

figma

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.

figma

GPT-5.6 is Now Available in Figma Make | Figma Blog (opens in new tab)

GPT-5.6 is now available in Figma Make, where Figma says it improves both the speed and quality of AI-generated prototypes. The model is designed to produce stronger first passes, preserve existing designs more faithfully, and recover from errors without stopping. Figma’s examples suggest it can move teams from prompts or static designs to functional, responsive prototypes with less iteration. ## Faster exploration and error recovery - GPT-5.6 can turn complex prompts into working prototypes quickly, helping teams explore multiple ideas in one session. - In Figma’s stock-tracking app evaluation, it created: - An interactive dashboard - Sample prices and performance data - Keyboard shortcuts and search - A dark, gothic visual style - The model is described as more token-efficient, helping users make better use of Figma Make credits. - When builds encounter errors, GPT-5.6 can investigate and self-heal instead of stopping. Figma reports that it independently diagnosed and fixed a blank build. ## Faithful design-to-code conversion - GPT-5.6 can build prototypes from existing design specifications or Figma Design files. - In a nature sound player test, it preserved: - Layout and visual hierarchy - Spacing, proportions, and styling - A multi-track timeline and sound library - It also implemented functional interactions, including: - Play, pause, and skip controls - Working audio playback - Multiple playable tracks - Audio-responsive visual effects ## Higher-quality first passes - Figma says GPT-5.6 produces polished initial prototypes with functional interactions and responsive layouts. - A bookshelf e-commerce example included: - Product descriptions, measurements, and care information - Populated information dropdowns - An interactive product photo library - A clickable navigation menu - The prototype adapted reliably across different screen sizes without additional prompting. - Stronger first passes allow teams to spend more time refining ideas collaboratively rather than repairing basic implementation problems. GPT-5.6 is available through Figma Make’s model selector. Users can select it directly in Make and consult Figma’s help center for guidance on choosing and using AI models.

figma

4 Ways We’re Using Our MCP Server at Figma | Figma Blog (opens in new tab)

Figma’s MCP server has expanded beyond design-to-code workflows to support Slides, FigJam, Figma Make, and the Figma design agent. The post argues that agents can now create and update production-ready artifacts while preserving team context, design systems, custom fonts, and brand consistency. In practice, humans still provide review and polish, but agents can complete much of the initial content and formatting work. ## Broader MCP capabilities - Agents can create or update: - Figma Slides presentations - FigJam boards - Figma Make prototypes - Canvas designs through the Figma agent - The server supports: - Custom fonts uploaded from a user’s computer - Downloading assets as SVG, PDF, JPG, or PNG through `download_assets` - Reusable MCP skills that encode team decisions and workflows - These capabilities connect external context and coding tools with Figma’s design environment. ## Creating and refreshing Figma Slides decks - Designer advocate Mallory Dean maintains an evergreen deck about Figma’s AI product launches. - She prompted an agent to: - Update the deck with the new Figma agent - Gather information from Slack, Google Drive, Shortcut blog posts, and release notes - Suggest content updates and new slides - The agent used the `use_figma` tool and `/figma-use-slides` skill to modify the existing deck template. - The first 80% of the content work was completed before human review. - Mallory still needed to replace images, edit copy, and approve the final slides. - Uploaded custom fonts allowed the deck to use the correct brand typefaces rather than web-safe substitutes. - Similar workflows can support: - Product kickoff decks - Design explorations - Go-to-market presentations - Sales decks with current product information - The stated benefit is faster production of presentations that remain aligned with a team’s design system and brand. ## Generating FigJam boards from live data - Product manager Prasant Lokinendi frequently prepares feature kickoff workshops. - Building an engaging FigJam board requires collecting company context and formatting the board for each session. - To streamline this process, he created the `/figjam-builder` skill. - Figma describes skills as a way to make agent outputs more consistent and context-aware. - Teams can use community-created skills or submit their own through Figma’s community-resources repository. Figma’s MCP workflows are most useful for accelerating repetitive preparation and production work while leaving humans responsible for review, judgment, and final creative decisions.

figma

4 New Ways to Go From Idea to Product With AI Tools | Figma Blog (opens in new tab)

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

Figma Make, Now on Your Local Code | Figma Blog (opens in new tab)

Figma is bringing Make beyond prototyping by connecting it directly to local production codebases. Designers can visually edit interfaces, use annotations and prompts for more complex behavior, and manage changes through Git workflows without leaving Figma. The broader goal is to make design and code a continuous, collaborative workflow rather than separate tools. ## Visual Editing in Production Code - Make connects to a local codebase and translates visual changes into code. - Users can select interface elements and modify: - Layouts - Colors - Fonts - Sizing - Other visual properties - Annotations let users describe interactions, animations, and other changes that go beyond simple property edits. - The feature is currently best suited to designers who already have access to their organization’s codebase. ## Git-Based Branching and Shipping - Make supports standard development workflows, including: - Creating branches - Reverting commits - Reviewing commit history - Creating pull requests - Changes remain in local commits until the team intentionally opens a pull request. - Engineering teams can review Make-generated changes like any other production contribution. ## Collaboration Between Design and Code - Local code changes can be shared as files and links with teammates who have access to the relevant branch. - Teammates can inspect changes, build on them, and compare versions through commit history. - Screens, pages, and components can be copied from Make into Figma Design as editable layers. - Changes made in Figma can be detected and brought back into Make, creating a round-trip workflow between the design canvas and codebase. ## Beta Availability - Direct editing, annotations, chat, and pull-request creation enter limited beta on May 28, 2026. - Beta access is limited to Figma’s Mac desktop beta app and requires joining a waitlist. - The features will not consume credits during beta; pricing for AI credits will be announced later. - Figma plans to expand availability to other platforms. Figma’s recommendation is effectively to use whichever environment best fits the current task—design canvas, code-based prototyping, or production code—while maintaining a shared workflow between them.

figma

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

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

figma

How AI Leaders Are Borrowing From the Design Playbook | Figma Blog (opens in new tab)

AI transformation requires more than deploying new tools; it requires redesigning how organizations work. Figma argues that the most effective AI leaders adopt design practices—hands-on experimentation, close observation of workflows, and rapid prototyping—to turn adoption and innovation into meaningful business change. ## AI Leadership as Organizational Design - New AI innovation and acceleration roles are emerging to improve workflows, speed product launches, and expand tool adoption. - These leaders often coordinate AI strategy across product, support, internal operations, and technology investments. - A major risk is “performative progress”: adopting tools for appearances without changing the underlying systems and processes. - Effective leaders connect technology, teams, workflows, and business outcomes. ## Learn the Material by Using It Yourself - Leaders need firsthand experience with AI tools rather than relying only on strategic or executive-level perspectives. - Prompting, building agents, and experimenting across different tools reveals practical limitations, trade-offs, and adoption barriers. - Personal projects—such as planning travel, organizing events, or managing volunteer work—can provide low-risk opportunities to develop AI fluency. - Leaders cannot effectively guide organizations through probabilistic technologies without understanding how those technologies behave in real situations. ## Observe How Teams Actually Work - Understanding AI use across the business requires studying workflows, not just tools and their outputs. - Useful signals include Slack discussions, survey responses, usage patterns, frustrations, and points where employees get stuck. - An automation may appear successful technically but fail because it adds friction to an already complicated process. - When adoption stalls, teams may be routing around the official solution and creating unofficial alternatives; observing this behavior helps identify the real problem. ## Turn Ideas Into Prototypes - Ideas often fail because teams cannot visualize or evaluate them, not because the ideas themselves are flawed. - Prototyping converts abstract AI concepts into tangible experiences that teams can discuss and test. - Tools such as Figma Make can help leaders and teams explore concepts quickly and make early possibilities easier to understand. - Design combines observation with action: leaders should learn from real behavior, then use prototypes to test potential solutions. AI leaders should therefore combine technical curiosity with design discipline: use the tools personally, study how people work, and prototype proposed changes before attempting broad implementation.

figma

How Figmates Used Figma AI to Take Delight to the Next Level | Figma Blog (opens in new tab)

Figma’s 2026 April Fun Day project, “FigCade,” used Figma Make, Figma Weave, and the Figma MCP server to create six playable mini-games in only a few days. The tools helped the team rapidly prototype ideas, explore visual styles, produce media, and translate designs into code. The project demonstrated how AI can make design and development more collaborative and iterative. ## Building a playful canvas experience - April Fun Day is Figma’s annual tradition of adding playful surprises and Easter eggs for its community. - This year, the team brought six mini-games directly into the Figma canvas for one week. - The project also gave employees an opportunity to experiment beyond their usual roles and push Figma’s tools in new ways. - The resulting FigCade included games such as: - **2Fast2Figma**, a timed quiz about Figma facts. - **FigPalette** and **Diabolical Magic Square**, featured in the game menu. ## Rapid prototyping with Figma Make - Figma Make helped the team turn ideas into working prototypes quickly. - An early concept for 2Fast2Figma was created on a Sunday morning and became functional that afternoon. - The team generated multiple prototypes, tested them with others, and iterated based on feedback. - This established a fast workflow: build something quickly, review it, align with the team, and refine it. ## Exploring visuals with Figma Weave - Figma Weave helped designers generate and explore visual assets more efficiently. - Designer Lesley Moon used it to create felt-style textures and assets, including the project’s textured cursor. - Generating many variations quickly expanded the range of visual themes the team could consider. - Weave was also used to develop the April Fun Day trailer: - Product Manager Tara Nadella explored the initial concept. - Motion Designer Fifi Law used those explorations and Lesley’s visuals to produce the final trailer in one day. ## Connecting design and code with MCP - The Figma MCP server helped developers turn design explorations into implementation. - Engineer Steven Noto used Claude and GitHub Copilot with MCP authentication. - By sharing links to specific Figma components, the coding agents could access design context and generate code matching the intended specifications. - The team moved back and forth between design and development, using AI to reduce the distance between visual concepts and working software. ## Practical takeaway FigCade illustrates how combining rapid prototyping, generative visual tools, and design-aware coding assistance can help small teams create polished interactive experiences quickly. The strongest results came from treating AI as part of an iterative design-and-development process rather than as a replacement for human direction.

figma

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

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

figma

6 Designs That Reimagine How We Interact With Software | Figma Blog (opens in new tab)

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

Issue no.15: The State of Design | Figma Blog (opens in new tab)

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.