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