Figma API to HTML/CSS

577 views Asked by At

Trying to write a converter from Figma design to HTML/cSS. What I've followed so far:

  1. Fetch the data for a particular Figma file by hitting a GET request using the FIGMA_TOKEN and FILE_ID
  2. Parse the file to find children/components and extract the style properties to eventually convert it into CSS

Where I'm stuck and not able to figure out is how to structure the UI elements in proper HTML. For eg., the hierarchy and the tags to create a usable HTML code

In the UI here, I've like the following HTMl to be generated:

<div class='container'>
   <h3>Template List Activities</h3>
   <div class='content__wrapper'>
      <h6>Account Name</h6>
      <div class='meta'>
         <ul>
            <li>Activity Type</li>
            <li>Yesterday</li>
         </ul>
      </div>
   </div>
</div>

Just need some guidance on how to approach this

enter image description here

0

There are 0 answers