The Actions Wizard allows you to add interactivity to your animation in a visual way without even knowing any code. This blog demonstrates how to access this wizard and use it to build interactivity.
I will also be following this: Glassmorphism UI - Figma Tutorial: https://www.youtube.com/watch?v=uRVnX0k593E
You can copy the layers you create as css.
I also found a list of figma plugins that are helpful, here are some: Figma:
Plugins related projects on github:
Open source Figma plugins related projects on GitHub
A list of Figma Plugins and resources for building them.
Plugins
A collection of plugins that have been open-sourced.
Valor
Visualise existing or new color palettes in your design system or Generate lists of color variables from color palettes.
| Repo | Plugin on Figma |
Image Palette
Extracts a colour palette of 5 different colours from the selected images.
| Repo | Plugin on Figma |
Send to top
Sends selected layers to the very top of the layer stack above all other frames on the canvas.
| Repo | Plugin on Figma |
Themer
Enables you to create themes and easily swap between sets of styles across your projects. Eg: Light/Dark
| Repo | Plugin on Figma |
Sorter
Enables the user to quickly sort the order of layers based on position, name (alphabetical), reverse order, or random.
| Repo | Plugin on Figma |
Dominant Color
Generate a palette from an image to magically populate your designs.
| Repo | Plugin on Figma |
Responsify
A Figma plugin to quickly test your designs across multiple device sizes.
| Repo | Plugin on Figma |
Figma Export
Easily export assets from Figma directly into a .zip file.
| Repo | Plugin on Figma |
Project Scaffold
This plugin Generates a Scaffold for your Product design project in just 1 click.
| Repo | Plugin on Figma |
Figma Walker
Figma Walker is a new launcher for Figma. You can take any actions you want from a single input field.
| Repo | Plugin on Figma |
Figma Sort It
Sort selected Frames or Layers by names or position.
| Repo | Plugin on Figma |
Figma Map Maker
Map Maker allows you to make a customized map blazing fast. It currently supports Google Maps and Mapbox.
| Repo | Plugin on Figma |
Figma Format
Figma Format let’s you format your canvas by grouping them by the names.
| Repo | Plugin on Figma |
Android Resources Export
Export multiple sizes PNG from selected slice or exportable layer, with a fixed folder structure (drawable-xhdpi, etc..) and valid name.
| Repo | Plugin on Figma |
Feather Icons
Quick access to Feather icons in Figma.
| Repo | Plugin on Figma |
Tailwind CSS
Generate styles and other cool stuff straight out of your tailwind config file.
| Repo | Plugin on Figma |
Figma Tailwindcss
Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss.
| Repo | Plugin on Figma |
Rich data plugin
Replace placeholder Figma text values with real data from real APIs.
Easing Gradient
Make beautiful smooth gradients in Figma. Linear gradients often have hard edges where they start and/or end. This plugin adds gradient stops to approximate easing functions.
| Repo | Plugin on Figma |
Figma Measure
A plugin for easy measurement of sizes. A small user interface allows you to add arrows for heights and widths.
| Repo | Plugin on Figma |
Super Tidy
A Figma plugin to easily align, rename and reorder your frames based in their canvas position.
| Repo | Plugin on Figma |
Content Buddy
A Figma Plugin that makes replacing text content in multiple layers super easy for anyone.
| Repo | Plugin on Figma |
Kaleidocode
Convert VS Code themes to Figma color libraries, create new themes via JSON, and swap themes automatically.
| Repo | Plugin on Figma |
Chroma
Create bulk color styles from selection. Simply select any objects that have a fill color, run the plugin, and it will generate the color styles for you automatically.
| Repo | Plugin on Figma |
Navigator
An easy way to find and apply color styles from your current document.
| Repo | Plugin on Figma |
Better Font Picker
Better Font Picker helps you select fonts with a preview of how it looks.
| Repo | Plugin on Figma |
Now for the interactive design!
You add code using wizard in adobe animate.
You click on the instance, or action command, and choose the object to apply the action to. You open the project in the web browser in html to test.