Designing product onboarding in Figma

Quick answer

Onboarding gets a person to the first useful action. It is not a tour of every button. Pick one container: a checklist on the home screen, a short stepper, or an empty state with one action. Offer a way to skip. Do not chain five modals. The invite flow, if you have one, stays the invite screen. This guide is what happens after they are in.

Who this is for

• Product designers who own the first session of a new account.
• Teams replacing a coach-mark tour that people click through without reading.
• Engineers who need to know which steps are required, which are skippable, and where progress is stored.

If the “onboarding” is a legal or security gate, design that gate on its own. Do not hide it inside a welcome carousel.

Choose the container

Container	Use when	Skip when
Empty state	The home screen is useless until they create one thing	They must configure several settings first
Checklist	Three to five setup tasks, done in any order	There is only one task
Stepper	A short sequence that must happen in order	The steps are optional tips
Modal tour	You need one unavoidable warning	You are explaining the interface

Most products should start with an empty state or a checklist. A stepper fits when step two is impossible before step one, such as “name the workspace” then “invite the people who will see it”. The stepper component itself is covered in progress and steppers.

Coach marks that point at five icons teach the chrome, not the job. People dismiss them. If you use one mark, use one, on the control for the first action, and do not repeat it on the next visit.

What the first action is

Name it in a sentence before you draw: “Create a project”, “Import a file”, “Send a test”. Every screen in the flow either helps that action or gets out of the way.

Cut steps that are profile decoration. A photo and a display name can wait until profile settings. Asking for them before the person has done anything is how onboarding gets abandoned.

Checklist

A checklist lives on the home screen, not in a modal they cannot find again.

• Three to five items. More than that is a manual.
• Each item is a task with a destination, not a tip. “Invite a teammate” opens the invite flow. “Learn about reports” does not belong.
• Done items stay visible and checked, so progress is obvious.
• Dismiss hides the checklist after the required items are done, or when they choose “Hide”. Do not bring it back every session.

Optional items are marked optional. Required items are the ones that block the first action, and there should be few of them.

Skip and resume

Skip is a real control. “I’ll do this later” returns them to the product with the empty state still offering the first action. It does not dump them on a blank dashboard with no next step.

Store progress per person. Refreshing the page must not restart the tour. If they finished, they do not see it again. Write that in the handoff. A prototype that always opens on the welcome frame will be built that way if you do not say otherwise.

Copy

Write the task, the outcome, and the button.

• Task: “Create your first project.”
• Outcome: “Projects keep files and people together.”
• Button: “Create project.”

Avoid “Let’s get started!” as the only line. It does not say what happens next. Avoid a different tone on every step. The forms in the flow use the same labels they will use later in settings, so the person is not learning two names for one thing.

What to hand off

• The one first action, and which steps are required.
• Where progress is stored, and that it is per person.
• Skip destination.
• The empty state they see if they skip.
• That coach marks, if any, show once.

Common mistakes

• A five-step modal with no skip.
• Teaching the navigation instead of completing one task.
• Restarting the flow on every login because “seen” was never defined.
• A checklist of twelve items copied from a launch doc.

FAQ

Is a welcome screen worth it?

One screen that states the first action, yes. A carousel of feature promises, no. They can read features after they have used the product.

What if different roles need different setup?

One checklist per role, not one checklist with every role’s tasks grayed out. An admin who must invite people should not see a designer’s “try the canvas” tasks first.

Where do sample files fit?

A sample project can be the first action’s shortcut. Label it as sample data and give them a way to delete it. Do not make the sample look like their own work.

Next

Once people are in and working, they talk on the work itself. Continue with comments and mentions. More first-run patterns are on Patterns.