Getting Started
Get started with Canvas
Getting Started with Canvas
Download Canvas
Canvas is available as a Figma plugin, a standalone web app, and an npm package. Start with the tool that fits your workflow.
Set up your tokens
The foundation of Canvas is your brand tokens. Create a tokens.json file with your design system:
{
"colors": {
"primary": "#0066CC",
"secondary": "#FF6B6B",
"neutral": "#333333"
},
"typography": {
"heading": "Inter, 32px, bold",
"body": "Inter, 16px, regular"
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "32px"
}
}
Generate components
Upload your tokens file to Canvas. It automatically generates components for:
- Buttons (primary, secondary, sizes)
- Form inputs
- Cards and layouts
- Navigation elements
All components are automatically audited for WCAG 2.1 AA accessibility compliance.
Export for your framework
Select your target framework and download the component library:
- React — TypeScript components with hooks
- Vue — Single-file components
- Web Components — Framework-agnostic custom elements
Each export includes CSS variables wired to your tokens.
Sync with Figma (optional)
If you design in Figma, enable two-way sync to keep tokens, components, and design in lock-step:
- Install the Canvas Figma plugin
- Authenticate with your Canvas account
- Any token change propagates to Figma; design updates come back to code