Hello, OutSystems community!

Today we want to share with you some updates on the OutSystems UI design kits and the design to code plugins announced last Next Step.

OutSystems UI kit design files:

We are releasing the OutSystems UI kit file for adobe XD (This is NEW!), so it’s now possible to use the full library of design patterns and screen templates on this adobe design tool. You can download it here.

Design to code plugins:

Plugins will work as extensions to the design tools (figma, sketch and adobe Xd) and once you run them with the design kit file open, they will read all the CSS properties.

These plugins can be found in the marketplaces of their respective communities, but you can find all the information on the OutSystems UI website. 

How do these plugins work?

Once installed, the plugin needs to run with the design kit file opened. It will scan all the style properties of the file and generate the CSS accordingly. All you need to do is to copy that CSS code and paste it into an OutSystems application’s stylesheet.

You can check the readme files on the kits for more information and comment on this thread if you have questions, suggestions, or ideas for improvements. We hope this will help accelerate the design to code journey of the OutSystems apps.