Software for presenting design files that utilise the Outsystems UI Kit

Our designer has been using the OutSystems UI kit for Sketch to create screens for a web app.
(https://github.com/OutSystems/outsystems-ui-kit, https://www.outsystems.com/outsystems-ui/)
The idea is that all of the elements and layouts are also available in Outsystems, so turning designs into applications should be straightforward.

We have explored adding the completed design files to inVision and Zeplin for the developer to work from, because both have features that give the developer details of sizing, padding, colours etc. that the designer has used. However, they don't preserve information about which UI elements have been used (in combination with which classes). This means that the developer has to try to work out from the appearance of the element whether it is part of the WebUI framework and which classes have been applied, cross referencing with the live style guide. This often results in developers recreating existing UI elements.

What is the recommended software to present design files with the information that developers need to implement them? The value of the UI kit seems to be lost without a good solution.

Hi William Wynne,

This is a really nice question, i went recently through a project, where the designer provide us the sketchs throgh zeplin and it was a hard task...
We had to build it and custumized it everything by hand.

Br

Outsystems pointed us to this article: https://medium.com/outsystems-experts/designers-vs-developers-5-tips-to-give-peace-a-chance-28c2b9abcc81 which suggests inVision, Zeplin, Avocode and Adobe Assets.

Although Avocode is an impressive alternative to inVision and Zeplin, it still doesn't preserve the required details.

The method we have devised in the absence of a better solution is to add each component that we are using to the styleguide in Zeplin, named as the nested symbol, so that when the dev clicks a component of a screen, a link appears to the component in our styleguide:

We have also added the css class from the Outsystems Live Styleguide to each component in our styleguide, so that the developer can add the correct style classes to the component:

This is pretty time consuming to set up, and we will now have to maintain our styleguide just as Outsystems has to maintain theirs when updates are made to the UI Kit.

Hello William,

Thanks for sharing your experience using the UI Kit. We're aware of the current difficulties on being able to easily communicate the proper widgets and classes applied. Different tools allow different methods for doing this but right now there isn't a good solution yet.

The goal of the UI Kit is to speed the design of Style Guides, by providing the OutSystems UI patterns and styles, it doesn't replace the Live Style Guide Preview, at least for now.

Having that said, we'll keep analyzing the tools available and try to shorten the gap between design, style guide development and application development, and we're open to discuss this topic if you'd like to share how your teams are working with these assets.


My regards