Briefly and clearly, we tell you how to quickly achieve an interesting effect for your project.
Figma is one of the most convenient prototyping tools. Thanks to it, you can show the client how the application will work, and interactive elements to developers. In this instruction, we tell you how to make a ticker using standard prototyping functions.
In this tutorial, we will use prototyping functions. Even if you haven’t used them before, it won’t hurt you to make an animation from the instructions. But it’s better if you figure out in advance how prototyping works in Figma:
In this instruction, we will use the result of one of the previous works – a voluminous “donut”. But you can take any other basis.
Text preparation
- Add a text layer, enter any short phrase into it and copy it three times separated by a space.
- Right click on the layer and select Frame selection. Then, on the settings sidebar in the Frame block, click the Clip content checkbox.
- On the top bar, click to make a component. Then click to make a copy of it.
- In the copy of the component, select the text layer inside the frame and move it to the left so that the first phrase is hidden. Create another copy of the component and do the same – but this time you need to hide the first and second phrases.
- For all components, reduce the frame so that only one phrase is visible in each of them.
Prototyping
- In the right settings panel, open Prototype. Then hover over the first option, hold down the circle that appears and drag it to the second. An arrow should appear.
- In the window that appears, instead of On tap, select After delay and specify a time of 1 ms. Below in the same window, instead of Instant, select Smart animation, instead of Ease in, select Linear, and the time is 3000 ms. Do the same with the second component – it should be connected to the third one.
- Select the third component and connect it to the first one. All animation settings in Prototype are the same, but instead of Smart animation, you need to specify Instant.
- Make a copy of the entire combine. Inside this copy of the first component, shift the text layer so that the beginning is not the first phrase, but the last one. Do the same with the third one – at the beginning there should be not the first, but the last phrase.
- If you used your own layout, then you can already copy the first copy of the components from each combine to your frame – the animation will work.
Layout customization
- If you use our voluminous “donut”, then before starting the animation, it needs to be slightly improved.
- Transfer two copies of the first component from the first combine and one copy from the second. Put them in a frame through one.
- Inside the “donut” layer, select the bottom one, which has a fill opacity of 100%, and copy it to the very top. Also copy the entire group with effects – where is the noise texture and color spots. Both layers should be at the very top.
- Make sure the copy of the black donut layer is below the copy of the effects layer. Then select the black donut and click to make a layer mask. Group the resulting structure.
- Tidy up the ticker layers – they should be above the original effect layer and below the original donut. The layer in the middle can be placed over the “donut” for beauty.
Click Play and check the result.
result:
