Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups

Figma Prototyping: Transforming static models into dynamic interactive experience

Core points:

• Figma Prototyping converts static models into dynamic, interactive prototypes to help developers understand the user processes, functions and feelings of the design.
• The steps to create a Figma prototype include: creating a horizontal scrolling framework, creating artboard transitions, creating the function of returning to the previous artboard, and creating complex timing animations. Each step involves specific settings and interactions to ensure smooth transitions and animation effects.
• Figma prototypes are interactive and can be shared with others for previewing and collecting feedback. This feature enhances collaboration and allows improvements based on feedback received. Figma also supports more complex animations through plugins such as LottieFiles.

Prototyping is the process of transforming static models into interactive and dynamic models (more well known as prototypes). Turning a static model into reality is undoubtedly one of the most exciting (if not the most exciting) steps in a design workflow. For developers, it is crucial to understand the user processes, feelings and functions of the design. What better way than using Figma, which is the best design tool in the world, according to the 2020 Design Tools Survey?

Once you master the method of prototyping of Figma, you will find it simple and easy to use and enjoyable. First copy this static model (click on "A Series of Interactions" and then click on "Copy to My Draft"), and then throughout the tutorial we will add more and more functional fidelity. Your local copy should look like this:

Note: I assume you have at least some knowledge of modern UI design tools such as Figma or Sketch.

Step 1: Create a horizontal scrolling frame

Let's start with artboard 1 to enable card selections beyond the viewport to scroll horizontally. This is a way to dynamically make our model without creating what Figma calls a "connection". The connection directs us to the new artboard, but that's not what we're going to do in step 1.

First select Cards from the Layers panel (left sidebar), and then use the drop-down menu to change the Group option to Frame from the Design panel (this time the right sidebar).

I won't go into this in depth, but the main difference between a group and a frame is that a group tightly wraps its child elements while the frame can be of any size. This means:

• The child elements of the group will scale with the group, while the child elements of the frame are more stubborn (this is a feature, not a bug)
• The child elements of the frame are aligned relative to its frame, while the child elements of the group are still aligned relative to its artboard
• The frame can contain overflow content that can scroll horizontally or vertically (this is what we are trying)

Wait, does this mean that the artboard is actually a frame? Indeed: other UI design tools are called artboards, and Figma calls them frames. This may be because in Figma, frames can be nested in other frames, which is slightly different from artboards in other tools like Sketch, Adobe XD.

Switch to prototype mode (⌥ 9), you can now use the Overflow Behavior setting and then change the drop-down option from No Scroll to Horizontal Scroll.

Now you will notice that the shadow is weirdly cut off by the newly converted frame, but this is actually the standard behavior of overflowing content, which can be fixed relatively easily.

Since the shadow has a blur variable of 30 and the frame can be of any size, we need to resize the frame so that an extra 30 spacing is left around its edges. Resize (shift ⌘ ↑↓←→) and fine-tune (shift ↑↓←→) objects It should be easy.

By the way, you may notice (if you click on the frame), the cards and their spacing can be easily rearranged. This has nothing to do with the tutorial itself, but it's still great.

Step 2: Create artboard transition

For the next step, let's try an interaction that connects one artboard to another, also known as "connection".

Select the "card" frame (yes, the whole frame, because it doesn't matter which card is clicked now). Then, assuming you are still in prototype mode, drag the connector (i.e., the circle with borders displayed when hovering) to artboard 2. These artboards are now connected.

After putting the connector on artboard 2, the "Connection" setting (which should now be displayed) should look like this:

• Interaction details
  • "When clicked" (interaction will be triggered by clicks)
  • "Navigation to" / "Artboard 2" (click will cause the user to navigate to Artboard 2)
• Animation
  • "Push" / "←" ("Paper 2" will push from the right side to the screen)
  "Slow out" / "300ms" (within 300ms, the animation will start quickly and then gradually slow down)
  Select the "Smart Animation Match Layer" check box (if it remains unchanged, common elements such as back buttons and navigation will not be animate)

Want to see what we have done so far? Click the "Demo" button in the upper right corner (i.e. the

play icon). If you use Figma in your web browser, this will open a new tab.

Tip: Press R to reload the prototype.

Step 3: Back!

Before we go ahead and dig into more complex connections, let's make sure we can return to artboard 1 (or whatever artboard we come from). Create another connection, this time starting with the back button, setting as follows:

Interaction details
• "When clicked"
  "Back"

The animation settings will not be available this time because the options are fixed. Specifically, the transition will be reverse animated. For example, if we use "Push ←" to transition to the artboard, then we will use "Push →" to transition back.

Step 4: Create (relatively) complex timing animation

In the next last step, we will create a single animation that spans multiple artboards and animates multiple objects separately rather than the entire artboard. Specifically, we will rotate the expanded card to the left after clicking the button, then set the timer to rotate it to the right, and then return to its original state.

Essentially, this is a swing animation.

Select the "Button" object on artboard 2 and create a connector connected to artboard 3. Use the following settings:

Interaction details
• "When clicked"
  "Navigation to" / "Paper 3"
Animation
• "Smart animation"
  "Slow out" / "300ms"

Note: Since we chose "Smart Animation" as the animation type, layers that exist in both artboards at the same time but visually different will transition smoothly, but only if the relevant layer structure and layer The name remains consistent. If they are not consistent, Figma will not understand that these layers are the same layer and they will not be animate correctly.

In the Design panel, you should see that I have set the background of the button to #FF0000 and rotate the card to the left.

However, how do you rotate the 300ms "Rotate left animation" to the right after it is finished running? Well, that's where timed animations are needed. Repeat the above steps, this time connecting artboard 3 to artboard 4, "After delay" / "300ms" is the only difference. To complete the interaction, repeatedly connect artboard 4 to artboard 5 again.

This is how we run animations continuously. In our example, the initial click interaction activates the "Rotle animation left" and the subsequent animation will automatically follow the timer.

Figma prototyping is fun, right?

We have now completed this tutorial. The Figma file actually looks no different (except for some visible connectors when using prototype mode). However, it will have a very different function in demo mode. If you are not following the tutorial, check out the "Dynamic" version where you can test the final results.

It's cool, right?

While we can certainly envision more complex animation styles and interaction types, what we see here should cover about 99% of what you need to know. When it comes to interaction, simplicity is always better!

For animations that require more complexity, there is a clean Figma plugin called LottieFiles that is definitely worth a try.

For more information about Figma, you can also read about using Figma for wireframe design.

Frequently Asked Questions about Figma Prototypes

What is the Figma prototype? The Figma prototype is an interactive representation of a design created using Figma, a collaborative design tool. It allows designers to demonstrate and test the efficacy of their designs, providing a more dynamic and user-centric experience.

How to create a prototype in Figma? To create a prototype in Figma, design a screen or frame, and then use the Prototype mode to link these frames together to define interactions, transitions, and animations to simulate the user experience.

Can I preview my Figma prototype before sharing? Yes, Figma allows you to preview your prototype directly in the Figma editor. Simply enter prototype mode and click the “Demo” button to experience your design interaction.

How to share my Figma prototype with others? You can share your Figma prototype by generating shareable links. Go to the Share menu, adjust the sharing settings, and copy the link. Anyone with this link can view and interact with your prototype.

Is there a way to collect feedback about my Figma prototype? Yes, Figma supports commenting on designs and prototypes. Share your prototype links, and viewers can leave comments directly on specific elements or areas of the design, facilitating collaboration and feedback collection.

The above is the detailed content of Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups. For more information, please follow other related articles on the PHP Chinese website!