Designing for Low-Code: Using Figma & OutSystems

Introduction

This Support will cover the design process in Figma for OutSystems development, how to import Figma designs into OutSystems, and how to use OutSystems to build low-code applications based on your Figma designs.

Common use cases & industries

If customer doesn't want to use standard Outsystems UI Theme, it is very likely, that a UIUX Design team is using Figma to design a new style.

Two Questions, to be answered

• How a Figma Designer can design in an Outsystems Compatible Style ?

• How this can be exported and used in Outsystems to reduce effort ?

Brief overview of tools: Figma and OutSystems

OutSystems is a Low-code development platform which provides tools for companies to develop, deploy and manage omnichannel enterprise applications.

Figma is a collaborative web application for interface Design.

Resources Outsystems UI Figma Desgin Kit

Here you'll find the essential resources to create your applications with the OutSystems UI Design System.

link: https://www.figma.com/community/file/834055650773939291

Reminder

OutSystems UI Plugin: Plugin is not supported by OutSystems & will only apply changes to the general theme of Outsystems Still not very useful & it will not automate the translation of your Figma prototypes to a functional Outsystems application.

Guidelines for using Figma to design user interfaces that can be easily translated into OutSystems components.

Background color: In Figma, you can set the background color of a component or a page. This can be translated to OutSystems by setting the background color property of the container.

Font family, size, and weight: In Figma, you can set the font family, size, and weight of text elements. This can be translated to OutSystems by setting the font-family, font-size, and font weight properties of text elements in the CSS.

Margin and padding: In Figma, you can set the margin and padding of components. This can be translated to OutSystems by using the built-in margin and padding classes provided by OutSystems.

Tip: If You are new to Figma & wanna Check Spacing Between element you can Select Text Then ALT & point to neighbour Components to see paddings & margins.

Flexbox: In Figma, you can use flexbox to position and align components within a container. This can be translated to OutSystems by using the built-in flexbox classes provided by OutSystems, or by creating custom classes in the CSS.

Grid: In Figma, you can use grid to create complex layouts with rows & columns. This can be translated to OutSystems by using the built-in Gallery provided by OutSystems.

Height and width: In Figma, you can set the height and width of components. This can be translated to OutSystems by setting the height and width properties of the container or container fluid element in the CSS.

Border radius, Lines Stroke width: In Figma, you can set the border radius of components. This can be translated to OutSystems by setting the border-radius property of the container or container-fluid element.

Box shadow: In Figma, you can add a box shadow effect to components. This can be translated to OutSystems by setting the box-shadow property of the container or container-fluid element.

Front-End in OutSystems

In OutSystems, the front-end development process is primarily handled in a low-code environment, where developers can visually design the user interface (UI) by dragging and dropping elements and configuring their properties.

The Interface Tab within OutSystems Service Studio is where most of the front-end design and development work is done.

The Interface Tab in OutSystems Service Studio is the main workspace where you manage the visual elements of your application. It allows you to:

Design Screens (pages in your app).
Add Elements such as forms, buttons, input fields, and other components.
Define UI behaviours (what happens when a user clicks a button).
Organize and view the structure of your app using the Widget Tree.

Elements in the Interface Tab

Elements in OutSystems are the building blocks of your front-end interface. These elements include both UI Widgets and logic components that you can place and configure on your screens.

Common UI Elements/Widgets:

Buttons: Used to trigger actions, such as submitting a form or navigating to another screen.
Containers: Used to group other elements together, providing structure.
Text Input Fields: Used for collecting data from the user.
Images: Used to display images or icons.
Dropdowns: For providing a list of options for users to select from.

OutSystems also provides pre-built UI patterns such as cards, lists, and tables, which are responsive and can be customized. When you drag and drop an element into a screen, it gets added to the Widget Tree, which defines the structure of the screen.

The Widget Tree in OutSystems is a hierarchical representation of all the elements that are placed on a particular screen. It acts as a visual and organizational guide that helps you understand how various elements (widgets) are nested and related to one another. Key Aspects of the Widget Tree:

Hierarchy: The tree shows how elements are nested. For instance, you may have a button inside a form, and the form may be inside a container. This parent-child structure is crucial for understanding the relationships between elements on the screen.
UI Structure: You can quickly see how your screen is organized. If you have multiple rows, columns, or sections on your screen, you can view and manipulate these directly from the Widget Tree.
Drag-and-Drop: You can rearrange elements directly in the Widget Tree by dragging them to different positions. This can be useful when you want to change the structure or grouping of your UI components without needing to go back and forth between the visual preview and tree.
Logical Relationships: The Widget Tree not only shows you the UI components but also any logical or behavioural elements attached to them, such as event handlers (e.g., actions that happen when a button is clicked).

When designing a screen, you will continuously work between adding elements to the screen (via drag-and-drop from the toolbar) and managing the structure in the Widget Tree.

Adding New Elements: You drag elements (buttons, text fields, containers) onto the screen from the toolbox. As you do this, they will automatically appear in the Widget Tree.
Managing Hierarchies: You can rearrange elements within the Widget Tree to adjust the layout or structure of the screen. For instance, you might want to place a button inside a specific container or move a section to the top of the page.
Configuring Properties: You click on elements in either the screen preview or the Widget Tree to open their Properties. Here, you can set the behaviour, styles, and bindings.

Here is an example:

While Figma is a design tool focused on creating UI/UX mockups, and OutSystems is a low-code platform for building fully functional applications, both tools share similarities in how they handle UI element organization and structure.

Hierarchical Representation of UI Elements: Both Figma's Left Panel and OutSystems' Widget Tree visually represent the structure of your UI in a hierarchical, tree-like format.

Layer/Widget Selection and Navigation: Both Figma and OutSystems' Widget Tree allow you to select elements directly from the panel, which in turn selects them in the design workspace.

Nesting of Elements: In both Figma and OutSystems, nesting is an essential concept for organizing elements, and both panels show how elements are grouped or contained within others.

Drag-and-Drop Functionality: Both Figma and OutSystems allow you to drag and drop elements within the hierarchical panel to reorder or restructure them.

Figma Css Generation for Elements in Outsystems

In OutSystems, you can leverage Figma CSS generation to streamline the front-end development process by transferring design properties directly from Figma to your OutSystems application.

Figma allows designers to inspect the CSS properties of design elements such as colors, fonts, sizes, and spacing.

By using the Figma CSS for elements like buttons, text fields, and containers, you can quickly implement styles such as font-size, padding, border-radius, and color in the OutSystems CSS editor or in the Style properties of widgets.

The Css editor is used for static changes unless you choose to save as a reusable class, It simpler to use & have a Live preview inside the canva for design-time

Or

Style classes is considerate for dynamic changes & it’s more flexible but have a limited preview & the style is applied at run-time.

Outsystems CSS Best Practices

Style Sheet Precedence: Screens use a well know precedence for external Style Sheets→ Blocks(Lowest Precedence) → Base Theme → Theme(s) + Theme editor → Screen (Highest precedence)

Avoid Using Inline Styles

Reuse Css Classes & don’t duplicate Work

Try to not use !important

In Outsystems you should nearly always use classes and avoid the use of ID’s

Figma with OutSystems for low-code development, including screens and blocks decomposition

Create your app’s designs in Figma, including all the screens and UI components. Use Figma’s shared library and component system to make your designs more modular and reusable

In OutSystems, each screen can be decomposed into smaller building blocks called ”blocks”. Decomposing your screens into blocks helps make your app more modular, reusable, and easier to maintain. Start by identifying the common UI components across your screens, such as buttons, forms, and lists. Convert each of these components into a block.

Once you have created your blocks, define their properties and events. Properties are the inputs that the block accepts, and events are the outputs that the block produces. This allows you to make your blocks more flexible and reusable.

With your blocks defined, you can now use them to build your screens in OutSystems. Drag and drop blocks onto your screen, configure their properties and events, and use them to create your app’s UI.

This can help you avoid duplicating code and make it easier to update your application in the future.

OutSystems blocks and screens Best Practises

Block or Screen Name: This should be a clear and descriptive name that identifies the purpose of the block or screen.

• Inputs: List any input parameters that the block or screen requires to function properly. Include a description of each input, including its data type, default value (if applicable), and any other relevant information.

• Outputs: List any output parameters that the block or screen generates. Include a description of each output, including its data type, default value (if applicable), and any other relevant information.

• Dependencies: List any dependencies that the block or screen has, including other blocks or screens, external libraries, or APIs.

• Usage: Describe how the block or screen should be used, including any recommended best practices or usage guidelines.

• Examples: Provide examples of how the block or screen can be used in different scenarios, including sample input and output values.

• Notes: Include any additional notes or information that may be helpful for other developers who are using or modifying the block or screen.

Features of OutSystems & Figma for low-code development

• Design to low-code translation: Figma’s design files can be imported directly into OutSystems, allowing for easy translation of design assets and layouts into functional code.

• Rapid prototyping: OutSystems’ rapid prototyping capabilities enable users to quickly create and test prototypes, making it easier to gather feedback and iterate on designs.

• Component libraries: Figma and OutSystems allow users to create and manage custom component libraries, making it easy to reuse and share components across multiple projects and teams.

• Drag-and-drop interface: OutSystems’ visual development environment allows users to drag and drop pre-built components, workflows, and connectors to create custom applications without writing code from scratch.

• Integration capabilities: OutSystems allows users to easily integrate with third-party APIs and services, enabling them to connect to various data sources and systems.

• Responsive design: With Figma’s responsive design features and OutSystems’ multi-platform support, teams can create applications that work seamlessly across various devices and platforms, including web, mobile, and desktop.

Project Show Case

The problem lies within the divergence between the design and development environments, leading to ability discrepancies, misinterpretations, and time-eating rework for the duration of implementation.

The mission is to accurately switch design factors, which include UI components, patterns, and interactions, into the low-code development platform, making sure that the very last application aligns with the original layout imaginative and prescient. This tricky place calls for streamlined techniques, stepped forward design-to-development workflows, and more suitable collaboration among designers and developers to maximise the advantages of low-code improvement even as preserving the fidelity of the preliminary layout concepts.

Overcoming this project will pave the manner for greater green and seamless application development, ultimately delivering tangible effects and a better person revel in.

Conclusion

In conclusion, the integration of Figma for design and OutSystems for development provides an efficient and streamlined workflow for transforming design mockups into fully functional applications. Figma allows for detailed, pixel-perfect designs, while OutSystems’ low-code platform simplifies the development process by making it easy to translate those designs into responsive and interactive applications.

In our case, it took 3 days to convert the provided Figma design into an OutSystems application, incorporating basic functionality and using example data. This timeline highlights the efficiency of using Figma for design and OutSystems for development, particularly in reducing the complexity of manual coding.

By continuously measuring the effort, identifying technical challenges, and refining the collaboration between design and development, teams can improve efficiency and deliver high-quality applications more quickly.

Designing for Low-Code: Using Figma And OutSystems