Skip to content

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
Jux Canvas
Jux Canvas

Top Navigation

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”.

Elements Section
Elements Section

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
Components Section
Components Section

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
Assets Section
Assets Section

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
Objects Navigator
Objects Navigator

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
Dynamic Design Panel
Dynamic Design Panel

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
Invite Team Members
Invite Team Members

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!