Documentation

  • Getting Started
  • Using Visly from code
  • Version Control
  • Tokens
  • Layers
  • Primitives
  • Interaction States
  • Variants
  • Props & Slots
  • Composition & Inner Components
  • Built-ins
  • Responsive Design

Tutorials

  • Using Visly with Create React App
  • Using Visly with Next.js
  • Using Visly with Gatsby
  • Creating stateful components
  • Routing with Visly
  • Using variants for responsive design
  • Create dynamic UI with inner components
  • Reuse existing components with Slots

Documentation

Interaction States

User interaction is a key component to any design, and often something that is overlooked in classical design tools. Visly has interaction states (including focus and accessibility) as first class features. By default all components built from Primitives are interactive in Visly, and for non-primitive components, that functionality is just a click away. The states a component can be in are default, hover, pressed, focus and disabled.

To configure styles for an interaction state in Visly, all you need to do is click on the layer you want to edit in the frame that corresponds to the interaction state you want to configure.

When selecting a layer in an interaction state you haven't configured yet, you'll notice that all the style sections are collapsed. This just means that the state currently doesn't override any styles. Just click the + button to add an override, which will automatically be applied when the component enters this state.

Disabled state

All components built in Visly support the disabled state. This is the only state not handled internally by the component. To put a component in a disabled state, you need to set the disabled prop on the component. When this flag is set, the component will render with any styles you've configured for the disabled state in the editor, and will become non-interactive, meaning it will stop listening and responding to any events.

import { MyComponent } from '../visly'

<MyComponent disabled />

Inheritance and variants

Variants of a component inherit styles from the base component, and are applied in a top-down order based on canvas position when multiple variants are applied. This is true for the default state of a component as well as any interaction states.

Consider a Button that changes its background color to blue when hovered over. It also has a variant small that changes the width and height the Button. In this case, because the small variant doesn't override the background color of the component, the hover state from the base variant will be inherited and apply to the small variant as well. However this is just the default behavior, if you would prefer your small buttons to have a different hover state than the regular sized buttons, then you are free to override the inherited behavior.

Event handlers

Interactive Visly components support all the common event handlers for user interactions and accessibility events that default React elements support. In fact, they are the same exact events, so you can even refer to the React documentation on the topic of how to use these.

import { MyComponent } from '../visly'

<MyComponent onClick={handleClick} onFocus={handleFocus}/>