Question

Current states of the mirotone npm package and Figma UI Lirary?

  • 26 January 2024
  • 7 replies
  • 129 views
Yong-Chong Long
Userlevel 1
Badge +1

Hi, there seems to be some disconnects between the Mirotone npm package and the Mirotone Figma UI library, e.g. some icons are available in the Figma library but not in the npm package.

 


This causes some minor frictions when a design is handed over from designers to developers. The issue can be addressed by exporting the assets from Figma and / or manually implementing the styles, but being able to rely on the npm package would certainly improve workflow and thus the question - should we refer to the Figma UI library, the npm package, or mirotone.xyz as source of truth for Mirotone?

Not sure if others find this an issue (love to hear your experience / opinions) but I believe setting the correct expectation will ease both designing and implementation.

7 replies

Max Harper
Userlevel 7
Badge +5

@Yong-Chong Long

I couldn’t agree more with your assessment here! 
 

I was developing Miro apps as they rolled Mirotone out … and have discovered, and continue to see that the docs, the NPM pkg, and the Mirotone page have never been in perfect sync - I attributed it to a rapidly growing company and a rapidly evolving design guide/system…both at the core UI and the SDK level.  

Watching the Miro Platform come into being has been an exercise in both elation, patience and grace. How can I blame them for shipping MVP after MVP… that’s what you do… but as a developer user of what they ship… it can be hard to navigate all the loose ends. I’ve often met these inconsistencies by summoning an attitude of “well…this area of the platform is unfinished or under construction,.. I guess I’ll just do my best in the meantime and proceed as best I can.” 

I think that attitude still applies, even as the platform has continued to tighten up: you find places where they left unfinished work, or lack a system or role for keeping all work up to date - and you say— “hmmm… I’ll take my best guess as to what they desire- and what to do now. ” 

My approach with Mirotone in Figma not matching the npm package is - the most up to date source of truth I go with is the package - thinking (if they didn’t bother to ship it, and it’s just in Figma… then it’s still just a designers’ opinion or presented guidance. I think of Figma-only elements/styles as more suggestive and less “source of codified truth”. When they build css classes around their design system, THEN, they really mean it. I do my best to implement those un-implemented, unclassified styles and elements from scratch and have a whole css section of our own “miro-…” styles that augment the npm package … it’s annoying for icons… having to have two approaches to declaring icons in html - one via html css (theirs) and one via svg that I lift from Figma.  We do our best to follow the Figma where we can, because it’s thoughtful design system, but also give myself leeway… Miro is looking for brand and UI consistency … but they also know they haven’t invented every interface in a Miro plugin/tool. That’s kinda our job as third party developers. :) 

Hope this perspective helps :)
 Cheers, Max 
 

Think visually. Work brilliantly. || visualthinking.tools || Creators of 'PowerPack', 'Clusterizer' and 'Totally Random' Miro Apps: || max@refractivestrategy.com || Support Community Miro Plug-In Creation: https://www.buymeacoffee.com/refractive
Yong-Chong Long
Userlevel 1
Badge +1

@Max Harper, thanks for sharing your thoughts and take on the current state of Mirotone, that was insightful and I too can understand why Miro wants to prioritise growing the platform thus having Mirotone taking a back seat for now. I think bringing up the topic and with sharing like yours are what we can do as a community to help each other navigate through this period until the design system matures.

Taking the npm package as the finalised design is an interesting approach, although it’ll probably add some frictions to a designer’s work. But then it’s more work either way - more implementation work like you mentioned if we treat the Figma library as the source of truth. Perhaps maintaining an internal “self-implemented Mirotone” is the best bet for teams working on multiple Miro apps considering there doesn’t seem to be a way that community can contribute to Mirotone codebase directly (the link to “Development and contributions” on https://www.npmjs.com/package/mirotone is broken) unless I’m missing something.

Once again, thanks for sharing, it helps.

Horea Porutiu
Rank
Userlevel 3
Badge

Hi @Yong-Chong Long 

Thank you for notifying us of the broken link. We are working on this now. I will let you know once we have fixed this issue. 

Best,
Horea

Mettin
Rank
Userlevel 3
Badge +1

Hey @Yonah Russ and @Max Harper,

Don’t tell my boss but I completely understood the frustration with this and decided to sneak in the update in my sprint. You can now use Mirotone v5.1.1, which has all the icons, and the layout of the icons is also aligned with Figma so its easier to find the name of the one you are looking for.

Hope this helps!
Mettin

Yong-Chong Long
Userlevel 1
Badge +1

@Horea Porutiu thanks for clarifying it’s a broken link and have it removed and @Mettin thanks for bringing that into your sprint, I’m sure designers and developers working with Mirotone will appreciate the effort!

Another related follow-up question - I was made aware that https://miro.design was once publicly accessible at some point but now it’s restricted with an Okta login, there’s also another npm package that’s not named mirotone: https://www.npmjs.com/package/@mirohq/design-system, i wonder if anyone has some ideas what are the status of the site and the npm package?

Mettin
Rank
Userlevel 3
Badge +1

Hey @Yong-Chong Long ,

The npm package you mention is our design system indeed, the one that was listed on https://miro.design. You CAN use it, but the docs are missing so the only thing you can do to learn at this time is reading the types (or probably autocomplete will work)

You can see all components we have by going to https://www.npmjs.com/package/@mirohq/design-system?activeTab=code and opening `dist/module.js`

We are using that package also and, while its undocumented, is safe to use.

Another, maybe easier solution is to use mirotone-react. This is a package created by one of our partners and looks amazing! https://github.com/andrewvo89/mirotone-react

Cheers,
Mettin

Yong-Chong Long
Userlevel 1
Badge +1

Thanks for bringing in clarity around this and glad to know that it’s safe for developers to refer to, although it seems like for the time being, teams need to find a way to make it accessible to designers until miro.design is ready to be published again. Also really appreciate you sharing mirotone-react, it looks promising with MIT license and worth exploring.

Reply


Terms & Conditions