This is the first step in our journey to create a comprehensive design system and creation method in UXPin. You will be able to communicate important information to your team or stakeholders in a simple, yet powerful way.
The Spec Mode adds a whole new layer to collaborative prototyping – now even a single button has more information than ever before!
In this tutorial we will present two sides to Spec Mode: one within editor and other, visualized in preview mode. Fasten your seat belts as your ride to the future of design is about to start.
When creating complex design systems some of the elements are repeatedly used – both by designers and developers. Some of them may be part of your company’s design system or corporate identity. It’s crucial to maintain cohesion and know when to use which elements. That’s why we have created Specification for you:
Specification allows you to add so called “metadata” to any element used in your prototype. It can be a simple text that explains how your team should use specific button in their design or a list of items for a quick choice. To extend collaboration with developers we also offer a code snippet pasting (for different programming languages).
Below you can see an icon from Android library and created following specification for it.
- Text describes purpose of this element. This icon is supposed to be always used for all primary search actions. Any designer checking specification will instantly know when and where to use it.
- Code snippet shows CSS style for this element and is a simple, straight way to have it transferred into test/production environment for the developer.
- List can be used for different purposes. Lets say we have 3 designers on our team and they create all of the assets. Using list can help you quickly “assign” an icon/image to specific designer. In case your team has any questions about specific element they can reach out to a specific person (author) instead of bombarding you with questions. 🙂
You can have as many fields in Specification as you need. How you will use them and in which combinations is entirely up to you and your team.
Once I have this element created and specification applied to it, all what is left to do is to add it to Custom (Team) Library for further use. Voila! First step made in Spec Mode.
Spec Mode on preview
All the information we have just applied to an element does not mean much without proper presentation to the developer, stakeholder or the customer. Let’s hit the preview and see what can be done with it now! To enter Spec Mode hit </> button on the right-hand side in the Top bar in the Preview mode.
At first moment you will be presented with page summary that includes size, grid, used colors and typography.
Every color from the design will be shown there, including complex gradients and opacity. You can switch between HEX and RGBA color representations and copy their values straight into the clipboard with a simple click. Any colors that have a custom name in the Design System will be displayed with these names instead of their values.
Typography will include not only font family and size but also its style – including custom fonts and styles! It even shows different sizes of the same font used.
Now you are probably wondering where are those specifications we have written before? Good question! You have to inspect an element to see them in details. Click any element to see its properties and specification.
We will discuss those red guides seen when hovering over elements a bit later. Now let’s go through information displayed when inspecting a single element:
When checking Properties, besides size and and information about used colors, you can also check border & radius settings, take a look at CSS code as well as preview and download SVG version of any element you have created. Pretty cool, huh?
On Specification we have all the information that was put in the editor using different fields, so my text description, CSS code (which I simply copied from properties) and our author (chosen from List).
Spec Mode has additional feature that allows a quick, at-a-glance, distance measurement for any element that has been used in your prototype. It has two modes: general and detailed.
General is shown when hovering over element and presents distances in relation to the canvas’ edges. Those are the red guides we have seen when inspecting elements before. In the following gif you can see checking out various elements on the prototype and knowing instantly their position within canvas:
If you click on any element it will switch the measurement to detailed and show distances of hovered elements in relation to an original element.
Using this method I can easily check out if my elements are properly aligned. It would be hard to spot any discrepancies without Spec Mode and the more complex prototype is – the more benefit out of it. Check out our demo design to see all Spec Mode features! Just click here.
Style Guide Summary
As a new addition to Spec Mode, we also offer a style guide in a form of a handy whole-page summary. Just access it by clicking on the link in Spec Mode and you will see all the assets, typography and colours used in your design. There’s even a possibility to download all assets shown in style-guide at once!
We hope that Spec Mode and further Design Systems will be of use to you – let us know what you think at email@example.com!
Ready to try it in UXPin? Log in to the app!