⛓️Elements

What are JUX Elements?

JUX Elements are the fundamental building blocks for designing and using any component in the design system and in production. Since the UI designed in Jux is a rendered code, presented on the canvas, the elements are holding the “benefits” of being coded. This means they expose built-in interactive states and properties, have a live view and can easily be edited and used in production.

Jux elements are based on HTML Web elements which are essential components used in web development to construct user interfaces effectively. Each element comes with predefined properties and behaviors, allowing developers to create interactive and functional user interfaces, structuring content, enabling user interactions, and styling the visual aspects of websites or web applications.

For example: Input - a component that accepts real input from keyboard and that has built-in logic is not an object we can design using a vector tool. Checkbox or Toggle are another example of common components that are used by many products that are aware of some logic - one that knows the inner state of itself - checked/unchecked or On/Off respectively.

How to use Elements in JUX

Designers can anticipate ongoing releases of new Elements and added features to existing ones. Button, Input, Checkbox, Toggle, Radio-button, Tooltip, Chip/pill, progress bar, list-item/list, and more are and will be introduced, each with predefined properties and design values that can be manipulated and tokenized on canvas.

To use Jux elements just drag one on canvas, view it in live mode to understand its behavior and create from it a component (”Create component” button on the top right). Now it’s ready to encapsulate your product design preferences. Select the properties you’d like to influence and use the DDP (dynamic design panel on the right hand side) to test values or match tokens.

What's next for JUX Elements?

To empower designers in creating intricate user interfaces, JUX plans to release additional and more complex Elements and enhance previously introduced features. Also, to enable editing in parent context which gives many more design flexibility.