Documentation

  • Building your first component
  • Managing design tokens
  • Version Control
  • Using Visly components in code
  • Styling layers
  • Designing Primitives
  • Interactive components
  • Props
  • Variants
  • Composition
  • Responsive design

Tutorials

  • Building stateful components
  • Migrating components from code
  • Integrate Visly with Next.js
  • Building an Avatar component
  • Using slots for dynamic content
  • Using variants to customize layout
  • Stacking layers in z-index

Documentation

Managing design 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, and text styles. 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 would rather reference a variable to make sure components throughout your app have a consistent look. This is what design tokens are for.

Visly currently supports creating design tokens for colors, icons, fonts, and text styles. However, we plan on adding support for tokens like dimensions and spacers in the near future. These tokens can be referenced as variables within Visly when building components, as well as imported in code and used outside of Visly components.

Tokens in Visly

Tokens can be found in the right hand side bar of the project tab or from within a component editor when no layer is selected. Here you can view, edit, delete, and create tokens. The names of your tokens are important, since this is how you'll reference the tokens from within Visly as well as from code. In addition to creating tokens from the token side bar, you can also add icons and fonts by dragging them into the app from a folder on your computer.

There are certain tokens that cannot be edited or deleted; we call these system tokens, and they're limited to a few icons and fonts. The reason these can't be deleted is that they're used as the default tokens when creating new components. While you can't delete them, you can choose not to use them. If you don't use them, they won't be included in the final bundle of your app.

Tokens in code

Using tokens in code works just like importing any other javascript module. If you're using TypeScript you will even get autocompletion for all of your tokens.

import { colors, icons, textstyles } from './visly'

With the exception of fonts, all other tokens can be imported directly from the generated code module. Fonts should not be referenced directly, instead they should be referenced through text style tokens. Colors are imported as an rgba() color string, icons as a relative path (to be set on the src of an image tag), and text styles as an inline style object. You can use these tokens together with components written in code, as well as components built in Visly.

import { colors, icons, textstyles } from './visly'

<div style={{background: icons.heart}}/>
<img src={icons.heart}/>
<h1 style={textstyles.heading}/>

Tokens can also be used together with css-in-js frameworks such as styled-components.

import { colors, textstyles } from './visly'
import { styled, css } from 'styled-components'

const Link = styled.a({
  ...textstyles.body,
  color: colors.mint400,
})