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

  • 26 January 2024
  • 4 replies
  • 70 views

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.


4 replies

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 
 

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.

Userlevel 1
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

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

Reply