Connect with us

Technology

An Introduction to Prototyping with Figma – SitePoint


Prototyping is the method of turning a static mockup into an interactive and dynamic mockup (higher often called a prototype). Bringing a static mockup to life is no doubt some of the — if not the most — thrilling step within the design workflow.

It’s additionally tremendous vital that builders perceive the design’s person circulate, and the way it ought to really feel and performance. What higher means to do this than by utilizing Figma, one of the best design instrument on the earth in line with the 2020 Design Instruments Survey?

Prototyping with Figma is simple and pleasurable as soon as you know the way it really works. Begin off by duplicating this static mockup (click on on Sequence of Interactions after which Duplicate to my drafts), after which all through the tutorial we’ll add an increasing number of useful constancy. Your native copy ought to appear like this:

Word: I’m assuming that you’ve not less than a small quantity of expertise with trendy UI design instruments comparable to Figma or Sketch.

Let’s begin with Artboard 1, making the collection of playing cards that overflow the viewport horizontally scrollable. That is one instance of how we will make our mockups dynamic with out having to create what Figma calls “Connections”. Connections direct us to new Artboards, however that’s not what we’ll be doing in Step 1.

Begin by deciding on Playing cards from the Layers Panel (left sidebar), after which from the Design Panel (proper sidebar this time) change the Group choice to Body utilizing the dropdown.

I gained’t dive into this an excessive amount of, however the principle distinction between a Group and a Body is that Teams wrap their kids tightly, whereas Frames may be any measurement. Because of this:

  • grouped kids scale with the Group, whereas Framed kids are a bit extra cussed (a function, not a bug)
  • framed kids change into aligned relative to their Body, whereas Grouped kids are nonetheless relative to their Artboard
  • frames can have overflowing content material that may be scrolled horizontally or vertically (that is what we’ll be trying)

Wait, does this imply that Artboards are literally Frames? Certainly: what different UI design instruments name Artboards, Figma calls Frames. That is probably as a result of, in Figma, Frames may be nested inside different Frames, which is barely totally different from what Artboards do in different instruments like Sketch, Adobe XD, and so forth.

Change to Prototype mode ( + 9) the place the Overflow conduct setting will now be accessible, after which change the dropdown choice from No scrolling to Horizontal scrolling.

Figma: horizontal scrolling

Now, you’ll discover that the shadows are oddly reduce off by the newly transformed Body, however that is really normal conduct for overflowing content material, and it may be fastened comparatively simply.

Because the shadow’s blur variable is 30 and Frames may be any measurement, we’ll have to resize the Body to permit for an additional 30 spacing round its edges. It needs to be straightforward sufficient to Resize (shift + + ↑↓←→) and Nudge (shift + ↑↓←→) the objects accordingly.

Resizing and Nudging in Figma

By the way in which, you would possibly discover (in the event you click on on the Body) that the playing cards and their spacing may be rearranged fairly simply. This isn’t related to the tutorial particularly, however nonetheless superior.

Adjusting the spacing in Figma Frames

Step 2: Create An Artboard Transition

For this subsequent step, let’s attempt an interplay that connects one Artboard to a different Artboard, in any other case often called a “Connection”.

Choose the Playing cards body (sure, your entire body, because it doesn’t actually matter which card finally ends up being tapped proper now). Then, assuming that you simply’re nonetheless in Prototype mode, drag the Connector (that’s, the bordered circle that reveals a + when hovered) into Artboard 2. These Artboards are actually linked.

After dropping the Connector onto Artboard 2, the Connection settings (which ought to now be revealed), ought to appear like this:

  • Interplay particulars
    • “On faucet” (the interplay can be triggered by tapping)
    • “Navigate to” / “Artboard 2” (tapping will trigger the person to navigate to Artboard 2)
  • Animation
    • “Push” / “←” (“Artboard 2” will push itself onto the display screen from the proper)
    • “Ease Out” / “300ms” (over the course of 300ms, the animation will begin off quick and decelerate in the direction of the top)
    • Verify the “Good animate matching layers” checkbox (widespread components such because the again button and the navigation is not going to animate if left unchanged)

Creating animated Figma interactions

Wish to see what we’ve performed up to now in motion? Click on the “Current” button (i.e. the play icon) within the top-right nook. If you happen to’re utilizing Figma in an internet browser, this opens a brand new tab.

Tip: hit R to reload the prototype.

Step 3: Retreat!

Earlier than we transfer ahead and dive into extra advanced Connections, let’s ensure that we will return to Artboard 1 (or no matter Artboard we got here from). Create one other Connection, this time originating from the again button(s) with the next settings:

Creating a “Back” interaction in Figma

Animation settings gained’t be accessible this time, for the reason that choices are fastened. Particularly, the transition will animate in reverse. As an example, if we transitioned into the Artboard with “Push ←” then we’ll transition again out with “Push →”.

Step 4: Create a (Comparatively) Advanced Timed Animation

Throughout this subsequent and remaining step, we’ll create a singular animation that truly spans throughout a number of Artboards and individually animates a number of objects reasonably than your entire Artboard. Particularly, we’ll rotate the expanded card to the left upon the clicking of a button, after which arrange a timer to rotate it to the proper earlier than returning to its unique state.

Basically, a swinging animation.

Choose the Button object on Artboard 2 and set up a Connector that connects to Artboard 3. Use these settings:

  • Interplay particulars
    • “On faucet”
    • “Navigate to” / “Artboard 3”
  • Animation
    • “Good animate”
    • “Ease Out” / “300ms”

Create another interaction in Figma

Word: as we’ve chosen “Good animate” because the animation sort, layers that exist in each Artboards however are visually totally different will transition easily, however provided that the related layer construction and layer names stay constant. In the event that they don’t stay constant, Figma will fail to know that the layers are one and the identical, and so they gained’t animate appropriately.

From the “Design” Panel, it is best to see that I’ve made the button’s background #FF0000 and rotated the cardboard to the left.

However how can we then rotate it to the proper after the 300ms “rotate left animation” has run its course? Nicely, that’s the place timed animations are wanted. Repeat the steps above, this time connecting Artboard 3 to Artboard 4 with “After delay” / “300ms” being the one distinction. To finish the interplay, repeat as soon as extra connecting Artboard 4 to Artboard 5.

That is how we run animations consecutively. In our case, the preliminary faucet interplay activated a “rotate left animation” after which the next animations occurred robotically on a timer.

Figma: timed animations

Prototyping with Figma is Enjoyable, Proper?

We’ve now reached the top of this tutorial. The Figma file shouldn’t actually look any totally different (moreover a couple of a visual Connectors when utilizing Prototype mode). Nevertheless, it ought to perform very otherwise in Current mode. If you happen to didn’t observe together with the tutorial, take a look at the “Dynamic” model, the place you may take a look at the ultimate consequence.

Fairly cool, proper?

Whereas there are definitely types of animations and kinds of interactions with extra complexity that we may visualize, what we’ve checked out right here ought to cowl about 99% of what you’ll have to know. In the case of interactions, easy is healthier anyway!

For animations that require extra complexity, there’s a neat Figma Plugin referred to as LottieFiles that’s undoubtedly value testing.

And for extra on Figma, you too can examine wireframing with Figma.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *