This topic provides information on the UX Plugin.

The UX plugin is a Figma-based tool designed to facilitate the seamless conversion of Figma designs into Oracle JET-compliant code. This plugin helps ensure consistency between design and development by eliminating discrepancies between the visual design and the final product.

By automating this translation process, the tool significantly reduces the time and effort required to develop user interfaces, accelerating the overall UI implementation.

Pre-requisites:

• Basic understanding of Figma
• Basic understanding of Oracle’s Redwood Design System
• Basic understanding of Oracle JET
• Basic understanding of the UI Toolkit
• An active Figma license
• UI Toolkit installed and running on the system (latest version)

Workflow

The process to create a screen and export the design in the UI toolkit is as follows:

Step 1: Setup Plugin

The plugin can be easily setup on your system by following the instructions outlined in the Plugin Setup section. Once done you can run the plugin and start with your design journey.

Step 2: Create designs using compliant components

Designers can either drag and drop the compliant components to create their designs on Figma or can explore the Create New feature of the plugin to get started.

Step 3: Convert to pre-defined template

In case if the designer wants to structure their designs into a pre-defined template, they can do so using the Convert to Template.

Step 4: Add Conditions/Interactions

In case the designer wants to add an On Click or On Change functionality on components they can do so by either using the Figma’s prototyping feature or using the Add Conditions feature available in the Modify Component option.

Step 5: Export to UI Toolkit

At this stage the UX Designer hands over the design to the UI Developer, who will then take over the procedure to export this design into the toolkit. The UI developer will have to ensure the toolkit is up and running in the background before starting the export procedure. Detailed explanation of the export procedure is mentioned in the Export to Toolkit section.

A detailed explanation of each feature is provided in the sections below.

Usage Guidelines

• Use components exclusively from the Oracle JET or Redwood Library
• Ensure that the UI toolkit is successfully installed with the latest version
• Ensure that the Figma components are not detached as those components may not be recognized by the plugin.
• Create business components only if they will be reused multiple times across your screens. Avoid creating excessive business components to maintain efficiency and manageability.
• Ensure that the UI toolkit is up and running in the background while exporting to avoid any issues.
• For optimal plugin functioning, keep the original layer names of components unchanged, as modifying them may result in recognition errors.