New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs
Light
Dark
System
Ask  Question

Metronic Design System


Hi,
Is there, by any change, a Metronic Design System file (preferably Adobe XD) available?

It would be very useful to have, for UI/UX designers, to use as base designs, together with the HTML/Vue/Angular/etc for frontend developers.

Thanks.


T
Thys 3 years ago
Design
6 Answers
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 (6)

user
Pablo G 1 year ago

any update? we are looking forward to Metronic Design System. thanks!


user
Sean Author3 years ago

Hi,

At the moment we provide in the download package only Figma files that we used in-house for the main pages of Metronic. A complete design system in Figma will be available in the near future.

Regards.


user
Elhami Abujoukha 3 years ago

Hi,
What about Adobe XD ?
Regards


user
Kateryna Naumenko 1 year ago

Hi, is there any update on this, please? We really need access to Metronic design system in Figma to make sure we can provide the design team with everything needed before we implement it in the code. Thank you.


T
Thys 1 year ago

Hello Sean,
It's been a long two years since we've waited for a response from the Keen folks to determine whether the latest Metronic Design System is available for the Figma design platform.

Could you or anyone else please provide an update?


user
Sean Author1 year ago

Hi,

We have just released Metronic 9 with Tailwind CSS support and it comes with a complete design system in Figma file. Pleas download the latest Metronic and check out the Metronic v9 design system.

For Metronic 8. x, the Bootstrap-based version we provide the current Figma file only. The new design system with Figma file is released for Metronic 9 Tailwind CSS only.

Regards.


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  :(