How to Create Ad Creatives from Figma Design

How to Create Ad Creatives 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: Make Animation with Presets 1. Once you've created your project, you'll see the editor workspace with your selected design elements ![Editor Created Project](https://aninix-inc.github.io/blog-images/editor_created_project.png) Click on any element in the canvas that you want to animate to select it. 2. With an element selected, you'll see the Quick Presets popup appear at the top of the interface ![Preset 1 Header](https://aninix-inc.github.io/blog-images/preset_1_header.png) Click on any preset from the Quick Presets popup to apply that animation to your selected element. 3. To animate multiple elements at once, hold `⇧ Shift` and click on additional layers in your design ![Preset 2 Items](https://aninix-inc.github.io/blog-images/preset_2_items.png) You can select multiple layers by holding `⇧ Shift` and clicking with your mouse on each element you want to include in the animation. 4. With multiple elements selected, apply presets from the Quick Presets popup ![Preset 3 Button](https://aninix-inc.github.io/blog-images/preset_3_button.png) The selected preset animation will be applied to all your selected elements simultaneously. 5. Adjust your project duration to fit your animation by using the timeline controls ![Fit Project to Animation](https://aninix-inc.github.io/blog-images/fit_project_to_animation.png) You can change the project duration to ensure your animation timing matches your desired length and all keyframes fit properly within the timeline. ## 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 GIF for social media ads or MP4 for display ads ![Export Selected GIF](https://aninix-inc.github.io/blog-images/export_selected_gif.png) 4. Configure file size and quality for ad platform requirements 5. Click `Save` to export your animation ![Export Success](https://aninix-inc.github.io/blog-images/export_success.png) Keywords: `animated ad creatives`, `marketing animation`, `social media ads`, `display ads`, `ad animation`, `promotional animation`, `marketing graphics`, `animated banners`