🎯Quick start for designers

Welcome to Jux. We're happy you're joining us.

Jux

Let's take a quick look at our product's main flows and areas. In this tour, we'll provide an overview of the key sections and functionalities that will support your design process. There are two main screens in the Jux web-app, the token management and the editor screen. Tokens management is where you can create, edit and alias token sets; dive here to read more.

Top navigation

Elements

The building blocks of every design system. We recommend starting by designing them according to your brand and products requirements. Once placing an Element on the canvas it will automatically become a "Local component".

Components

Local and Library components are under this dedicated section. Both type of components are created as source components that can be reused, using their instances. Instances update automatically from the source component and can’t be designed directly.

Assets

Here you can upload SVGs such as icons and illustrations to be used in your designs. After uploading drag and drop them where needed on the canvas and into source components. Each asset placed on canvas is a stand alone element that can be reused as a part of a parent component.

Texts and Div

Click Text or Div to place it on the canvas. In order to create complex components that nest other texts, divs and instances, insert them into a Div, select it and click “Create Component”. The Div will become a local component.

Objects Navigator

To navigate between objects on the canvas, use the "Object Navigator" located on the left panel. This feature allows you to explore nested layers and drag objects to reorder them. The structure defined here will be delivered to the development team.

Dynamic Design Panel

Or as we like to call it, The DDP, is where all the design decisions are made. The DDP is active only if an object is selected on the canvas. It’s divided into closable modules and connected to your token library. Elements and Components states and properties appear at the top, and all other values will unfold while scrolling. Size, layout, color, typography and more.

Canvas

We don't want to state the obvious, but our canvas is unique - it's code-based. With the Edit / Live toggle, the canvas can be switched between editing and live view mode, allowing to easily visualize and interact with components in real-time.

Invite

Last but not least, click on the top right button to “Invite” your colleagues and join us on our journey as JUX evolves.

We're looking forward to hearing your feedback!