Quickstart

Welcome to the Jux docs. If you can’t find the information you’re looking for or have questions about Jux, join us on Discord community, or email us at squad@jux.io and say hi!

Overview

JUX consists of two primary interfaces: the token management screen and the editor screen. Each plays a crucial role in streamlining your design process.

Token Management: This is where you create, edit, and alias token sets. Tokens are the building blocks of your design system, ensuring consistency across your projects. [Learn more about token management]
Editor Screen: This is your primary workspace, where designs come to life. Let’s explore its key components:

Canvas

Our canvas sets JUX apart - it’s not just a drawing board, it’s a code-based design environment. Here’s what makes it special:

Edit/Live toggle: Switch between editing and live view modes - see your designs come to life in real-time, as users will experience them
Real-time visualization: See your components come to life as you design
Interactive testing: Engage with your designs to ensure they function as intended

The top navigation bar provides quick access to essential features and sections of JUX:

Elements

Elements are the fundamental building blocks of your design system. We recommend starting here to design according to your brand and product requirements. When you place an Element on the canvas, it automatically becomes a “local component”.

Components

This section houses both Local and Library components. Components are reusable design elements that can be instantiated across your projects. Key points:

Source components serve as the original, editable versions
Instances automatically update when the source is modified
Instances cannot be directly edited, ensuring consistency

Assets

The Assets section is your repository for SVGs, icons, and illustrations. Here’s how it works:

Upload your SVG files
Drag and drop them onto the canvas or into source components
Each placed asset becomes a standalone element, ready for reuse in parent components

Objects Navigator

Located on the left panel, the Objects Navigator is your guide through the canvas hierarchy. This powerful tool allows you to:

Explore nested layers with ease
Reorder objects via drag-and-drop functionality
Define the structure that will be handed off to your development team

Dynamic Design Panel

The Dynamic Design Panel, affectionately known as the DDP, is the command center for your design decisions. Key features include:

Context-sensitive activation: The DDP becomes active when you select an object on the canvas
Modular organization: Divided into collapsible sections for intuitive navigation
Token library integration: Seamlessly connected to your design system
Comprehensive control: Manage element and component states, properties, sizes, layouts, colors, typography, and more
Scrollable interface: Access additional values and options as you scroll

Collaboration

Teamwork is at the heart of great design. That’s why we’ve made it easy to bring your colleagues into the JUX experience:

Look for the “Invite” button in the top right corner of the interface
Click to add team members to your project
Collaborate in real-time as you build and refine your designs

We’re continuously evolving Jux to meet the needs of designers like you. Your feedback is invaluable in shaping the future of our tool. We’re eager to hear your thoughts and experiences as you explore Jux!