How to Create Custom Keyframe Animation from Figma Design - Advanced Tutorial

How to Create Custom Keyframe Animation from Figma Design - Advanced Tutorial

## Step 1: Install Plugin and Select Frame 1. Press `Actions` button in bottom Toolbar section 2. Choose `Plugins & widgets` section 3. Type `Aninix` in search bar 4. Click `Aninix • UI animation` plugin 5. Click `Run` button ![Find Plugin](https://aninix-inc.github.io/blog-images/find_plugin.png) 2. When you first open the plugin menu, you'll see Aninix initial screen ![Plugin Unselected Frame](https://aninix-inc.github.io/blog-images/plugin_unselected_frame.png) 3. Select any frame in your Figma design that you want to animate ![Plugin Selected Frame](https://aninix-inc.github.io/blog-images/plugin_selected_frame.png) 4. Aninix will automatically detect what you've selected and your design will appear in the workspace 5. Click `Create new project` ## Step 2: Create Keyframe Animation 1. Create your first position keyframe at the current time ![First Keyframe Header Position at Current Time](https://aninix-inc.github.io/blog-images/first_keyframe_header_position_at_current_time.png) 2. Create a second keyframe for the header position ![Second Keyframe Header Position](https://aninix-inc.github.io/blog-images/second_keyframe_header_position.png) 3. Change the value for your first header position keyframe ![Change First Header Position Keyframe](https://aninix-inc.github.io/blog-images/change_first_header_position_keyframe.png) 4. See your position animation in action ![Example Position Animation](https://aninix-inc.github.io/blog-images/example_position_animation.gif) 5. Change keyframe values for multiple selected items at once ![Change First Keyframes for Multiple Items](https://aninix-inc.github.io/blog-images/change_first_keyframes_for_multiple_items.png) 6. Adjust the offset value for multiple animation segments ![Change Offset for Multiple Animation Segments](https://aninix-inc.github.io/blog-images/change_offset_for_multiple_animation_segments.png) 7. Set the anchor point to middle for better button control ![Button Change Anchor Point](https://aninix-inc.github.io/blog-images/button_change_anchor_point.png) 8. Create scale keyframes for button size animations ![Button Create Scale Keyframes](https://aninix-inc.github.io/blog-images/button_create_scale_keyframes.png) 9. Modify the first keyframe value for the button animation ![Button Change First Keyframe](https://aninix-inc.github.io/blog-images/button_change_first_keyframe.png) 10. View your completed keyframe animation ![Example Keyframe Animation](https://aninix-inc.github.io/blog-images/example_keyframe_animation.gif) ## Step 3: Sync Changes 1. Open the Aninix plugin in your Figma project 2. Select the layer or frame you want to sync changes for 3. Click the `Sync changes` button in the plugin interface ![Sync Changes Even in Animated Project](https://aninix-inc.github.io/blog-images/sync_changes_even_in_animated_project.png) 4. After syncing, you can either: - Click `Open editor` button to continue editing in the plugin, or - Return to your project at app.aninix.com to see the updated animation ![Open Editor or Return to Project](https://aninix-inc.github.io/blog-images/editor_created_project.png) 5. Your changes will be automatically synchronized between Figma and your Aninix project ## Step 4: Export File Format 1. Click the `Export` button in the top toolbar ![Export Button](https://aninix-inc.github.io/blog-images/export_button.png) 2. In the export options dialog, click on the format dropdown menu ![Export Options](https://aninix-inc.github.io/blog-images/export_options.png) 3. Choose your preferred format (Lottie recommended for web, GIF for social media) ![Export Selected GIF](https://aninix-inc.github.io/blog-images/export_selected_gif.png) 4. Configure export quality and animation settings 5. Click `Save` to export your animation ![Export Success](https://aninix-inc.github.io/blog-images/export_success.png) ## Step 5: Preview Lottie 1. Go to [app.aninix.com/lottie_preview](https://app.aninix.com/lottie_preview) to access the Lottie preview tool ![Lottie Preview Select File](https://aninix-inc.github.io/blog-images/lottie_preview_select_file.png) 2. Select your Lottie file to preview ![Lottie Preview Loaded](https://aninix-inc.github.io/blog-images/lottie_preview_loaded.png) 3. Your Lottie animation will load and you can preview it in the browser and share with developers Keywords: `keyframes`, `timeline animation`, `custom animation`, `Figma keyframes`, `animation timeline`, `motion design`, `easing curves`, `animation sequence`