In the hierarchy panel, select the 4 text layers and drag them into the group.Now, here’s the trick to add a clipping mask without using a clipping mask. Readjust the final position of the animation if needed.Move the playhead to 1s and turn Relative Mode OFF.Make sure your fonts are all consistent with your original design (The file above used Roboto-thin).Turn Relative Mode ON before making broad changes.Since we’re working with the βeta version of Figma import, there are a few inconsistencies. Unfortunately, almost every tool has its own way of handling and rendering typography, so there may be discrepancies between things like baseline and kerning. When working with Typography you may have to, from time to time, re-adjust things. Use a ruler / guide to help you position the layers along a consistent baseline Import and Adjust The thousands layer goes up to the first 2.On the end artboard move the text layers into their final positions.Now, we’re going to duplicate and position our final layers. Send it to the back of the layer hierarchy.Position it in the middle of the artboard.If you’re making a square mask, then in software there are techniques like overflow: hidden and masksToBounds = true that are far better options than embedding a rectangular mask layer. We’re going to use this feature to mask the counter, because you should always try to avoid over-using masks. There is a great technique in Flow for masking to the bounds of a layer or group. Rename your layers to thousands, hundreds, tens, and ones (from left-to-right).Position the 4 layers so that their first 0 is in the proper position.Add 4 recurring sets of values so that there are 40 numbers, each on a new line (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).Create a new file with a 400x300 artboard.There are 4 number positions in the original design, so we’re going to create 4 text layers that we will animate. This design requires making 4 identical text blocks, and creating a group that will be used for masking once we get into Flow.
To get started, you can do this whole tutorial from scratch or grab the Figma file and head on down to Import and Adjust. If you’ve got a Dribbble account, head over and L the original shot: Simple Animated Number Counter In this quick cast, we decipher Howard Pinsky's Simple Animated Number Counter on Dribbble, rebuild the foundations in Figma and bring it to life in Flow.
0 kommentar(er)
