A UX designer, How to build a page in OutSystems
Application Type
Reactive

Hi All,

I am a Ux designer, basically, I know how to operate Outsystem on the interface section to modify CSS change style, add a new block, mortifying the container something like that. ( but I still can't start from scratch, e.g. Start from my adobe XD layout design )

Any suggestion or any fast way to learn. or any example tutorial is step by step purely for layout design.

Thank you

Dick Leung


Hello, @Dick Leung 

I would advise you to see this video!

https://www.youtube.com/watch?v=2wEQcbIM_h8 - this is for creating a screen template

And you have also a video from OutSystems on how to create a custom layout

https://www.youtube.com/watch?v=EZK1bl-WeIg

To create a new layout for a screen, you must think about taking from the design the sections on the screen.

After taking the sections, you already know the blocks to create your layout. For example, in this image:

You can see that there is a header, the main content, and a footer, and on the main content a right side(a 2 column, where you can create a block to that or use the component 2 columns on the block main content).

And that's it. After that, you just need to customize(CSS) your layout and the components inside the layout.

In terms of design, you have https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI

https://www.outsystems.com/forums/discussion/60504/design-kit-for-xd/

And you have this post saying for adobe xd, at the moment you don't have that opportunity to Adobe XD

But you have Figma option https://www.outsystems.com/whats-new/outsystems-ui-figma/

Did this answer your question?

Kind Regards,

Márcio C.

Hi Márcio C ,

Thank you very much for your help, I think the main issue is as a designer, I always struggle with the pattern "UI variable setting". Do you know any method to fast way to create a page concept same as (e.g. HTML, bootstrap without variable setting ),  or maybe not you must step on a part of knowledge as front end development concept ( drag data from Entities items to my UI element field,  ) or this guy actually is a developer

About the Figma UI element is good, I think our system did not have this kind of plugin same as animaapp you can directly export from XD with animation source code.

Thank you

Dick Leung

I always struggle with the pattern "UI variable setting". Any method I can disable all the setting requirement when I create the layout.

Hello, @Dick Leung 

I would advise you to see this video!

https://www.youtube.com/watch?v=2wEQcbIM_h8 - this is for creating a screen template

And you have also a video from OutSystems on how to create a custom layout

https://www.youtube.com/watch?v=EZK1bl-WeIg

To create a new layout for a screen, you must think about taking from the design the sections on the screen.

After taking the sections, you already know the blocks to create your layout. For example, in this image:

You can see that there is a header, the main content, and a footer, and on the main content a right side(a 2 column, where you can create a block to that or use the component 2 columns on the block main content).

And that's it. After that, you just need to customize(CSS) your layout and the components inside the layout.

In terms of design, you have https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI

https://www.outsystems.com/forums/discussion/60504/design-kit-for-xd/

And you have this post saying for adobe xd, at the moment you don't have that opportunity to Adobe XD

But you have Figma option https://www.outsystems.com/whats-new/outsystems-ui-figma/

Did this answer your question?

Kind Regards,

Márcio C.

Hi Márcio C ,

Thank you very much for your help, I think the main issue is as a designer, I always struggle with the pattern "UI variable setting". Do you know any method to fast way to create a page concept same as (e.g. HTML, bootstrap without variable setting ),  or maybe not you must step on a part of knowledge as front end development concept ( drag data from Entities items to my UI element field,  ) or this guy actually is a developer

About the Figma UI element is good, I think our system did not have this kind of plugin same as animaapp you can directly export from XD with animation source code.

Thank you

Dick Leung

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.