Skip to main content

Getting started: Tutorials 1–3

  1. Tutorial 1: Learn the canvas
  2. Tutorial 2: Connect your codebase
  3. Tutorial 3: Design with your components

End-to-end workflow

  1. Tutorial 4: End-to-end workflow · 4:08

Tutorial 1: Learn the canvas

Get familiar with the canvas and the tools you use to lay out and style a design.
Watch tutorial 1 on YouTube · Next: Tutorial 2

Tutorial 2: Connect your codebase

Connect an agent, give it your local code, and import your design system.
Watch tutorial 2 on YouTube · Next: Tutorial 3

Tutorial 3: Design with your components

Build screens on the canvas with the components you imported.
Watch tutorial 3 on YouTube · Next: Tutorial 4

Tutorial 4: End-to-end workflow

Finish the series with this 4:08 walkthrough: design with your real components, from a snapshot to shipped code.
Watch on YouTube: Design with your real components, from snapshot to shipped code (Lunagraph Tutorial 04) · 4:08

Keep exploring

After all four tutorials, explore the Design with agents and Design with code how-to guides. For a closer look at individual tools: