How-to · Figma for Mac
How to create a prototype in Figma on Mac: step by step for Figma desktop
To create a prototype in Figma on Mac, draw one frame per screen, then link the frames with interactions in the Prototype tab. Set a flow starting point, press ⇧ Shift Space to preview, and press ⌘ Option Return to present full screen.
Quick answer
- Draw one frame for each screen, then open the Prototype tab in the right sidebar.
- Select the layer people will click, then drag a connection to the frame it should open.
- Set a flow starting point so Figma knows which screen the prototype begins on.
- Press ⇧ Shift Space to preview and ⌘ Option Return to present full screen.
What you need
- A Mac running macOS 12 (Monterey) or later
- The Figma desktop app, installed in Applications
- Edit access to the Figma file, because connections need it
- A frame for each screen in the flow
- A plan that includes prototyping, which Figma lists on all plans
How to Create a clickable prototype in Figma on Mac in Figma on a Mac
Draw one frame per screen
Open your file in the Figma desktop app and create a frame for each screen in the flow. Name each frame, such as Welcome, Email and Done. Figma shows these names in the flow list, so clear names save time later.
Tip: Arrange the frames in the order a person should see them, so the canvas is easy to follow.
Open the Prototype tab
Select the first frame on the canvas. Then open the Prototype tab in the right sidebar. Figma's prototyping guide uses this name. The tab holds prototype settings such as Device, Model, Background and Starting Frame.
Tip: Figma's pages use slightly different names for this area. Look for the Prototype tab first, then the Properties section.
Select the hotspot
Select the layer you want people to click, such as a button, an icon or a text link. Figma calls this layer the hotspot. You need edit access to the file before you can create a connection from it.
Start and drag the connection
With the hotspot selected, click to start the connection. Then drag the line to the frame that should open when someone clicks. Let go over the destination frame.
Tip: If the line lands on the wrong frame, select the hotspot again and drag once more.
Set the interaction details
To set the trigger, action, animation, easing and duration yourself, click Add an interaction on the Prototype tab. The Interaction Details panel opens. Choose what starts the interaction, where it goes and how it animates.
Tip: Figma's help also mentions defining scroll behavior, so check that setting if a frame scrolls.
Set the flow starting point
Select the frame where the prototype should begin. In the right sidebar, click the Flow starting point section, then the plus sign. A frame can hold only one flow starting point, so choose the screen carefully.
Tip: Right-click the frame and choose Add starting point if you prefer the context menu.
Preview the prototype
⇧ Shift Space
Click Preview in the top toolbar, or press ⇧ Shift Space. The preview opens inline above the canvas and updates as you edit. Click each button in order and check that every screen opens where you expect.
Preview one flow
If the file holds more than one flow, preview them one at a time. Click an empty area of the canvas, open the Prototype tab, go to Flows, hover over the flow name and click Preview.
Tip: You can also click the blue preview icon on the flow starting point.
Present in full screen
⌘ Option Return
Press ⌘ Option Return, or click Present in the toolbar. Presentation view opens in a new tab. Use the arrow keys or the Space key to move to the next frame, and press R to restart from the flow starting point.
Tip: Command Shift Return is not Figma's Present shortcut, so do not rely on it.
Turn on tabs during presentations
On the Mac desktop app, open the View menu and turn on Always Show Tabs When Presenting. It keeps tabs visible while you present a prototype.
Copy the link to share
In presentation view, select the flow in the left sidebar. Click Share prototype, then click Copy link. Send the link to a reviewer and ask them to click through without your help.
Tip: Watch where they stop. That usually shows a missing link or an unclear frame name.
A Figma prototype is a set of frames joined by links. Each frame stands for one screen. A link, which Figma calls an interaction or a connection, tells the prototype what happens when someone clicks a layer. Once the links exist, you can click through the design the way a person would click through a real product. This guide covers the desktop app on a Mac. Where Figma's help pages disagree with each other, this guide says so.
What you need before you start
- A Mac running macOS 12 (Monterey) or later. Check it under Apple menu > About This Mac.
- Edit access to the Figma file. Connections need edit access, so a view-only link will not let you build one.
- The Figma desktop app for Mac. You can also use Figma in a browser, but this guide follows the desktop app.
- Frames for each screen. Start with a few. You can add more later.
- A plan that includes prototyping. Figma's prototyping guide lists prototyping as available on all plans.
Start with the app itself. Figma's desktop guide says the Mac app needs macOS 12 or later. To install it, run the installer and move Figma into Applications. Older desktop versions stop getting support six months after each release, and the app shows a prompt when you fall behind. Keep it current.
Step by step: build a clickable prototype in Figma
The steps below run in order. Frames come first, then the links between them, then testing and sharing. Try them on a small test file before you touch a file that matters. A small file shows you every setting in this guide in a few minutes.
Flow starting points: where the prototype begins
Every prototype needs a starting point. Figma's help center says a frame can hold only one, and the starting point decides which screen the preview opens on. If a file has no connections yet, Figma makes the first frame a starting point. You can also set one by hand, and there are three ways to do it.
- Select the frame, then click the Flow starting point section in the right sidebar.
- Right-click the frame, then click Add starting point.
- Duplicate a frame that already has a starting point. The copy keeps the starting point.
The flow name appears on the blue preview icon at the starting point. Rename it in the flow name field in the Flow starting point section. Use names that describe the path, such as Sign up or Checkout, so you can find the right flow when a file has several.
Connect layers to frames with interactions
A hotspot is the layer a person clicks, such as a button, an icon or a line of text. Select the hotspot, click to start the connection, then drag to the destination frame. You need edit access to do this. Figma draws a line between the two. Select that line to see one interaction at a time.
Dragging is quick, but it sets only the basics. For full control, click Add an interaction on the Prototype tab. The Interaction Details panel opens. Figma's help describes its fields in prose, so the table below uses the same names and does not promise exact on-screen labels.
| Field | What it controls |
|---|---|
| Trigger | The user action that starts the interaction, such as a click |
| Action and destination | Which frame opens when the trigger fires |
| Animation | How the change looks, with a direction where the animation needs one |
| Easing | The speed curve, from a preset or a custom curve |
| Duration | How long the animation runs, in milliseconds |
Animation and easing add polish. A plain screen change with no animation is fine for a first draft. Add motion after the click path works from start to finish. Otherwise you will not know whether a broken link or a slow transition caused a problem.
Preview the prototype before you share it
Click Preview in the top toolbar, or press ⇧ Shift Space. The preview opens inline above the canvas. It updates in real time, so a fix in a frame shows up in the preview straight away. Click every button in order and check that each screen lands where you expect.
The preview has overflow options. Figma's play page lists Responsive, Follow prototype, Show device frame and Respect aspect ratio. Turn on the ones that match the device you are designing for.
To test one flow on its own, click an empty area of the canvas. Then open the Prototype tab, go to Flows, hover over the flow name and click Preview. You can also click the blue preview icon on the starting point. Single-flow tests help when a file holds several paths.
90%
Memory level where Figma shows a red alert before the file locks at 100%
Reduce memory usage in filesPresent full screen on a Mac
Presenting gives you a clean, full-screen run of the prototype. Press ⌘ Option Return, or click Present in the toolbar. Figma opens presentation view in a new tab. On Windows the same action is Control Alt Enter, but this guide stays on the Mac.
- →, Space or N: go to the next frame
- ←: go back one frame
- R: restart from the flow starting point
- F: toggle fullscreen, when Figma shortcuts are enabled
- Scale options: Actual size (100%), Fit width, Fit width and height, Fill screen
If the tabs get in the way during a presentation, open the View menu and turn on Always Show Tabs When Presenting. It keeps tabs visible during prototype presentations, which is a Mac-only setting in Figma's desktop guide.
Prototype shortcuts on Mac that actually work
Figma's keyboard page lists Mac shortcuts for tools, but it does not list prototype or presentation shortcuts. The prototype shortcuts on this page come from Figma's Play your prototypes page and its prototyping guide. Learn the two that matter most first: ⇧ Shift Space to preview and ⌘ Option Return to present.
Figma's pages also disagree about ⇧ Shift E. One page says it switches between the Design and Prototype tabs. Another says it shows or hides prototype connections. Press it once on your own file and see which one happens on your screen.
A worked example: a sign-up flow
Say you design a sign-up flow with a welcome screen, an email screen and a done screen. Put a Get started button on the welcome frame and connect it to the email frame. Add a Continue button on the email frame and connect it to the done frame. Set the welcome frame as the flow starting point, then press ⇧ Shift Space.
Now test the mistakes a real person would make. Click outside the buttons. Click Continue without filling in anything. A screen with no link stays where it is. If a click does nothing, add the missing link for that action, then preview again.
Common mistakes that break a prototype
Most broken prototypes come from a few habits. Check for these before you share the link.
- Starting in the wrong place. Set the flow starting point on the frame people should see first.
- Expecting two starting points in one frame. A frame holds only one.
- Building with view-only access. Connections need edit access, so ask the file owner for it.
- Mixing accounts. Desktop links can open the wrong account if the browser and app use different Figma accounts.
- Ignoring the memory limit. A large file can lock at 100%, so check usage early.
Share the prototype with a link
Each flow has its own link, which is easier to review than sending a whole file. In presentation view, select the flow in the left sidebar, click Share prototype, then click Copy link. The same area also lets you edit the flow description or remove a starting point.
Send the link, then watch a colleague click through it without your help. Note where they stop or look confused. Those moments usually point to a missing link or an unclear frame name.
Keep the file under Figma's memory limit
Figma runs in a browser, so the desktop app follows the same memory limit. Each tab gets 2GB. Figma shows a red alert at 90% of that limit, and the file locks at 100%. You need usage below 90% to recover a locked file. Check usage under View > Memory usage.
Prototypes add to memory use. Every extra screen, image and component adds weight. Remove unused frames and oversized images before you add more links. If preview feels slow, check the memory usage first.
Keep the Mac desktop app up to date
Click Figma in the top menu bar and select Check for Updates. Figma's release notes dated May 1, 2026 say files and prototypes now preload in the background. On macOS, links can also open directly in the desktop app instead of routing through the browser first. Those changes help only if you run a current build.
When a link does not open in the desktop app
Log into the same Figma account in the browser and the desktop app, then open the link again. The Open in desktop action in the Actions menu, and the Open links in desktop app preference, only work for individual files. They do not work in the file browser or on Community pages.
If the browser still cannot reach the desktop app, open Figma > Preferences > Permissions and helpers. Look at Local network access. It may read Blocked or Not connected. Follow the dialog prompts to allow it and connect the Font Installer.
Where Lazur fits in this workflow
Lazur is a voice assistant for the Mac that lives in the notch. Hold ⌥ ⌘, which means Option and Command together, then ask about anything on screen. Lazur looks at your screen only while you hold the keys, points at the Prototype tab or the Preview button, and answers out loud.
For a longer step like Add an interaction, ask Lazur to walk you through it. It guides you one click at a time and waits for each click. It does not click for you, and it does not change your file. You stay in control of every change. The Figma app page has more detail.
Where to go next
Once the prototype works, you may need images for a developer or a client. The export guides cover that: export a frame as PNG in Figma on Mac and export as SVG in Figma on Mac. If you design for a living, the Figma page for designers covers desktop setup and memory fixes.
Figma shortcuts for this on Mac
| To do this | Press |
|---|---|
| Preview the prototype | ⇧ Shift Space |
| Present in a new tab, full screen | ⌘ Option Return |
| Next frame in presentation view | →, Space, N |
| Previous frame in presentation view | ← |
| Restart from the flow starting point | R |
| Toggle fullscreen in presentation view | F |
| Switch tabs or show connections (Figma pages disagree) | ⇧ Shift E |
| Open the Figma shortcuts panel | ⌃⇧ ? |
If it does not work
- Links open in the wrong Figma account
- Log into the same Figma account in both the browser and the desktop app. Then open the link again. The Open in desktop action and its preference only work for individual files.
- The browser will not hand the link to the desktop app
- In Chrome 142 or newer, set figma.com's Local network access to Allow under the address bar settings icon, then refresh. In Brave, add a figma.com exception in Shields. In Edge, add an exception to Strict mode.
- The desktop app cannot connect to the browser
- Open Figma > Preferences > Permissions and helpers. Under Local network access, follow the dialog prompts to allow it and connect the Font Installer.
- The file is locked at 100% memory
- Reduce memory use until usage is below 90%, which Figma needs before it can recover the file. Check View > Memory usage. For a locked file, hold Shift, Control and Option, click the file, and choose Restore from version.
- Preview starts on the wrong screen
- Set the flow starting point on the frame you want, using the Flow starting point section in the right sidebar. A frame holds only one starting point, so remove the old one first.
- The Interaction Details fields look different from this guide
- Figma's help does not list the exact dialog labels. Look for trigger, action, animation, easing and duration, and check Figma's help center for your version.
Faster with Lazur
Do it faster: ask Lazur while you are in Figma
Hold ⌥ ⌘ and say what you want. Lazur sees your Figma window. Lazur draws a circle and a label around the button or menu you need.
- 1
Hold ⌥⌘ and talk
- 2
Lazur draws a circle and a label around the button or menu you need.
- 3
You stay in Figma. Nothing to copy into a chat window.
Free for 3 days, then $18/month. Download for Mac
You say“Where's the Prototype tab?”
Lazur · points at itLazur draws a circle and a label around the Prototype tab on your screen and says where it is.
Questions people ask
Can I create a prototype in Figma on Mac for free?
Figma's prototyping guide lists prototyping as available on all plans. Figma's pricing page lists a Starter plan at no cost with unlimited drafts. The pricing page shows no date, so check their pricing page for current details.
Do I need the desktop app to prototype in Figma on Mac?
No. You can work in a browser, but this guide follows the desktop app, which needs macOS 12 or later. Connections need edit access in either version.
Why does my preview open on the wrong screen?
The flow starting point decides where the preview begins. Select the frame you want, then add the starting point in the Flow starting point section of the right sidebar. A frame can hold only one.
What is the difference between Preview and Present?
Preview opens inline above the canvas and updates as you edit. Present opens presentation view in a new tab, and on Mac the shortcut is ⌘ Option Return. Use Preview while you build and Present for a clean run.
Is ⌘ Shift Return the Present shortcut in Figma?
No. Figma documents Present on Mac as ⌘ Option Return. Preview is ⇧ Shift Space. If another site suggests ⌘ Shift Return, test it in your own file before you depend on it.
Why does Figma say my file is locked?
Figma allows 2GB per browser tab, and the desktop app follows the same limit. A red alert appears at 90%, and the file locks at 100%. Get usage below 90% to recover, then check View > Memory usage.
Will Lazur click through Figma for me?
No. Lazur does not click buttons or operate Figma for you. Hold ⌥ ⌘ and ask where the Prototype tab is, or ask Lazur to walk you through Add an interaction one click at a time.
Sources
- Guide to prototyping in Figma · Figma Help Center · checked 2026-11-07
- Create and manage prototype flows · Figma Help Center · checked 2026-11-07
- Play your prototypes · Figma Help Center · checked 2026-11-07
- View prototype connections · Figma Help Center · checked 2026-11-07
- Design, prototype, and explore layer properties in the right sidebar · Figma Help Center · checked 2026-11-07
- Use Figma products with a keyboard · Figma Help Center · checked 2026-11-07
- Guide to the Figma desktop app · Figma Help Center · checked 2026-11-07
- Troubleshoot opening links in the Desktop app · Figma Help Center · checked 2026-11-07
- Reduce memory usage in files · Figma Help Center · checked 2026-11-07
- Figma product news and release notes · Figma · checked 2026-11-07
- Pricing · Figma · Figma · checked 2026-11-07
Try Lazur free for 3 days
Hold a key and ask. Lazur sees your screen, points at the button and talks you through it, in any Mac app. No credit card.