@builder.io/html-to-figma

FAQs
1

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

2

Hello @akshithpottigari,

Greetings and welcome to the 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.

    console.log(layers);

  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.

    console.log(baseFrame.width, baseFrame.height);

  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.

    for (let i = 0; i < layers.length; i++) {
  try {
    // Your existing code here
  } catch (error) {
    console.error('Error processing layer:', error);
  }
}