Skip to main content

One place for full product development

Figma is the AI-native design platform where product teams explore ideas, align on direction, and move to production in one workspace.

Get started
An abstracted timeline in FigJam with arrow and star illustrations, colored stickies on a grid, and a green checkmark.
  • Atlassian
  • Braintree
  • Dribbble
  • GitHub
  • Microsoft
  • One Medical
  • Slack
  • The New York Times
  • Zoom
  • Walgreens
  • AirBnb
  • Asana
  • Basic/Dept
  • Coinbase
  • Dropbox
  • Herman Miller
  • Rakuten
  • Vodafone

Build with full context

Figma Make canvas showing a code-backed prototype with a 'Start virtual tour' button highlighted in blue and an instruction panel reading 'Make the button glow on hover', demonstrating design exploration on canvasFigma Make canvas showing a code-backed prototype with a 'Start virtual tour' button highlighted in blue and an instruction panel reading 'Make the button glow on hover', demonstrating design exploration on canvas

Explore every possibility

Quickly create code-backed prototypes with Figma Make, then spread multiple directions across the canvas to explore, compare, and refine.

Explore Figma Make

Design systems and tools

  • Figma interface showing three design system libraries selected for import — Earthling UI with 269 components, Earthling Brand with 208 components, and two npm packages for mobile and web — all marked as selectedFigma interface showing three design system libraries selected for import — Earthling UI with 269 components, Earthling Brand with 208 components, and two npm packages for mobile and web — all marked as selected

    Pull in design systems

    Bring library styles, npm packages, or code components into Make to ensure outputs are consistent and look like your product.

  • Figma MCP server interface showing a GitHub integration connector with a prompt reading 'Address the issue on the landing page described in @GitHub', demonstrating external tool connection via MCPFigma MCP server interface showing a GitHub integration connector with a prompt reading 'Address the issue on the landing page described in @GitHub', demonstrating external tool connection via MCP

    Connect your tools via the MCP server

    Use the Figma MCP server to pull context from external apps—like GitHub, Notion, and Atlassian—into Figma.

    Browse the MCP catalog

Collaborate and align

Figma canvas showing two prototype layouts for a trail run event with team members Chad and Kaley leaving comments, including a green comment bubble reading 'Let's go with this one!' indicating collaborative prototype reviewFigma canvas showing two prototype layouts for a trail run event with team members Chad and Kaley leaving comments, including a green comment bubble reading 'Let's go with this one!' indicating collaborative prototype review

Build as one team

Bring multiple prototypes onto the canvas at once. Let the team test and review before deciding on a direction.

Explore Figma Design

Brainstorm and collaborate

  • FigJam diagram showing a workout logging user flow from 'Log Workout' through a 'Select Type' decision point, branching into three categories (Lift, Run, Other), with team sticky notes from Chelsea and YeojinFigJam diagram showing a workout logging user flow from 'Log Workout' through a 'Select Type' decision point, branching into three categories (Lift, Run, Other), with team sticky notes from Chelsea and Yeojin

    Brainstorm in a shared space

    In FigJam, shape user flows, build wireframes, and organize ideas alongside your team, Figma AI, or your agents.

    Explore FigJam
  • Figma canvas showing a comment thread from Catherine suggesting to make text and carousel interactive, with design mockups and emoji reaction, mention, and attachment optionsFigma canvas showing a comment thread from Catherine suggesting to make text and carousel interactive, with design mockups and emoji reaction, mention, and attachment options

    Collaborate on the canvas

    Leave and get feedback with comments, work in your own branch without affecting the main file, and more.

  • Figma design file showing multiple financial wellness app screens with a modal dialog prompting to 'Explore different layouts for this screen', demonstrating AI-assisted team collaboration on product designFigma design file showing multiple financial wellness app screens with a modal dialog prompting to 'Explore different layouts for this screen', demonstrating AI-assisted team collaboration on product design

    Teammates and agents work together

    Figma’s agent generates multiple directions quickly, and automatically gathers and implements your feedback.

    Try Figma's agent

Production-ready prototypes

Figma Dev Mode interface showing a museum ticketing app design on the left alongside TypeScript App.tsx implementation code on the right, with home page, ticket booking flow, and museum detailsFigma Dev Mode interface showing a museum ticketing app design on the left alongside TypeScript App.tsx implementation code on the right, with home page, ticket booking flow, and museum details

Move from prototype to product

Ship with confidence. All Figma prototypes are code-backed and can be connected to your design system—preserving context between design and code.

Explore Dev Mode

Design and code

  • Figma MCP server interface showing a prompt 'Implement the selected design from Figma' with a linked design file URL and 'Copy prompt' button, overlaid on a map and events app UI mockupFigma MCP server interface showing a prompt 'Implement the selected design from Figma' with a linked design file URL and 'Copy prompt' button, overlaid on a map and events app UI mockup

    Push your prototype to your codebase

    Connect to the Figma MCP server so everything you build sends to your repo.

    Get the MCP guide
  • Figma Code Connect interface showing a list of synced design and code components — Button, Exhibition Card, Icon Button, Artist Card, and Footer — each linked to their corresponding TypeScript file pathsFigma Code Connect interface showing a list of synced design and code components — Button, Exhibition Card, Icon Button, Artist Card, and Footer — each linked to their corresponding TypeScript file paths

    Connect design and code

    Sync design and code components with Code Connect. What you build is what ships.

  • A Figma Make Local dialog confirming a completed code sync with 12 files worked on and 6 files changed, with a 'Push changes' button ready to deploy to productionA Figma Make Local dialog confirming a completed code sync with 12 files worked on and 6 files changed, with a 'Push changes' button ready to deploy to production

    Design and ship in one place

    Use Figma Make locally to build in any codebase, then ship right to production.

Figma Make has shortened the path from idea to finished feature in a way I can't imagine replacing.

Brian Muehlenkamp
Product Manager, Ticketmaster

ticketmaster logo

Explore product development resources

  • Product guide thumbnail showing AI-powered features across three panels: a 14-day savings streak tracker, a pie chart with AI spending analysis, and achievement badges and budget progress tracking toolsProduct guide thumbnail showing AI-powered features across three panels: a 14-day savings streak tracker, a pie chart with AI spending analysis, and achievement badges and budget progress tracking tools

    Product guide: Explore more directions, faster with AI

    Explore best practices for working with AI to generate multiple directions and embrace divergent thinking.

    Get the guide
  • Vibrant blurred garden of colorful flowers in pink, red, orange, yellow, and purple — blog thumbnail for 'What matters when anyone can build'Vibrant blurred garden of colorful flowers in pink, red, orange, yellow, and purple — blog thumbnail for 'What matters when anyone can build'

    What matters when anyone can build

    If AI can make anyone a product builder, the real edge is knowing what’s worth shipping.

    Read the blog post
  • Colorful abstract illustration with interconnected geometric shapes, flowing lines, and vibrant circles in purple, blue, green, and yellow — blog thumbnail for '3 ways product teams are building conviction faster with Figma Make'Colorful abstract illustration with interconnected geometric shapes, flowing lines, and vibrant circles in purple, blue, green, and yellow — blog thumbnail for '3 ways product teams are building conviction faster with Figma Make'

    3 ways product teams are building conviction faster with Figma Make

    From communicating complex behaviors to pushing the edges of an idea, product managers are using Figma Make to prototype their way forward.

    Read the blog post
  • Figma design agent interface showing a book reading progress card for 'Split' by Natasha Ruiz, with page progress and a weekly reading chart — blog thumbnail for 'The Figma design agent is here'Figma design agent interface showing a book reading progress card for 'Split' by Natasha Ruiz, with page progress and a weekly reading chart — blog thumbnail for 'The Figma design agent is here'

    The Figma design agent is here

    Work with an agent that is built for Figma—directly on the canvas.

    Read the blog post
  • Colorful illustration featuring interconnected geometric structures with a pyramid and cube against a red background, surrounded by green spheres and flowing lines — blog thumbnail for '4 new ways to go from idea to product with AI tools'Colorful illustration featuring interconnected geometric structures with a pyramid and cube against a red background, surrounded by green spheres and flowing lines — blog thumbnail for '4 new ways to go from idea to product with AI tools'

    4 new ways to go from idea to product with AI tools

    From redrawing product roadmaps to building starter templates, these Figma Make ideas show how designers can prompt a path forward.

    Read the blog post
  • Colorful illustration featuring diverse hands using design tools — brushes, rulers, and digital interfaces — around abstract geometric shapes on a purple background — blog thumbnail for '5 design skills to sharpen in the AI era'Colorful illustration featuring diverse hands using design tools — brushes, rulers, and digital interfaces — around abstract geometric shapes on a purple background — blog thumbnail for '5 design skills to sharpen in the AI era'

    5 design skills to sharpen in the AI era

    Our latest research highlights the skills designers need to meet the moment.

    Read the blog post

FAQs

Figma is a powerful product development platform that makes it easy for teams to collaborate and turn ideas into products. In Figma, teams can brainstorm, diagram, wireframe, design, prototype, and build products. Product managers, designers, and engineers can all work within the same file, leaving comments, tracking changes, and staying aligned without endless status meetings or handoff docs.

Product development is the process of creating and bringing a new product or service to life. It typically spans key phases including ideation, validation, design, development, testing, and post-launch iteration. This process ensures that the final product meets customer needs, aligns with business goals, and stands out in a competitive landscape.

Figma empowers teams throughout every stage of the product development process by streamlining collaboration and alignment, enabling ideation and design exploration, and facilitating effective communication between product, design, and engineering roles. You can get started quickly by using product development templates in FigJam, Figma’s collaborative online whiteboard tool.

Figma Make allows PMs to move from abstract problem statements to concrete, interactive representations in minutes. By externalizing ideas, PMs can create "living" requirement documents that stakeholders can interact with, test, and provide feedback on, rather than relying solely on static PRDs or user stories.

Yes, Figma Make acts as a visual partner to traditional PRDs. While a PRD outlines the "what" and "why" in text, Figma Make provides the "how" in a tangible form. PMs often use LLMs to refine user stories and then use those as prompts to generate initial UI layouts in Make, creating a cohesive requirement package that is easier for cross-functional teams to digest.