# @builder.io/html-to-figma

**URL:** <https://forum.builder.io/t/builder-io-html-to-figma/4491>\
**Category:** FAQs\
**Created:** [November 20, 2023, 9:35am UTC](https://forum.builder.io/t/builder-io-html-to-figma/4491 "2023-11-20T09:35:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![akshithpottigari](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/akshithpottigari/32/3118_2.png) [@akshithpottigari](https://forum.builder.io/u/akshithpottigari)\
**Post date:** [November 20, 2023, 9:35am UTC](https://forum.builder.io/t/builder-io-html-to-figma/4491/1 "2023-11-20T09:35:04Z")

</div>

Hey there,  
I am developing a figma plugin which generates Figma Elements/components, from HTML. And I am using @builder.io/html-to-figma. And the code is right below  
import { setContext } from “html-figma/browser”;  
const Element= document.getElementById(  
“1”  
) as HTMLIFrameElement;  
setContext(Element.contentWindow as typeof window);  
const Layers = htmlToFigma(  
“#convert\_to\_figma\_design”,  
location.hash.includes(“useFrames=true”)  
);

In the code.ts

for (let i = 0; i \< layers.length; i++) {  
try {  
const layer = layers[i];  
let updatedLayers = traverseForImages(layer);  
await addLayersToFrame([updatedLayers], baseFrame,);

I am getting a plain frame with the white background of 500\*500 dimensions.

Please reply as early as possible.

Thanks,  
Akshith

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 20, 2023, 9:49am UTC](https://forum.builder.io/t/builder-io-html-to-figma/4491/2 "2023-11-20T09:49:07Z")

</div>

Hello @akshithpottigari,

Greetings and welcome to the [Builder.io](http://Builder.io) forum!

Would you be able to give us more context on the issues, any console errors etc?

Additionally, you can try troubleshoot the below

1. **Ensure HTML is Valid:** Make sure that the HTML you are trying to convert is valid and follows the expected format. If there are any issues with the HTML structure, it might affect the conversion process.

2. **Check the Content of `layers`:** Before the loop where you’re processing each layer, log the contents of the `layers` array to the console. This will help you verify that the HTML elements are correctly identified and processed by the `html-to-figma` library.

3. **Verify `traverseForImages` Function:** Check the implementation of the `traverseForImages` function to ensure that it’s correctly handling and updating the layers, especially regarding any images or special elements that might be causing issues.

4. **Debug `addLayersToFrame`:** Verify the implementation of the `addLayersToFrame` function. Check if it’s correctly adding the layers to the base frame and if any properties such as dimensions or positions are being set appropriately.

5. **Check Frame Dimensions:** Ensure that the dimensions of the `baseFrame` are set correctly. If you’re getting a 500x500 frame, it’s possible that the dimensions are hardcoded or set to a default value. Check if you need to dynamically calculate the dimensions based on the content you’re adding.

6. **Handle Errors:** Wrap the code inside the loop in a try-catch block and log any errors that might occur during the process. This can help identify specific issues that could be causing the problem.
