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