How to Share Button Animation with Developer from Figma Design

How to Share Button Animation with Developer from Figma Design

## 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: 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 Lottie format for interactive web buttons ![Export Selected GIF](https://aninix-inc.github.io/blog-images/export_selected_gif.png) 4. Configure Lottie settings for hover and click effects 5. Click `Save` to export your animation ![Export Success](https://aninix-inc.github.io/blog-images/export_success.png) ## Step 4: 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 test button interactions Keywords: `button animation`, `hover effect`, `click interaction`, `microinteraction`, `UI demo`, `interactive button`, `button hover`, `UI feedback`