![]() Select mini.png to position its layer on top of the blueprint, aligning it with the word “mini”.Color code the files Sans Serif.png and Script.png for easier reference. Drag and drop the filesĭrag or upload the elements (mini.png, Sans Serif.png and Script.png), which we saved earlier in step four, into Adobe After Effects. We have to add our assets into Adobe After Effects - this is where we start working on the animation. Import and organize elements in Adobe After Effects Don’t forget to add in your Composition Name.ĥ.The frame rate should be 60 frames per second with a duration of 02:00. Check your width and height (remember, we are using 572 px and 112 px respectively). Click on Extensions and select LottieFiles.Click Window on your Adobe After Effects toolbar.Once you have it installed, run the plugin: If you don’t have it installed, you can download the LottieFiles for Adobe After Effects plugin here. At this point, you can load Adobe After Effects and run the LottieFiles plugin. You should now have three assets to recreate Apple’s Lottie animation. Use the LottieFiles for Adobe After Effects plugin Now, click Export 2 layers, making sure the file format is PNG. Script.png (the original GIF with the colored “mini” typeface).For the rest of this tutorial, we will refer to these three elements as we have named them in the video - you can follow these names so it is easier for you to follow along for the next steps: One GIF acts as the blueprint for Adobe After Effects, where the second one accommodates the different texts and the “mini” asset. In Figma, there are now three assets - two GIFs, and the animated text (mini). Double click on the GIF copy, click GIF and drag the toggle to right (the last frame).(Note: this follows the dimensions of the original iPad mini animation) Adjust the GIF to a width of 572 and height of 112.Then, complete these steps: Click Add to Figma On the left-hand panel, rename the animation frame to “mini”. Next, you have to export the layers as PNG. To delete the frames, just select it, drag it away from the text and delete. Deleting empty frames (such as the black frame in this image) Click Insert as SVG and Convert to GIF.Īs it converts, you can use this time to delete any unnecessary (i.e.Click My Animations and select the iPad mini animation (which was uploaded into your animation board in step two). ![]() Right click and select Plugins and click on LottieFiles.If you don’t have the plugin, you can download the LottieFiles for Figma plugin here. The LottieFiles plugin allows you to drag and drop the Lottie. The Lottie animation in your private dashboard 3. The animation will then be uploaded to your private dashboard on LottieFiles.Click Upload to my Previews located on the right sidebar of the Lottie Editor.This gives us a blueprint for us to recreate with Adobe After Effects later. Here, you’ll need to upload it into your Lottie private animation board. This is how your animation should appear on Lottie Editor - it should have grabbed the exact “iPad mini” animation on your editor. The first step will lead you to the Lottie Editor. Load the animation in the Lottie Editor and upload it to your animation board Click Edit Lottie to grab the animation.Ģ.It should be on the top right of your Google Chrome toolbar. Click on the Lottie Grabber extension icon.Open the iPad mini webpage with Google Chrome.To grab the Lottie JSON file, follow these steps: The Lottie Grabber gives information on the animation such as height, width and frame rate - this will be useful in making sure our recreation is exactly the same. If you don’t have Lottie Grabber, you can download it from the Chrome Web Store. Use the Lottie Grabber Chrome extension to grab the Lottie The Lottie Grabber contains specifications of the animation for you to duplicate later. To follow along, download the exercise files here. Or you can follow these steps that we have listed. To show you how simple it can be, we have recreated Apple’s “iPad mini” Lottie animation text, which you can watch in the video below. Now, we’ll let you in on a little secret: it’s not that hard to do. Apple has done just that with their “iPad mini” text on their website, which uses Lottie animation. Animated text is great for websites - it’s fun, colorful, and it grabs your audience’s attention while emphasizing your messaging.
0 Comments
Leave a Reply. |