Maintain a consistent design system in Justinmind 8.5

Design system control, enhanced widget library customization and smooth developer handoff. All in Justinmind 8.5

This summer we had some important conversations with our users. Our engineers and product managers spent a lot of time devising a roadmap, creating user stories and building our latest release: Justinmind 8.5

One key thing we kept hearing was greater control over your designs and prototypes. Read on to hear all that’s new in this release and how your prototyping experience got a whole lot more powerful…

Design, build and maintain your design system. Try Justinmind.

Keep your prototypes up to date with Replace Styles

Imagine for a minute that you’re 8 screens deep into a prototype with over 100 different components. Pretty common. Your standard web redesign project would have even more.

But then you have a design meeting. It turns out you need to tweak the colors and change the fonts for those buttons. You’re already dreading the repetitive work.

Nobody wants to waste precious time changing individual components, especially if there’s over 100 of them in your prototype. It’s uncomfortable and a waste of time. And the bigger the prototype, the more difficult it is to make hundreds of changes.

In Justinmind 8.5, we’ve changed that. Now there’s Replace Styles.

Replace Styles is our find and replace. If you’ve used other design tools like Photoshop or Sketch, you’ll be familiar with find and replace. It’s what allows you to find a variable and change it once or change all instances of that variable.

With Replace Styles you can do the same. Find and replace the following styles individually or all at once:

• Fonts
• Font styles
• Font sizes
• Font colors
• Colors
• Background colors

Replace Styles empowers you to keep your designs up-to-date faster and with more consistency, no matter how big the prototype.

To use Replace Styles in Justinmind go to Edit > Replace Styles. A modal will appear that gives you full control over the stylistic changes you want to make to your prototype. You can choose to find components that contains the style you want to change, make the changes one by one, or make a global change in one click.

If you’re working in a prototype that uses fonts not installed on your system, you can use Replace Style to change them to a font you do have in one fell swoop.

You’re not just limited to the current screen either. You can find and replace the styles for the entire prototype.

How many times have you heard a client ask “can we see it in blue?” With Replace Styles, you can quickly create multiple variations of your styles in very little time. Happy client, happy designer.

There’s more. With Replace Style, you can change styles that you’ve used with Events. Before this update, if you wanted to change your button text from #FFFFFF to #000000, you’d have to go inside each Event and change it manually. Slow and tedious.

With Justinmind 8.5, you can use Replace Style to change any styles inside relevant Events. Fast and easy.

Maintain your design system with custom widget library Edit Mode

If you use a design system or rely on custom widget libraries then you need full control over how to maintain and edit those components and patterns. After all, a custom library is there to make your life easier by speeding up the design process.

With Justinmind 8.5, you can now edit and apply global changes to your widget libraries more easily.

Before in Justinmind making changes to customized widgets was a pain. You had to drag each widget to the canvas, make the desired design change, delete the original widget from the library and add the new one.

Those days are done. You can now make changes to your customized widgets that will update the library automatically, and send all the updates to everyone using the library.

By right-clicking the gear icon next to your library’s name, you’ll find the option “Edit library”. When you click this, you will enter Edit Mode.

Make changes to individual widgets in your library by double-clicking them or right clicking and choosing “Edit contents”. In the tab with the opened widget, you’ll see a save icon. You click this to save any changes you make to your widget. Updating your team’s design system is now hassle-free.

But we’re not done yet. You can combine our new custom widget controls with the Replace Styles feature for maximum command over your design system. You can Replace Styles within a customized widget library, changing fonts or colors within your design system faster.

To edit your entire library click “Edit all widgets”. This opens all the widgets within that library onto the canvas.

Once opened, you can use the Replace Styles to edit the styles of each widget in that library, either individually or collectively.

You don’t have to close every individual widget when you finish applying style changes. Click the gear icon, choose “Save all widgets” and then “Exit edit library”. This will close all the opened widgets from the library.

Building a design system is great, but maintaining it is the key to success. Justinmind’s new customized widget library controls mean you can be confident your team’s common components are consistent and current.

No more screen hopping in the developer-friendly UI

In Justinmind 8.5, your developer handoff experience gets a power boost.

Documentation can slow down the design process. It’s lengthy, not everyone understands it and can at times be vague without context.

This is a headache for you and your developer especially as you’re meant to both be on the same page. We’re changing that. Literally.

We’ve updated our developer-friendly UI so developers can now see any comments or requirements directly from the interface in read-only mode.

Before developers would have to simulate prototypes and wade through screens to read this information.

Now all the relevant and important information that your developer needs to do their job is there, at a glance in the user interface. No more screen swapping.

Faster simulation, better user experience for everyone

You know how important consistent and functional designs are when showing stakeholders and colleagues a working interactive prototype.

By showing a lifelike website or mobile app, you can capture imaginations and show functionality and usability in a tangible way. Simulating your prototypes in Justinmind is what allows you to show your design as it would be in the real world.

This sort of stuff is what can get UX buy-in and create better relationships between designers and non-designers.

You told us that simulation could be improved. We listened and we agree. This update we decided to do something about it.

Now when you simulate your prototypes — no matter how big they are — they will load and flow much faster. Going through screens is a breeze and interacting with your prototyped designs is smooth without the hiccups.

New features in Justinmind 8.5

• You can now bulk update the styles of UI elements in your prototype, including their font styles and colors. Check it out in the Edit menu.
• Edit and update all widgets in a custom library. Enter edit mode in a widget library and click “Edit all widgets”. You can edit a widget individually with a double-click or by right-clicking on it and selecting “Edit contents”.
• Simulation is now faster and more efficient.
• Developers can see comments and requirements in the Justinmind user interface in read-only mode.

What we fixed in 8.5

• The mobile application no longer flashes when linking between screens.
• Gestures on certain widgets now work correctly.
• The Sketch plugin is improved. Get the updated plugin here: https://github.com/vconesa/justinmind-sketch
• iPhone X simulation now lines up correctly.
• Fixed an issue with dynamic panel transition effects for resize events.
• Menu items work correctly in simulation.
• The eyedropper tool works for retina screens.
• SVG images are no longer pixelated when used as background.