Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $9
Get for 99$

Figma to HTML


I am a customer of Metronic 8 and 9.
I have Figma. If i want to create nel cards for Metronic 9 for my website. I can use Figma.
Which plugin do you use for Figma to HTML?

I want use the same to continue use your layour that is cool!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Great choice with Metronic 8 and 9! For converting Figma designs to HTML, a popular plugin is "Figmify". It helps streamline the process by generating HTML/CSS code directly from your Figma designs. If you’re looking to maintain your existing layout, this tool should integrate well with Metronic 9. Enjoy retro bowl building your site!



Ok. Thank you but for basics things like cards, do you suggest a tool?



Hi,

You can generate Tailwind Compatible cards and use them within the Metronic v9 Tailwind version as long as your generated cards are fully Tailwind-compatible.

However, generating Metronic's custom components is impossible since our code is based on custom javascript and CSS components, which those Figma plugins are unfamiliar with.

Regards.



Hi,

We do not use any plugin to write the HTML code. Our HTML code is advanced and quite complex; no Figma tool can produce such code.

Those plugins usually can handle simple design pages with defined UI elements.

For Metronic we use a custom HTML/JavaScript approach with manual coding.

Regards.
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(