Viewing and exporting your generated code is quite simple and takes just a few clicks. Simply follow the steps below:
Open the Anima plugin in Figma's Dev Mode or Edit Mode. They do the same, so feel free to choose whichever one you prefer:
Select the frame you want to generate code for. This is called inspecting, and once you do it, you will be able to view the generated code:
After you inspect the frame, you have 3 options for getting the code:
Open in Playground - This will open the generated code in a side-by-side view of the code and the result in Anima's online code playground.
Download selection - This will create a code package, and will download it to your computer.
To open HTML simply double click the file or drag into Chrome.
You can run non-HTML code with
npm install
+npm run dev
in terminal.
Copy code - This will copy to your clipboard the code in the present inspect window. Note that there are a few files in multiple tabs.
After that, you can open your code locally in your code editor of preference.
New to Anima?