Change the look and feel of your apps using Figma.
Changing the look and feel of applications is can be hard because you need high skill in CSS, HTML, and JavaScript, or you can use built-in capabilities from OutSystems like Styles Editor or Theme Editor. However, it is always difficult to match the designs the designers build. So there still needed to be a solution regarding collaboration between designers and developers. So how can OutSystems help, right?
Since our product already brings a great default UI framework, OutSystems UI, we decided to create a UI Kit in the most used web-based design tools using design tokens. One of those tools is Figma, but we also have Adobe XD and Sketch.
What is the OutSystems UI Kit?
OutSystems UI Kit is a complete collection of styles, UI patterns, widgets, and layouts ready to use on your project and products. Click herefor more information.
What are Design tokens?
Design tokens are an agnostic way to store variables such as typography, color, and spacing so your design system can be shared across platforms like iOS, Android, and regular websites. To know more, click here.
What is Figma?
Figma is a web-based graphics editing and user interface design app. You can use it to do all kinds of graphic design work, from wireframing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between. Click hereto know more.
The benefits of using Figma with OutSystems
- Using a tool like Figma helps keep pace with your team’s rapid iterations, ideas, and workflows.
- It promotes seamless teamwork and practical, real-time collaboration between all team members.
- Your designers and OutSystems Developers can use it together.
- Developers can reduce the waste of time of building everything from scratch by leveraging the base customizations of the design without the need to rewrite CSS at the beginning or when there is a foundation change like colors, fonts, and others.
Designing with OutSystems UI Kit
Find the OutSystems UI Kit here in the Figma community to be installed. After installing the OutSystems UI Kit, you can start designing your next project by dragging and dropping the OutSystems UI assets to build your first screen in Figma.
Are you a designer? If yes, these are the steps we recommend.
- Make a copy of the OutSystems UI Kit from the Figma community as you would start a new design.
1 Copy of OS UI – YouTube - Change the styles on the styles page from the OutSystems UI Kit as you need for your project. The styles page contains shadows, colors, and other foundations for any project.
2 Changing Primary & Secondary colors – YouTube - Create a new page, copy them from each component page (i.e., accordion, tab, etc.), and paste them on the pages/screens as needed.
3 Adding new brand color – YouTube - Work on custom components if needed. We will create a new page using OutSystems UI components in this example.
Use components to build page – YouTube
Using OutSystems UI Plugin
As a developer, you now have the power to collect the CSS you need from a Figma design. You just need to install the OutSystems UI Plugin in Figma to collect all the design tokens and convert those tokens into a specific CSS structure.
Note: The OutSystems UI Plugin will collect only the Figma design tokens defined in the OutSystems UI Kit, which means if a designer adds a new color, the plugin won’t count that one to the CSS.To use and start the OutSystems UI Plugin, follow these steps.
- Open Figma, where your design is available.
- Right-click on the top of your design > Plugins > OutSystems UI Plugin > Start Plugin.
- It opens a popup, and you have a section with Generated CSS at the end.
- In the Generated CSS, you have two options. One is the All CSS Root Variables, which has only the variables to be applied in the theme but doesn’t bring all the CSS needed if you start your project. We recommend that if you are starting your project now, then don’t use this option because it might require extra effort to apply those variables to all the classes needed, which you could already have from the option All CSS Theme Variables. You should use the All CSS Root Variables if you are now maintaining and applying basic properties like header sizing, font, colors, or others
To use that CSS in your ODC studio, copy and paste the generated CSS from the OutSystems UI plugin in Figma to your application or library theme. If you want to learn more about how themes work in OutSystems, click here.
- Open Service or ODC studio ODC Studio.
- Open your application or library where you have your theme available.
- If this is the first time you don’t have any customizations in your theme, paste the CSS from the OutSystems UI Plugin in Figma. If you are maintaining, only replace the root variables by selecting the :root area in the CSS and then past the CSS available in All CSS Root Variables inside your theme.
To learn how to share the same look and feel between apps, click here.
