Skip to main content
Question

Getting HTML from component with Figma API?

  • February 28, 2024
  • 8 replies
  • 1852 views

Hello,

I’d like to know how I can get the HTML from an existing component, so that I can copy this HTML and then go to another Figma file and simply do “CTRL + V” to paste the component.

I made some tests on this site : https://www.figcomponents.com/ and when I click on the “copy to clipboard” button, I saw that it generates a kind of HTML code (which is not real HTML). This is this kind of code that I’d like to retrieve when I click on my own components.

Could you please tell me how to do ? I thought maybe it could be achieved with the API but I don’t know how. I tried to use the api but I have to give the component id as a parameter and I don’t know how to retrieve this information.

Could you please help me ?

This topic has been closed for comments

8 replies

  • Author
  • 4 replies
  • March 4, 2024

Hello again…
I just saw that this thread had 40 views and no replies. I’m surprised to not have received a single response. Was my question unclear? Or is what I’m asking not possible? Could you simply inform me?
Thanks in advance.


y_toku
Figmate
  • Community Support
  • 2389 replies
  • March 5, 2024

Hi there,

Thanks for reaching out. Figma itself does not have a built-in feature to export designs directly to HTML code. However, there are several plugins and external tools available that can help you convert Figma designs into HTML code in Community: https://www.figma.com/community/search?resource_type=mixed&sort_by=relevancy&query=html&editor_type=all&price=all&creators=all.

I hope these help but please feel free to reply if you have any further questions!

Thanks,
Toku


  • Author
  • 4 replies
  • March 5, 2024

Thanks for your answer, but the plugins simply convert Figma compenents to HTML.
That’s not exactly what I need…
Let me explain again.

If you go to this site : https://www.figcomponents.com/ and if you click on the button to copy it inside the buffer, then you go to a Figma file and you just have to do “CTRL + V” to paste the element on the canvas.

The “thing” that is copied inside the buffer is njot really HTML, or maybe I should say “not only” HTML.

If I copy some HTML code and go to my Figma Canvas and CTRL + V, nothin will be pasted.

Do you see what I mean ?


y_toku
Figmate
  • Community Support
  • 2389 replies
  • March 7, 2024

Thanks for your response. I’m not entirely sure, but I guess you’re asking how to retrieve the properties displayed in the attached image?

If that’s the case, you can access this feature through Dev Mode, but please note that this is only available on our paid plan. Here’s a guide to help you navigate Dev Mode: https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode.

I hope this information is helpful. However, I may have missed something. For better understanding, any additional screenshots or screen recordings you could provide would be greatly appreciated!

Thanks,
Toku


  • Author
  • 4 replies
  • March 7, 2024

Hello,
Thanks for your answer.
I’m sending you a screenshot of what I want to achieve and the content that I have to retrieve to then be able to paste it into Figma.

As you can see, it’s not only HTML, there are a lot of content. This is this content that I want to retrieve and I just need to know how.

Do you see what I mean ? Is it possible to retrieve this content ? And how ?

Thanks for your help.

Regards


y_toku
Figmate
  • Community Support
  • 2389 replies
  • March 8, 2024

Ah, understood! Thank you for providing the screenshot. That being said, I’m afraid it’s not possible to retrieve this data in Figma. As previously mentioned, the best possible approach you could utilize is the Dev Mode.

I apologize if I couldn’t be of more help at this time but please feel free to post if you have any questions!

Thanks,
Toku


  • Author
  • 4 replies
  • March 11, 2024

The thing that I don’t understand, is that when you have a look at the screenshot I sent you, you can clearly see that the code is not entirely HTML code.
I mean, it is HTML but inside the medadata attributes there are some kind of Figmla code, and I don’t think this code can be retrieved in dev mode.
Dev mode will give me only HTML code for the elements, right ?
But this HTML code cannot be copied and pasted inside a Figma canva, right ?

Isn’t there a developer that could give me some explanations on how to retrieve this code ?
This is the only thing that i need : know how to retrieve the code that can be copied / pasted into Figma as a component.


Mohit_Yadav1

Hi veran, were you able to find a solution to this?

I am building a use case and want this MIME html when copying the frame.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings