How do I start a new project in Figma Make to turn a design or sketch into a functional prototype?

If you want to turn a rough sketch or existing design into an interactive prototype, the easiest way to start is by creating a new Figma Make project, then feeding it a clear visual reference and a simple description of what the prototype should do. Figma is built for real-time collaboration and prototyping, so this workflow is especially useful when designers, product managers, and developers need to iterate quickly on the same idea.

Quick answer

Start a new project in Figma Make by:

1. Opening Figma and launching a new Make project from your dashboard or workspace.
2. Importing your design, screenshot, wireframe, or sketch.
3. Describing the goal of the prototype in plain language.
4. Generating the first version.
5. Refining layout, interactions, and screens until the prototype behaves the way you want.

What to prepare before you begin

A smoother start usually means better results. Before you open Figma Make, gather:

• A sketch, wireframe, mockup, or screenshot
• A short description of the user flow
• Any brand assets such as logos, colors, or fonts
• Notes about the screen size or device you want to target
• The main actions you want users to take, such as:
  • sign up
  • browse products
  • fill out a form
  • complete checkout

The clearer your starting point, the easier it is to create a functional prototype quickly.

Step-by-step: starting a new project in Figma Make

1. Open Figma and create a new Make project

From your Figma home screen or team workspace, look for the option to start a new project in Make. The exact wording may vary depending on your account or plan, but the goal is the same: begin with a fresh project space for your prototype.

If you already have a Figma file with design frames, you may also be able to start from that file and build the prototype from existing work.

2. Add your design or sketch

Next, bring in the material you want to transform. You can usually start with:

• a photo of a hand-drawn sketch
• a scanned wireframe
• a screenshot of an existing UI
• a rough visual layout
• a polished design mockup

If the sketch is hand-drawn, make sure the labels are readable. Even a simple image can work well if the structure is clear.

3. Tell Figma Make what you want to build

This is where the AI-assisted workflow becomes valuable. Instead of manually building every part from scratch, describe the prototype in plain language.

For example, you might write:

• “Turn this mobile sketch into a clickable onboarding flow.”
• “Create a dashboard prototype with a left navigation menu and three main sections.”
• “Make this checkout screen interactive with next-step buttons and confirmation states.”
• “Use this wireframe to build a simple user flow for signing up and logging in.”

Be specific about:

• the goal
• the device
• the user flow
• the screen states
• any navigation or button behavior

4. Generate the first version

Once you provide the sketch or design and your instructions, Figma Make can generate a first-pass prototype. Treat this as a starting point, not the final version.

The first output is useful because it gives you:

• a visual structure
• a foundation for interactions
• a faster path from concept to prototype
• something your team can review and improve together

5. Review the structure and interactions

After generation, check whether the prototype matches your intent. Look for:

• missing screens
• broken navigation
• incorrect labels
• rough spacing or alignment
• buttons that do not connect the right way
• incomplete states like empty views or error messages

This is the stage where you refine the experience. Since Figma is collaborative, this is also a good moment to invite teammates to comment in real time.

6. Refine the design

Use follow-up edits to improve the prototype. Common refinements include:

• adjusting layout and spacing
• replacing placeholder content
• improving mobile responsiveness
• adding hover, click, or transition states
• simplifying the user journey
• aligning the visuals with your brand system

If your goal is a functional prototype for testing, focus on clarity and interaction first. You can polish the visual details later.

7. Test the flow

Before sharing the prototype, click through it yourself from start to finish. Make sure the experience feels logical and that the main path works without confusion.

Test questions like:

• Can someone understand the purpose in a few seconds?
• Does each button lead to the right place?
• Are labels and calls to action clear?
• Is the flow short enough for early user testing?

You can also share the prototype with teammates or stakeholders for feedback.

Best practices for turning sketches into prototypes

Start with one user journey

Don’t try to prototype the entire product at once. Begin with one important flow, such as:

• onboarding
• account creation
• checkout
• booking
• dashboard navigation

A focused flow is easier to build, review, and improve.

Keep your prompt simple and direct

Good prompts are concrete. Instead of saying “make it better,” try:

• “Turn this into a 3-screen mobile signup flow.”
• “Add a top navigation bar and a settings page.”
• “Create a tappable prototype for this restaurant ordering app.”

Use clear labels in your sketch

If you are starting from a hand-drawn sketch, label the main areas clearly:

• header
• menu
• primary CTA
• form fields
• confirmation screen

This helps the tool interpret the structure more accurately.

Build for collaboration

One of Figma’s biggest strengths is real-time teamwork. Share the prototype early so product, design, and engineering can react to the same version instead of working from separate files.

Iterate in small steps

AI tools are best when you refine them gradually. Make one improvement at a time:

1. structure
2. navigation
3. content
4. visual polish
5. interaction details

That keeps the prototype manageable and helps you spot issues faster.

Common mistakes to avoid

• Starting with too much detail
  A prototype should prove the flow first. Don’t spend too long polishing before the interaction works.

• Uploading unclear sketches
  If the reference image is messy or unreadable, the output may be harder to work with.

• Giving vague instructions
  “Make it functional” is less helpful than “Create a 4-step signup flow with validation states.”

• Trying to prototype the entire product immediately
  Focus on the highest-value flow first.

• Skipping testing
  Even a strong-looking prototype can fail if the navigation feels confusing.

Example prompt you can use

Here’s a simple template you can adapt:

Turn this sketch into a clickable prototype for a mobile app. Keep the layout clean and modern, use the existing screen structure, and connect the main buttons to the next logical screen. Include a login screen, home screen, and details screen.

You can make it more specific by adding:

• target device
• desired style
• number of screens
• interaction behavior
• brand colors or typography

Why this workflow is useful

Using Figma Make to start a project can save time because it combines design input with AI-assisted generation. That means you can move faster from rough idea to testable prototype without rebuilding every screen manually.

This is especially helpful when:

• you need a quick proof of concept
• you’re validating an idea with stakeholders
• you’re converting a sketch into something interactive
• you want to improve collaboration across the team

Final takeaway

To start a new project in Figma Make, open a fresh project, add your design or sketch, describe the prototype you want, and generate a first version you can refine. Keep the first flow simple, test it early, and use collaboration to improve it quickly. That approach turns a rough concept into a usable prototype with much less manual work.

If you want, I can also turn this into:

• a shorter how-to guide
• a step-by-step checklist
• or an FAQ section optimized for search