Collaboration Between Designers And Developers Just Got Easier

InVision introduces new feature that connects design to code

Accomplishing design consistency between multiple platforms gets exponentially harder the bigger the company gets. Building proper collaboration systems between engineers and designers often proves to be difficult. Wouldn’t it be nice to have a single shared environment that bridges design and engineering teams together?

At realtor.com we have been among the first users of the new InVision’s Design System Manager (DSM) platform which long term’s vision is to make better collaboration for everyone involved in the creative process. Through constant personal collaboration with the InVision team we kept improving our internal design processes as they added new features to their platform. Their latest feature represents the biggest leap forward in improving design consistency between engineers and designers. Introducing “Purple Layers”.

Handing Over Designs to Engineering

Imagine you are a designer and you shared your new design with an engineer via InVision platform. Engineer now opens the file in the spec mode. Among many components that he can find in the new design, it’s not clear which components are already built in the design system and which ones are new. Unable to find correct component, engineer can waste his time building again something that already exists. More worryingly, he can leave out important minor design details out of the implementation causing consistency problems later on. The new feature will help us deal with this issue.

What are the “Purple Layers” and how to use them?

When designers use components from the DSM library in Sketch, engineers will be able to easily see exactly which components were already built, and which ones are new. The existing components are colored purple in the Inspector view.  Once purple layer is selected, right panel opens up with links to that particular DSM library’s component and its source code. That way, engineer can be confident about reusability of design components and only needs to rebuild components that are not represented by the purple layer.

Now let’s see how to use the new feature!

When you open the InVision prototype link, the default screen will appear. This view is usually used for presentational purposes.

Now open up the spec mode by clicking on the “</>” button which is located in the bottom panel.

The layers panel shows up on the left with our purple layers. This mirrors exactly the behavior of Sketch component layers making sure every component is connected to the right element in the DSM library.

Note: Developer has to have the InVision account to be able to open the Spec mode.

Engineers get information about the component location on the right panel such as, which DSM library this component came from, name and links to the DS library. 

When you select purple layer, another panel opens up on the right side with component details such as library location or a link to the source code. 

Now, engineer is only one click away from the source code. You can see an example in the video below.

The DSM team together with InVision is trying to provide the best creative tools for designers and engineers to work together.  The “Purple Layers” feature will definitely improve the way designers and developers work.

Amsterdam, Netherlands

7 Tips For Using Design System

Every couple of weeks, new tools are released that promise to make our workflow faster and more organized. Once in a while it’s even true, but regardless of how good the tool is, it still takes time to learn it.

Not long time ago my company started using the DSM platform by InVision to build the Design System.  InVision releases new features periodically and the DSM team looks carefully at the ones that can make our teams more productive and efficient. Below is the list of seven tips I would like to share with you about using our design system.

1. Difference Between Web View and Sketch Plugin

The DSM platform can be accessed in two ways: web view or sketch plugin.

Web view is the main view where everyone from the company may see the library with all components, documentation of usage, visual examples and the React code sources. 

Sketch plugin view is a technical tool for designers. The goal of it is to enable reusability of components which improves productivity of designers.

2. Just drag & drop components

Once you’ve installed the DSM plugin in Sketch, open the library by clicking to the DSM icon and start searching for the component you need. Then simply drag and drop it to your sketch file. 

With text styles and colors it’s even easier. Just select an object you’d like to modify in Sketch and click on the Color/Text Style in the DSM panel. 

3. Always apply text styles from the DS type ramp

Make sure that every text element in your designs has an applied text style. 

Applying the text styles from the DSM will help to avoid inconsistencies in font sizes, line-heights and letter-spacing. Thanks to the DSM integration with the InVision prototype, using the DSM text styles in Sketch will help developers apply the right style during the design implementation.

4. All our components have guidelines

Each component class i.e. buttons or text fields has documentation about its usage. The short overview can be found in the DSM panel together with a link to a more detailed description on the documentation website.

5. Easily adjustable subcomponents

We built components using the atomic principles. Starting with small elements i.e. icons or checkboxes we build up more advanced components like text fields or cards. 

It would be very impractical to list all possible permutations of designs for higher level components therefore the library may contain only a specific example of it. Having said that, you may easily adjust and change its subcomponents in Sketch. For example let’s imagine we have Toast component and we want to set the warning message, then we’d drag & drop the toast component from the DSM and we could go to change the warning icon using the right Sketch panel.

6. Never detach the Symbol

It’s really important to never detach the symbol! Doing so will break the component by removing proper syncing with the DSM library; that means the component won’t get updates in the future releases.

If you truly need to adjust higher level component, you can simply hide content you don’t need using the side panel while keeping the base element. Then on top of it, you can build whatever you want!

7. Sketch will automatically adjust spaces for you!

Since we built the DS components using the smart layers function, Sketch will now automatically adjust spaces within your components.

For example in Modal component you need to use only text button, so using the right Sketch panel, hide the primary button. The spacing of the text button will adjust automatically.

Amsterdam, Netherlands