What are the options for importing UI compinents or screens from design tools?

Hi,

If we assume that 90% of the world's UI design for mobile, probably takes place in either Sketch, Adobe XD or Figma - what would be the best import path for taking work from those tools and into OutSystems, please?

I'm aware of the OutSystems UI components & templates but this question is about taking designs created by our UI & UX designers and using them an OutSystems mobile project.

Thanks,

Steve

Hi Steve,

As far as I know, there is no "best import path". From my experience the design is presented to the team and a front-end developer (if available) will start implementing the solution.

In order to make this process more agile, we either use OutSystems UI as it comes or build a Styleguide to extend it. This is made with the design team and development team being part of the whole process to make sure that both teams are aligned and whatever is delivered by the design team can be quickly implemented by the development team.

Hope that helps!

Just for curiosity's sake, do you know any tools/technologies that allow that import with zero effort from the development team?

Hi Cristiana,

Many thanks for the reply.  

It has surprised me that OutSystems seems to be speeding up functional code development, but apparently pushes the time-to-market back on the UI side as it needs (re)constructing inside OutSystems itself, rather than importing from the design environment where designers work?  With the greatest of respect to OutSystems I can't see many designers switching from their existing workflow...   ;-)

These days there are numerous tools which parse design files (XD, Sketch, Figma) and produce code, removing the handoff bottleneckof developers having to recreate the work of designers.  A few that spring to mind;  

Supernova Studio
https://www.supernova.io/

Airbeam
https://airbeam.io/

Clutch
https://clutch.io/

Sketch2React
https://sketch2react.io/

Phase
https://phase.com/

There are others but I can't recall them atm.

Can the OutSystems IDE import SVG perhaps?  That's basically structured, standard-format code that anything should be able to render consistently.  We could go through and export each of our UI components that way and bring them into OutSystems perhaps?

Thanks again for the repy.

Steve

Hi Steve,

We are aware of the gap between the design stage and developing either components or screens with OutSystems, based on those design assets. This is something we're actively working, but at the moment there is no automation for this process.

However, there are a few ways to speed up the process. As Cristiana mentioned, OutSystems UI provides a solid base of UI patterns (or components) that are easy to customize to your UI needs, and a Sketch file with all the UI patterns, so the design team can speed up that process.

It is possible to import SVG files, but I'm not sure if what would allow to import a UI component, they would be treated as regular images.

I hope this helps,

My regards