While the pxCode plugin (and any Figma-to-HTML plugins) can display and export the code from your Figma project, you’ll need more than just the code to transform your project into a functional website. Exporting code from Figma can be helpful to developers who are building sites from Figma prototypes, but if you’re not a developer, you’ll still need the help of one to transform that code into a usable, responsive website.
Once your account is created, you’ll be taken to a sample website design, where you’ll see a tutorial for transforming your own design into responsive code. The video is just 3 minutes long, so take a few minutes to watch it so you know how to fix responsiveness issues in your code.
Once your account is created, you’ll be taken to a sample website design, where you’ll see a tutorial for transforming your own design into responsive code. The video is just 3 minutes long, so take a few minutes to watch it so you know how to fix responsiveness issues in your code.
Click the back button at the top-left to go to the list of lessons. Click the back button again to go to All Projects. Click the +New Project tile. Drag the . pxcode file to the pink box, or click the box to select the file. Click Create Project. Once created, you’ll be taken to your project, which has no components yet.
Click + Convert Screen/Component from design file. Enter a name for the class so you can easily identify it in your project. Click Convert to parse the design file and open it in the pxCode editor. You can simply export the existing code without making changes, but this is a good opportunity for you to fine-tune your code before exporting.
To save the code to your computer, click Download at the top. Or, to paste it into your editor, just click Copy to copy it to your clipboard. Downloading the code creates a ZIP file that contains all CSS and assets, including images.
While the plugin is free, you’ll need a Pro account to export HTML and other code with Anima. [2] X Research source Accounts start at $31/month. Keep in mind that while Anima can export most of the code from your Figma prototype, just having the code isn’t enough to build a functional website. Exporting the code can be valuable to developers who are working from a prototype, but if you’re not a developer, you’ll still need the help of one to transform that code into a usable, responsive website.
Click the Figma menu (the “F” design at the top-left). Click Plugins on the menu. Select the Anima plugin. Click Sign up. Create an account. You can sign up with Google if you don’t feel like making a new password. Click Back to Figma once the new account setup is complete.
If you don’t have a Pro account, you’ll be prompted to upgrade now. You can still sync your project to Anima without a Pro account, but you can’t download code unless you upgrade.
To see the code for iOS or Android-specific development, select one of those options from the menu instead.
The default view is the two brackets, which is Code view. Click this option if you want to easily copy the CSS code from Figma and paste it into your editor. [4] X Research source If you just want to view the code quickly, click the three lines for Table view.
