Guide to Creating prototypes in Figma

Figma is a great prototyping tool for UI UX designers and it allows you to create interactive design flows directly in the design file. It helps you, how a user may interact with your designs.

Check out more on Why you should be using Figma here.

Interactive prototypes helps:

• Preview your design interaction and user flows
• Share & iterate on ideas
• Get feedbacks
• Test the design with users
• pitch designs to stakeholders for buy-in

Flows and starting points

In figma prototyping you can create multiple flows for your prototype in one page to preview a user’s full journey and experience through your designs. Each one needs to have its own starting point and unique name. Select the first frame that you want to appear in your flow,

• click on “Prototype”
• click on the “Add” icon next to “Flow starting point”
• Once added, rename the flow by clicking on the name input.
• To add description click on the “Edit” icon next to the flow name.
• To remove the starting point click the “Remove” icon next to “Flow Starting Point”

Create connections

Add a connection between any two layers like frames, groups, shapes, text layers, etc… To add a connection, select the layer and drag the blue arrow to the next layer. The “Interaction details” window will appear on the screen, you can change the interaction settings from here.

Interactions

Interactions are the primary feature used when building a prototype. It shows the effect, behaviour and navigation patterns. Interactions will work by connecting two layers, and then deciding how those layers will interact with each other by adding a trigger, action, destination and animation.

Trigger: The trigger defines what type of interaction will cause the prototype to advance forward. This could be a mouse click, touch gesture, or the time elapsed in the current frame.

Figma has ten triggers available:

• On Click / On Tap
• On Drag
• While Hovering
• While Pressing
• Key[board]/Gamepad
• Mouse Enter
• Mouse Leave
• Mouse Down / Touch Press
• Mouse Up / Touch Release
• After Delay

Action: The action defines what happens when the user interacts with the layer. This could mean moving to another frame, engaging an overlay, or opening a link.

Figma has eight triggers available:

• Navigate to
• Change to
• Open overlay
• Swap overlay
• Close overlay
• Back
• Scroll to
• Open URL

Destination: Use the Destination field to select the frame that specific interaction will end on. Or, click on the connection in the canvas and drag it to the next frame. Figma will make that next frame the destination. This could be another screen in the prototype, or an overlay that appears above the current screen.

Animation: The Animation settings determine how the prototype moves from one Frame to the other.

Figma has eight Animations available:

• Instant
• Dissolve
• Smart Animate
• Move In
• Move Out
• Push
• Slide In
• Slide Out

Instant Interaction

Use “instant” animations to have the action with no movement or effect. This is great for actions like navigating between pages.

Animated interactions

Use animations to add movement to your interactions

open & close overlay example:

Smart animated interactions

Smart Animate is a way to connect two similar frames and get a fluid animation between them as if you animated it yourself. Figma recognize what’s changed and apply transitions to seamlessly move between them.

example:

Create fixed objects in a prototype

There may be some elements in a prototype that you don’t want to move when prototype scrolls. Example: apply top constraints to fix a status bar to the top of the device, or bottom to fix a menu to the bottom.

To create a fixed object:

1. Select the object, group or component in the canvas.
2. Open the Design panel in the right sidebar.
3. In the Constraints section, apply vertical and horizontal constraints.
4. Check the box next to Fix position when scrolling.
5. Figma will move these objects above your other layers so that they are in the FIXED section of the Layers Panel.

Overflow scrolling

Overflow scrolling allows you to scroll through individual frames inside your prototype. You can only apply overflow to frames. This applies to frames that are directly on the canvas (top-level frames), as well as frames nested within other frames or layers.

To apply overflow behavior, the frame must have content that extends beyond its frame size.

Figma supports 3 different overflow behaviors:

1. Vertical Scrolling
2. Horizontal Scrolling
3. Vertical and Horizontal Scrolling

Components

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can create components from any layers or objects you’ve designed. These could be a whole range of things like buttons, icons, layouts etc… Using interactive components allows the user to select any combination of items, in any order, with no additional prototyping.

Example: Interactive Radio button

Click the deselected radio button to change to the selected radio button. THEN click the selected radio button to change to the default.

Example: Interactive Button

While hovering over the default button, it change to the hover button. Then click the hover button to change to the selected button. Then after a delay on the selected button, it change to the default button.

View prototype

Use Presentation view to preview your designs and interact with them.

Prototype settings

1. Select a Device and Model
2. Preview your prototype
3. Select Background color
4. Set the prototype’s Starting Frame

Present prototype

Select the “Present” icon in the top toolbar or “Present” icon next to your flow starting point to view the prototype.

To checkout some of our work, visit Surgyy Design Labs website.