Product tours
Figma’s product walkthrough is thorough
Figma offers new designers an optional 10-step walkthrough of its editor, each step a short tooltip with a picture, a Learn more link and a Next button.
At the time of the recording, opening a new design file in Figma brought up a small prompt in the corner: "Take a quick tour of Figma?", with No thanks and Show me around buttons. Accepting starts a 10-step product walkthrough of the editor. Each step is a tooltip with an image or animation, two or three sentences of copy, a step counter, a close icon, a Learn more button and a Next button. It covers constraints, vector networks, components and plugins, comments, sharing and permissions, the team library, export, live device preview and the file browser.
Why it works
✅ Optional from the start: the tour is offered, not forced. A user who already knows Figma clicks No thanks and gets straight to work.
✅ Long process, short steps: 10 steps is a lot, but each one covers a single feature in a few sentences, so the walkthrough is easy to follow and to put up with.
✅ Visuals: every step has a picture of the feature it explains, which helps visual learners and makes the tour more approachable.
✅ Learn more and close: the close icon lets users leave at any point, and the Learn more button lets the curious go deeper without making the tour itself longer.
More on this pattern: product tours and onboarding tours.
