How to Animate with Keyframes from Figma Design
How to Animate with Keyframes 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

2. When you first open the plugin menu, you'll see Aninix initial screen

3. Select any frame in your Figma design that you want to animate

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

2. Create a second keyframe for the header position

3. Change the value for your first header position keyframe

4. See your position animation in action

5. Change keyframe values for multiple selected items at once

6. Adjust the offset value for multiple animation segments

7. Set the anchor point to middle for better button control

8. Create scale keyframes for button size animations

9. Modify the first keyframe value for the button animation

10. View your completed keyframe animation

## 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

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

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

2. In the export options dialog, click on the format dropdown menu

3. Choose your preferred format (Lottie recommended for web, GIF for social media)

4. Configure export quality and animation settings
5. Click `Save` to export your animation

## Step 5: Preview Lottie
1. Go to [app.aninix.com/lottie_preview](https://app.aninix.com/lottie_preview) to access the Lottie preview tool

2. Select your Lottie file to preview

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`
© 2021-2025 Aninix Inc. All rights reserved
© 2021-2025 Aninix Inc. All rights reserved
© 2021-2025 Aninix Inc. All rights reserved