Figma design to Anvil

Anvil Q&A
1

Hi,

Has anyone tried to build a Anvil app from a Figma design?
If so, I would really appreciate a guide of some sort :slight_smile:

Thanks!

1 Like
2

Seconding this! If anyone has done this I would be interested.

3

As long as you can get the HTML and CSS, of course you can. I do this all the time. You need to create an html page template, referencing your new css (i.e. _/theme/mynewcss.css). And that will start you off. Then you can build any specific Figma components as html components and set anvil properties by following the Working with HTML docs.

2 Likes
4

Can you provide any insight into the best way to integrate Figma designs into the development process? Is there any recommended workflow for this in order to be able to easily make design changes later on and have them integrated into the app without a tedious exporting and reintegration process? Are there any additional plugins necessary?

I have used Locofy in the past which is great, and that can integrate directly with GitHub, however I feel there should be a way to do this natively, no?

5

So, the workflow currently is:

Export your css and html.

  1. build your new page templates.
  2. add your anvil slots and anvil-names.
  3. build the theme2.css or whatever you want to call it.
  4. build your custom html components.
  5. update native libraries to pick up your style sheet.

And then it’s just test and play.

3 Likes