Figma is a fantastic tool for Web Design planning connection points. Perhaps the best thing about it is the gigantic local area. It gives a consistent progression of extraordinary assets like formats, symbols, instruments, and modules that make your plan work process quicker and simpler.

Figma enjoys a lot of benefits contrasted with Adobe XD or Sketch. It's a program-based interface configuration device that is cross-stage and works in any program and OS. It gives the best climate to a constant, coordinated effort with different creators and colleagues. 

Aside from its cooperative functionalities and its ability to make intelligent models, trade codes, designs, and complete formats, with the assistance of modules, Figma can expand its elements further – like the robotization of tedious undertakings.

New Figma assets are transferred every day to the Figma Community. We've made a valuable rundown of the best modules and instruments to accelerate your plan work process in light of our direct insight to save you time.

Each UX/UI architect comes to the second when they need to vitalize their plan. What's more, what devices would it be advisable for us to decide to make a few connections in UI, add a few dazzling impacts, or energize some person for a portable game?

I will show you a fascinating Figma module to do all of this. Its name is Motion. We will rapidly outline its point of interaction, learn liveliness fundamentals and even make some cool stuff.

Let’s get everything rolling.

As a matter of first significance, we ought to introduce it. Open Figma and go to the Community.

Type ‘Movement‘ in the hunt bar on the highest point of the page and snap-on Plugins in outcomes.

Presently you ought to tap on the Install button, and that's it in a nutshell. We should add another Figma document. From the dropdown menu, select Plugins/Motion.

We have recently begun Motion. We are all set for the following stage.

How to use Motion Plugin in Figma?

Outline

  • Before utilizing another tool, we ought to figure out how to function with it. We should rapidly outline the point of interaction.
  • It seems to be Figma UI, right? It's great for new clients.
  • We have tabs on the top: our activities, a toolbar beneath, a left board, and a course of events with keyframes. You can add a lot of movements for any record.
  • We should rapidly outline some toolbar buttons. We will discuss them in subtleties later.
  • Auto-update keyframes.
  • Rehash no rehash/and interruption.

Play/Stop

  • Current time position/all-out time.
  • On the left board, we can look through layers by their name and channel layers with keyframes. On the off chance that nothing is chosen in Figma, we can see layers of the record without sublayers.
  • It's made for weighty documents, which can be laggy. Search for the layers you want or select layers in Figma, and a rundown will show you all the sublayers.
  • In the timetable board, we will see all the keyframes of the chosen layer.

Add Keyframe

Trade with its assistance, you can trade any layer to GIF, Sprite, Frames, or CSS.

Assuming that you work in a group, each individual who approaches the document and runs Motion will see your liveliness. 

It's great for cross utilizing with your group and designers who will execute your activities in the code. A double-tap on any keyframe will open the keyframe board where you can set a turning point, a worth, and a facilitating capacity.

Your most Memorable Liveliness

From hypothesis to rehearsal. We should make a casing and a square shape inside it. Sizes and tones don't make any difference for the present. Place the square shape nearer to the pass on the corner of the casing to have a space on the option to move it.

Presently go to Motion and tap on the Add keyframe button on the X property.

Our liveliness will keep going for 500ms. Move the pink timetable handle to the 500ms (0.5s) position.

Move our square shape to one side, go to Motion, and tap on the Add keyframe button. There's nothing more to it. Click on Play and see your most memorable activity. With these methods, you can quicken every one of the properties you see. 

Go ahead and change Y, Width, Height, Corner sweep, Rotation, Opacity, and Fill properties. 

Rudiments

We should continue and jump more into subtleties.

Revolution Point

Most importantly, we ought to grasp what is a revolution point or an anchor point. We should assume we have an edge and a square shape within it. The square shape: width = 100, level = 100, x = 100, y = 100, revolution = 0°. 

Go to Motion and add a keyframe for the X property. Double-tap on a new keyframe. Presently we see the keyframe board for specific properties. Here you can set up a pivot point or an anchor point, a property estimation, and a facilitating capacity. 

In the Figma properties board, we characterized X as equivalent to 100; however, here, we see 150. Why?

The explanation is the revolution point, which is set to focus on the X and Y-axis. Along these lines, the position is: X + (Width/2) = 100 + (100/2) = 150. To manage similar qualities as Figma, you should pick the pivot point's upper left corner. Yet, don't hustle!

We should move our square shape by 100 to one side along the X and pivot by – 45°.

Click on Play and see it is moving and pivoting. However, imagine a scenario where we change the revolution to highlight the upper left corner. 

It doesn't make any difference on what keyframe you will change the pivot point. It is typical for all keyframes of the layer.

We will get rolling and turn as per the upper left corner of the layer.

Figma shows you X and Y values as indicated by the upper left corner of a revolution point of the layer; however, Rotation esteem — as per the middle point. You ought to remember this when you vivify something. However, as a rule, you won't have to transform it from the central issue in Motion.

Facilitating Capacities

Facilitating capacities control speed increase and deceleration. There are four facilitating capacities:

  • Direct
  • Ease—in: Speed increase at the beginning
  • Back out: Deceleration eventually
  • Back in-out: Speed increases in the beginning, and deceleration eventually.

There is another choice here — Steps. It will change esteems immediately with practically no progress. How about we attempt it. We have the square shape moving from the passed on side to the right half of the edge. Select the end keyframe and open the keyframe board. Change facilitating capacities and see the outcome.

Duplicate/Paste

Reordering keyframes is simple as well. Select keyframes, press Ctrl/Cmd+C or click on Copy from the dropdown menu to choose keyframes. After that, you can glue them on any layer. Sometimes, it is beneficial to animate a few layers the same way.

Fix/Redo

You can fix and re-try any progressions in activities. Ctrl/Cmd+Z for Undo and Ctrl/Cmd+Y for Redo will help you.

Auto-update Keyframe

If this button is dynamic, keyframes values will be consequently refreshed on the current time position after Motion is engaged. You have a 1s delay after the module window is hired to deactivate it or press the Play button and defocus the window.

Thus, you can add keyframes, go to its time position, roll out specific improvements for your layers in Figma and center the module window. The movement will do everything.

See fps

You can set the number of casings you will see in real-time in Figma: like 24 or 60. You can transform it from 60 to 24 in cases assuming liveliness is laggy. Try not to stress that this won't impact trade.

Rehash

There are three capacities here:

  • No rehash
  • Rehash
  • Rehash and interruption

The last one is fascinating. It will stop 1s on the finish of movement and solely after that recurrent it. Now and again, when you set Repeat, you can't see the outcome of your move. It would be best if you had a postponement before another activity lap begins. 

You can add a keyframe for the period you need. In any case, Motion gives you such instruments — Repeat and delay.

Wrapping Up

This blog gleaned tons of helpful knowledge today about liveliness in Figma. Presently have the opportunity and willpower to practice and make your cool liveliness. 

Want to know more? Visit www.webdew.com or contact us to avail our services!

                                                                                                                                  Editor: Tamanna

Frequently Asked Questions

Figma primarily focuses on design and prototyping, but with the use of Motion Plugins, you can use Figma for motion design too. You may also use specialized software like Adobe After Effects or similar programs.

Figma is a web-based design tool, and it doesn't require a dedicated GPU (Graphics Processing Unit) to run efficiently. It primarily relies on a strong internet connection and your computer's CPU (Central Processing Unit) for most of its operations.

This versatile design tool is ideal for both experienced video editors and individuals interested in effortlessly producing captivating visual content.

Yes, Figma can run without a dedicated graphics card. It is a web-based application that focuses on design and prototyping, and it doesn't rely heavily on GPU performance. However, a stable internet connection and a modern CPU are more important for a smooth Figma experience.