In early 2024, Anima announced GenAI code personalization - A whole new level of design to code workflow.
Anima already produces a pixel-perfect code that runs out of the box, right out of Figma. With this update and a set of upcoming AI features coming in early 2024, the generated code looks more and more similar to how developers write their code, individuals or teams.
Here’s a quick guide of how you could personalize your code to your own conventions:
If you're using Figma's Dev Mode, you can access Anima under "Plugins":
Alternatively, you could use Figma's Edit Mode. Find Anima in the "Plugins" (if you don't have it installed, simply search for "Anima" in the plugins' search bar):
Select the component / screen from which you want to extract code
Click the "Edit AI Personalization" button
Under the "Advanced AI personalizations" window, there are multiple settings and possibilities:
Framework picker - Choose which framework you want your code to be output to. We currently support HTML, React and Vue, with multiple styling options.
Code sample - Here you can paste a code snippet and Anima will adapt the code output to follow its code conventions and style.
Presets - Created by Anima, these presets can shape your code to follow determined guidelines, such as using flexbox for the layout, or using REM as the unit for fonts.
Custom instructions - Here you can give your own custom instructions, using prompts. Styling, coding conventions, external libraries, file structure, naming...the possibilities are endless!
After the setup, you are ready to generate the code. Once you've clicked "Done", Anima will automatically start generating the code.
When it comes to AI Personalization, there are 2 different settings for code generation: Fast (best for simple requests) and Smart (suited for complex requests and more precise results):
After the code is generated, you can open it in Playground for a preview, or you can download your selection. Below is an example of the generated code for this tutorial:
Click to show / hide the code
Click to show / hide the code
import PropTypes from "prop-types";
import React from "react";
import { Button } from "./Button";
import { IconComponentNode } from "./IconComponentNode";
import "./style.css";
export const HeroSection = ({
screen,
className,
heroSectionFrameClassName,
heroTextButtonsClassName,
divClassName,
highlightedNftClassName,
}) => {
return (
<div className={`hero-section ${screen} ${className}`}>
<div className={`hero-section-frame ${heroSectionFrameClassName}`}>
{["dekstop", "tablet"].includes(screen) && (
<>
<div className={`hero-text-buttons ${heroTextButtonsClassName}`}>
<div className="headline-subhead">
<p className="discover-digital-art">Discover Digital Art & Collect Nfts</p>
<div className="NFT-marketplace-UI">
{screen === "dekstop" && (
<p className="text-wrapper-10">
Nft Marketplace Ui Created With Anima For Figma. Collect, Buy And Sell Art From More Than 20k Nft
Artists.
</p>
)}
{screen === "tablet" && (
<p className="text-wrapper-10">
NFT marketplace UI created with Anima for Figma. Collect, buy and sell art from more than 20k NFT
artists.
</p>
)}
</div>
</div>
<Button property1="secondary-filled" text="Get Started" />
<div className="additional-info">
<div className="div">
<div className={`text-wrapper-2 ${divClassName}`}>240k+</div>
<div className="text-wrapper-3">Total Sale</div>
</div>
<div className="div">
<div className="text-wrapper-4">100k+</div>
<div className="text-wrapper-5">Auctions</div>
</div>
<div className="div">
<div className="text-wrapper-6">240k+</div>
<div className="text-wrapper-7">Artists</div>
</div>
</div>
</div>
<div className={`highlighted-NFT ${highlightedNftClassName}`} />
</>
)}
{screen === "mobile" && (
<div className="hero-text-buttons-2">
<div className="headline-subhead-2">
<p className="p">Discover Digital Art & Collect Nfts</p>
<p className="text-wrapper-8">
NFT marketplace UI created with Anima for Figma. Collect, buy and sell art from more than 20k NFT
artists.
</p>
</div>
<div className="highlighted-NFT-2" />
<Button
className="button-instance"
icon={<IconComponentNode className="rocket-launch-instance" />}
property1="secondary-filled"
text="Get Started"
/>
<div className="additional-info">
<div className="div">
<div className="text-wrapper-9">240k+</div>
<div className="text-wrapper-8">Total Sale</div>
</div>
<div className="div">
<div className="text-wrapper-9">100k+</div>
<div className="text-wrapper-8">Auctions</div>
</div>
<div className="div">
<div className="text-wrapper-9">240k+</div>
<div className="text-wrapper-8">Artists</div>
</div>
</div>
</div>
)}
</div>
</div>
);
};
HeroSection.propTypes = {
screen: PropTypes.oneOf(["dekstop", "tablet", "mobile"]),
};
New to Anima?
Learn More