Creating components
Components are reusable building blocks upon which UIs are built.
Components in Jux are divided to two types (in the UI - two tabs), Local and Library components. Both types of components are built as source components that can be reused with their instances. Instances are updated automatically.
Components are saved into the components panel in the editor top navigation.
Creating local components from elements
Jux elements are the atoms of every design system, since they are HTML based, they are holding the functionality needed to actually “work” in production. We recommend starting by styling elements according to your brand and products requirements. Once placing an element on the canvas it will automatically become a Local component.
Creating local components from scratch
You can also design components and compositions from scratch. Wrap multiple objects on the canvas with a div (shift+d), and click on “Create a component” at the top nav bar. Your custom components will be added to the local library. Once an object becomes a component, its interactive states and edit properties abilities will be added to the DDP. Component children can be designed in the context of their parent as well.
Library components
In order to add component to the library (so they will become library components) select a local component and click ‘Add to library’ at the top navigation. The component indication will turn from grey to blue, this will help you identify library components on canvas and in the “Object navigator”. Nested instances, of a local component, that are added to the library, will automatically become new library components as well.
Only library components are shared with your development team as a part of the organization design system. The design system contains also all tokens and assets.
Nesting instances of local and library components
Components (local and library) can be placed only on the canvas. Once nesting a component inside a div or another component it will be replaced with its instance and the component itself (the source) will be placed on the left side of the parent object
Instances of library component can be inserted into library and local components. Instances of local components can not be inserted into library component.
Last updated
