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

Tokens

Design tokens are a fundamental building block of any design system. They can include many things, but in Visly they include colors, icons, fonts, text styles, shadows, and sizes. If you haven't worked with design tokens in the past, you can think of them as variables. Instead of hard-coding a hex code or a certain font size in every single component, you can reference a variable to make sure components throughout your app have a consistent look.

Design tokens in Visly can be used within the editor when you are building components or directly Using Visly from code.

Using tokens in Visly

Tokens can be found in the righthand sidebar of the home tab in Visly, or in the editor tabs when no layer is selected. From here you can add, update, and delete tokens. To use a token when styling a layer, just press the button that looks like four dots in a square and pick the token you want to use.

Once you've picked a token, this button will change to one that allows you to unlink this style from the chosen token.

Colors

Color tokens can be defined as hex, HSL, or RGB, and they are have an opacity associated with them. The name you give a color token will be the name used to reference this token from within components, as well as the name used when importing colors from code.

import { accent } from '../visly/colors'

<div style={{ background: accent }} />

Icons

Icon tokens can be uploaded as either svg or png - we suggest you pick svg where possible. You can either press the + button at the top of the icon list or just drag and drop an icon from a folder on your computer into Visly. As mentioned above, the name you give a color token will be the name used to reference this token from within components as well as the name used when importing icons from code. By default, Visly will choose the name of the file to be the name of the icon, but you can change the name later simply by clicking on it in the token panel.

import { file } from '../visly/icons'

<img src={file} />

Fonts

Font tokens can be uploaded as either ttf or otf. You can either press the + button at the top of the font list or just drag and drop a font from a folder on your computer into Visly. Unlike other tokens, fonts don't have a configurable name — we use the name of the font itself. Fonts also differ from other tokens in that they can't be imported directly into code; for this, we suggest you make use of text style tokens that depend on a font token.

Text Styles

Text styles are notoriously hard to copy over correctly from design tools because they include so many different settings. In Visly, this is all baked right into the text style tokens. Text styles can be configured with a font, size, line height, letter spacing, text decoration, and text transform. The name you give a text style will be the name used to reference this token from within components as well as the name used when importing text styles from code.

import { bodySmall } from '../visly/textstyles'

<span style={bodySmall} />

Sizes

Size tokens are used for dimension that you want to reuse in multiple places, and they're defined by a pixel value. The name you give a size token will be the name used to reference this token from within components as well as the name used when importing sizes from code. Because size tokens can be used for everything from border-radius to max-width, they also have an option to specify the type for the size token. This limits the places in which the size token can be used from within Visly.

import { formheight } from '../visly/sizes'

<div style={{ height: formheight }} />

Shadows

Shadow tokens in their simplest form are just a definition of a box shadow that is tied to a name. The name you give a shadow token will be the name used to reference this token from within components as well as the name used when importing shadows from code.

However, shadows in Visly are a lot more powerful than a simple box shadow. To create complex shadows, it is often useful to layer multiple shadows together. With shadow tokens this is easy, just press the + button when editing a shadow token to add an additional shadow. You can even choose to create a shadow definition that includes both inner and outer shadows.

import { layer1 } from '../visly/shadows'

<div style={{ boxShadow: layer1 }} />