My Docs
DeploymentTrelloCalendar 🗓 Family Promise Roadmap
LAMBDA_LABS_Family_Promise
LAMBDA_LABS_Family_Promise
  • Home
  • navigation
    • Resume
    • My Notes:
    • NAVIGATION
    • Calendar
    • Youtube:
    • Roadmap:
    • TEAM MEMBERS
    • Running List Of Notes Links & Pertinent Info From Meetings
    • Trello
      • Github/Trello Integration
  • UX
    • UX_TOPICS
      • Action Items:
      • Accessibility
      • Figma Notes
        • Tables In Figma
        • Notes
        • Frames in Figma
        • Prototyping In Figma
        • More Notes
      • UX-Design
        • Facebook Graph API
      • Ant Design
        • ANT Components
          • Buttons
        • ANT DOCS
        • Application (Codesandbox)
      • Examples
      • How to add external URL links to your prototype
  • CANVAS
    • Interview
    • Design
      • What's Inclusive Design?
      • Accessibility
      • What are Design Systems?
    • Canvas
      • Career Readiness:
    • Notes
      • User Experience Design
      • User Research
      • Interaction Design
    • UX-Engineer
      • Accessibility
      • Patterns
      • Design Tools
      • UX Principles
      • Design Critiques
      • Product Review
      • Quiz
      • Seven Principles of Design
      • Other Articles
    • Labs
  • Front End
    • Frontend:
    • Redux
  • Back End
    • Backend:
      • API
  • Research
    • Research Navigation
      • Front End
      • Back End
      • UX
      • PTM
      • General
  • DS_API
    • Data Science API
  • ROLES
    • TEAM ROLES
      • Bryan Guner
  • Action Items
    • Trello
    • Maps
  • ARCHITECTURE
    • DNS
    • AWS
    • Heroku
  • Questions
    • From Previous Cohort
  • Standup Notes
    • Meeting Notes
      • Stakeholder Meeting 1
      • 9/29/2021
  • GitHub & Project Practice
    • GitHub
      • Github Guide
      • Github Actions:
      • Live Implementation
  • MISC
    • MISCELLANEOUS
      • Links
  • Background Information
    • Background Info
      • Swagger OPEN API SPECIFICATION
        • Swagger Docs (General)
      • GITHUB:
        • Git Bash
        • Git Prune:
  • DOCS
    • DS AP
    • What is JSON Web Token?
      • Environment Variables
      • Git Rebase:
      • Git Workflow:
      • Linting and Formatting
    • Project Docs
      • Eng-Docs-Home
      • Basic Node API
      • Contributing to this scaffold project
      • Examples:
    • PROJECT DESCRIPTION (Feature List)
    • Labs Learners Guide
    • REACT
      • Create React App
      • Awesome React
    • Labs Engineering Docs
      • Okta Basics
      • Roadmap
      • Repositories
  • Workflow
    • Workflow
    • Advice
  • AWS
    • AWS
      • Elastic Beanstalk
        • Elastic Beanstalk DNS
      • Amplify:
        • Amplify-DNS
    • Account Basics
    • AWS-Networking
  • Career & Job Hunt
    • Career
  • LABS
    • Introduction
    • User Stories
    • Why Pairing?
    • GitHub
    • Planning as an Engineer
    • Authentication and Authorization
      • Authentication VS Authorization
    • Giving Feedback
    • Modules Grades Understanding Your ISA
    • Rest Architecture
Powered by GitBook
On this page
  • Guide to prototyping in Figma
  • Flows and starting points
  • Create connections
  • Create interactions and animations
  • Adjust prototype settings
  • Learn more about prototyping
  • Get started
  • Advanced interactions
  • Share and collaborate
  • Glossary

Was this helpful?

  1. UX
  2. UX_TOPICS
  3. Figma Notes

Prototyping In Figma

PreviousFrames in FigmaNextMore Notes

Last updated 3 years ago

Was this helpful?

Guide to prototyping in Figma

Who can use this feature

Supported on .

Anyone with can edit access can create prototypes.

Anyone with can view access can play back prototypes in Presentation view.

Figma’s prototyping features allow you to create interactive flows that explore how a user may interact with your designs.

Prototypes are a fantastic way to:

  • Preview interactions and user flows

  • Share and iterate on ideas

  • Get feedback from collaborators

  • Test interactions with users

  • Present your designs to stakeholders

Watch our video on prototyping below. Or, check out our on Youtube.

Flows and starting points

With prototyping in Figma, you can create multiple flows for your prototype in one page to preview a user's full journey and experience through your designs.

A flow is the network of frames and connections in a single page. A prototype can map out a user's entire journey through your app or website, or it can focus on a specific segment of it via its own flow. For example: your prototype covers all possible interactions on an eCommerce site. Within the prototype, you have flows for creating an account, adding items to a cart, and checking out.

Figma creates a flow starting point when you add your first connection between two frames. There are a few other ways to add a flow starting point to your prototype:

  • With the starting frame selected, click in the Flow starting point section of the right sidebar.

  • Right-click on the frame, then click Add starting point.

  • Duplicate a frame with an existing starting point.

Note: A top-level frame can be part of multiple flows, but can only have one starting point. Frames nested within a top-level starting frame can have connections that navigate the user around multiple flows. For example, Log in and Sign up buttons can be nested in the same starting point frame, then be connected to frames in separate flows for each experience.

Create connections

  1. Select the hotspot for the connection.

  2. Click to create the connection.

  3. Drag it to the destination.

  4. If there are no existing connections, Figma will make the first frame a starting point.

Create interactions and animations

  1. Open the Prototype tab in the right sidebar

  2. Add interactions

  3. Set interaction details

  4. Apply an animation

  5. Preview your animation

Adjust prototype settings

  1. Select a Device and Model

  2. Preview your prototype

  3. Select Background color

  4. Set the prototype's Starting Frame

Learn more about prototyping

Get started

Advanced interactions

Share and collaborate

Glossary

  • A hotspot is where the Interaction takes place. A hotspot can be any object within the original frame e.g. a link, button, image or icon, etc.

  • Connections are the blue arrows or "noodles" that connect the hotspot to the destination. We apply the interaction and animation settings via the connection.

  • A flow is the network of connected frames that form a path through a prototype. Each flow has its own starting point. You can have multiple flows within a prototype.

  • The** starting point** is the first frame of a flow. Set multiple starting points to show different flows of the prototype in Presentation view.

  • The trigger determines what type of interaction with the hotspot will cause the prototype to advance. This could be a mouse or touch interaction e.g. tap, drag, click, hover, etc.

  • The destination is where the transition ends. This must be a top-level frame - a frame that is added directly to the canvas - and not an object within a frame. If we think of moving from A to B, A is the hotspot and B is the destination.

  • The action defines the type of progression is occurring in the prototype. For example, the action could be to navigate to another frame, or open an external URL.

  • The animation settings determine how the prototype moves from one frame to the other. You can control the type of animation, as well as the speed and direction.

  • A transition is the type of animation. This defines how the action moves to the destination.

  • The direction controls the direction that the transition comes from. Choose between left, right, top or bottom.

  • The duration controls the time it takes to complete the animation. The shorter the duration, the faster the transition. Select a duration between 1ms and 10000ms (10 seconds).

  • Easing affects the acceleration of the animation, i.e. whether it starts slow or fast. This allows you to build animations that feel more natural.

  • Overlays are frames that appear above the current screen or frame. You can use overlays to create tool-tips, interactive menus, alerts, or confirmations.

  • Overflow behavior allows you to define how your prototype responds to scrolling. This allows you to create more advanced user interactions e.g. carousels, galleries, or interactive maps.

  • Choose which device will be shown when presenting your prototype. Define both the device and the model.

  • The background color lets you define the color in the background of your prototype.

  • If you have a prototype with portrait and landscape frames, you can select an orientation. The orientation is set for the entire prototype. It's not possible to switch between portrait and landscape view within a prototype.

  • A preview will show you how something will look or work in the prototype. We show previews for both animations and prototype device settings.

When it's time to test your designs, you can share the entire prototype or .

Anatomy of a connection between two frames
Create interactions and animations
Prototype tab of right sidebar with device preview background and flow settings

Prototype , and

any team or plan
Prototype & Collaboration Playlist
copy the link to a flow starting point
Learn more about starting points and flows →
Create prototype interactions and animations
Select a starting point for your prototype
Customize your prototype device
actions
triggers
animations
Create overlays in your prototypes
Create advanced animations with Smart Animate
Prototype scroll interactions with overflow behavior
Set prototype Presentation View options
Share your prototype
View prototypes on a mobile device
Give feedback on prototypes with comments