Show HN: Mirrorful – A developer-first way to implement designs faster(github.com)
github.com
Show HN: Mirrorful – A developer-first way to implement designs faster
https://github.com/Mirrorful/mirrorful
25 comments
Interesting. Two questions
1. How does this compare/relate to https://backlight.dev/?
2. How does a designer work with this? Is it meant to be used by developers only? Where does this fit in the Figma --> Code workflow?
1. How does this compare/relate to https://backlight.dev/?
2. How does a designer work with this? Is it meant to be used by developers only? Where does this fit in the Figma --> Code workflow?
1. In our personal experience, we found Backlight to be a little bit heavy. We want to focus heavily on augmenting existing processes, rather than change how teams work. There definitely is a time and place for Backlight though, we think its an awesome product!
2. We're currently focused on the developer experience, but we believe that working with designers is part of the developer experience! We like to think of ourselves as the "translation" layer between Figma and code. A direct Figma integration is in our roadmap ;)
2. We're currently focused on the developer experience, but we believe that working with designers is part of the developer experience! We like to think of ourselves as the "translation" layer between Figma and code. A direct Figma integration is in our roadmap ;)
Nice work! Whilst I do love the hands-on approach of something like Style Dictionary, I can see the value prop here. Especially with design system standards semi-converging (in the wild at least).
Any plans on supporting native platforms in the future (sorry if I missed it in the docs)?
Any plans on supporting native platforms in the future (sorry if I missed it in the docs)?
Love your point about design system standards semi-converging, we totally agree! We think design systems is slowly transitioning from an art to a science.
We do have plans on supporting native platforms! We've been holding out a little bit to see what folks specifically in mind, so if you have a thoughts or a specific platform in mind, let us know and we'll get it prioritized!
Also, we have an active Slack community if you're interested in conversing more there: https://join.slack.com/t/mirrorful/shared_invite/zt-1ps2xtxh...
We do have plans on supporting native platforms! We've been holding out a little bit to see what folks specifically in mind, so if you have a thoughts or a specific platform in mind, let us know and we'll get it prioritized!
Also, we have an active Slack community if you're interested in conversing more there: https://join.slack.com/t/mirrorful/shared_invite/zt-1ps2xtxh...
I would love native platform support. I’ll write up some initial thoughts and drop them into the Slack.
Would love that! See you in the Slack!
FYI, https://app.mirrorful.com/ on Chrome/iOS Mobile has several z-index and overflow issues.
Ah, yes, thanks for the feedback. When building it, we didn’t expect anyone to attempt set up their design system and export out CSS files on their phone, but we are learning that people still want to try it on mobile.
We might add a alert that says the Mirrorful editor is intended to be a Desktop-only experience. Or, invest in responsive layouts! Luckily we use Charka UI under the hood, which makes defining breakpoints straightforward. Just need to prioritize it.
We might add a alert that says the Mirrorful editor is intended to be a Desktop-only experience. Or, invest in responsive layouts! Luckily we use Charka UI under the hood, which makes defining breakpoints straightforward. Just need to prioritize it.
Whats the benefit of this over something like docz or storybook? Which are also agnostic to framework?
We’re actually huge fans of platforms like Docz and Storybook! With Mirrorful, we want to complement these documentation-first platforms rather be a replacement (some of our initial users use both us and storybook!).
We’re more focused on the actual implementation aspect of building new features, rather than serving as a reference. For example, Mirrorful helps ensure that an engineer is using the right color that the designer intended and isn’t just hard-coding colors all over the place.
I think our value props are similar, in that we’re all looking to speed up engineering velocity and help with design consistency, but targeting different parts of the workflow. There’s a lot of places where things go wrong in the process today!
We’re more focused on the actual implementation aspect of building new features, rather than serving as a reference. For example, Mirrorful helps ensure that an engineer is using the right color that the designer intended and isn’t just hard-coding colors all over the place.
I think our value props are similar, in that we’re all looking to speed up engineering velocity and help with design consistency, but targeting different parts of the workflow. There’s a lot of places where things go wrong in the process today!
Interesting. Given the "design tokens" aspect, would it be possible for a non frontend/non Javascript developer to use this to design components that could be imported and used with PyScript?
I'm personally not super familiar with PyScript, but I would bet so! We store the tokens currently as JSON and have a few "translator" pipelines that convert our object into consumable code. I think we'd just need to add one for PyScript / Python!
Do you have a project you'd be looking to add this to? We're happy to take a look!
Do you have a project you'd be looking to add this to? We're happy to take a look!
The demo video you have is really well put together. The language is great, it has good pacing & touches all the right points. I really liked the tone & attitude of the person recording it. It's MVP'd in a way that it's not over produced, but uses simple tools to achieve a high quality regardless. Well done!
Hey, thanks for your kind words! That's me (Mirrorful's other co-founder). Our first demo video was not very good at all, so I redid it recently. This time around I really focused on the story and trying to be polished... but not too polished.
I'll also now give a big thanks to my mom who put me in an after-school public speaking class during high school haha
I'll also now give a big thanks to my mom who put me in an after-school public speaking class during high school haha
I don't get how this works. Do the files that are imported have css rules defined? Am I supposed to then use those classes in my app? What about apps that not greenfield, do I need to replace all my classes with the ones that mirrorful exports?
Also is there an integration with bootstrap, and if so how would that work?
Also is there an integration with bootstrap, and if so how would that work?
The files that we currently export have CSS variables that once imported, can be used anywhere in your app! With this set up, instead of needing to reference arbitrary hex colors throughout your CSS, you now have a code-based source of truth for your colors and design tokens.
For existing apps, there is definitely a bit of a migration process, appreciate that callout! The good news is that its a migration that can happen over time, as using Mirrorful isn't dependent on your whole codebase being consistent on day 1. We're also looking to leverage AI to do auto-migrations!
We currently don't have a direct integration with Bootstrap, but we definitely work with Bootstrap! I just created a Github Issue for us to create an example to show how you can use Mirrorful with Bootstrap: https://github.com/Mirrorful/mirrorful/issues/260
For existing apps, there is definitely a bit of a migration process, appreciate that callout! The good news is that its a migration that can happen over time, as using Mirrorful isn't dependent on your whole codebase being consistent on day 1. We're also looking to leverage AI to do auto-migrations!
We currently don't have a direct integration with Bootstrap, but we definitely work with Bootstrap! I just created a Github Issue for us to create an example to show how you can use Mirrorful with Bootstrap: https://github.com/Mirrorful/mirrorful/issues/260
Congrats on the progress! Generative AI is all the hype now and there's a few startups exploring using AI to generate front-end code. Is this on your roadmap as well?
Absolutely! We're definitely excited about generative AI and the applications of it to reduce the tedious aspects of frontend engineering.
We're actually currently working on a feature to help generate color palettes using AI, but have some thoughts around code mods (since one of the most painful points of design systems is migrations) and generating components.
We're actually currently working on a feature to help generate color palettes using AI, but have some thoughts around code mods (since one of the most painful points of design systems is migrations) and generating components.
Looks interesting, but I'm looking into Flutter right now, so I guess this is not for me yet.
Flutter is awesome! One of my good friends is building his company with Flutter.
Does Flutter / Dart play nice with JSON? We export out to JSON from our web demo editor fwiw, but we'll definitely look into porting the full experience into a Dart package!
Does Flutter / Dart play nice with JSON? We export out to JSON from our web demo editor fwiw, but we'll definitely look into porting the full experience into a Dart package!
Congrats on launch! Do you have any plans for Figma integration in your roadmap?
Thanks! And yes, we do!
We totally get that at larger companies, the design process really lives in Figma. We're planning on building an integration so that developers won't even need to worry about hex colors, and give designers full control over tokens.
We totally get that at larger companies, the design process really lives in Figma. We're planning on building an integration so that developers won't even need to worry about hex colors, and give designers full control over tokens.
congrats on the launch!
Design systems can be thought of as the “building blocks of your app” which makes me think of Lego bricks. Mirrorful helps you manage your codebase’s Lego bricks and ensure that they are consistent across all of your apps and platforms.
We saw as product engineers how hard it is to get code to match Figma mock ups. High-quality design is a competitive advantage, so getting your UI pixel perfect can matter a lot, but is time-consuming and tedious.
When we worked for large public companies, we saw that good component libraries help, but engineers are often still dealing with tweaking small design decisions. There are a lot of inefficiencies. We also worked at a small startup and saw what it was like to not have a design system. No design system led to copy pasta code, and days of back-and-forth on simple things like “what hex should i be using for the hover state?”
Design systems are tricky to get right. Picking an out-of-the-box solution is easy to begin with, but one day you’ll be cursing yourself due to lack of flexibility (we did!). On the other hand, creating a design system from scratch is super time-consuming even for the best frontend engineers. Mirrorful is our way out of this dilemma.
Mirrorful is completely open-source and written in Typescript. We’re starting with basic design elements—commonly called “design tokens” — such as colors, typography, and shadows, but have plans to expand our scope into more complex components.
As frontend engineers ourselves, we wanted a tool that lives in code but is visual. It had to be super easy to set up, but also prepare you for scale so you and/or your team don’t end up copy-pasting everywhere. We decided to make it an NPM package (https://www.npmjs.com/package/mirrorful) that runs a localhost editor and exports out your design tokens into any configuration you want: .js, .ts, .css, .scss, .json. It’s lightweight with no design system lock-in.
Our product is completely self-serve: just install our NPM package. If you run Mirrorful locally, a visual dashboard will pop up at localhost:5050 that lets you manage your theme and export various configuration files directly into code.
Pricing is similar to other open-source companies—we charge for cloud-hosted features and for premium components.
We’ve built open-source/open-core projects before and love interacting with contributors from all over the world. If anyone has any opinions on what we’re building, we’re all ears. Check us out at mirrorful.com and at github.com/Mirrorful/mirrorful and give it a shot!