How to integrate Dash with designed material from Figma

Hi all,

I’m new Dash user, I wondering how to implement designed materials designed in Figma into Dash. Do I need to create my own component or just using CSS style sheet directly? I’m just working as DS and work with other vizualization tools before and do not have any experience on frontend and UI/UX workflow. Hope anyone help me to clearly on this! Thanks so much!

Hmm i haven’t used figma before, how do you generally output the designs from figma? Combo of html, css and js?

the output from Figma can be html with css files (if I use the Figma’s plugin)

You can definitely import the css style sheet directly as is, just follow Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly.
My recommendation however for the html would be to convert it to plotly syntax which isn’t too bad since dash supports most of the standard html components shown here and can use all the same classes/css from your css file that figma outputs so it should be a one for one conversion from html to plotly’s html syntax, heres an example

I did some hunting around as well, the following sites might be able to help as well: