The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(