> ## Documentation Index
> Fetch the complete documentation index at: https://docs.asquareportal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design mode: professional vector design editor

> Create precise layouts on artboards using vector tools, layers, alignment guides, and grid snapping — then send your design to Compose to generate an app.

Design mode is an artboard-based vector editor built into Portals. You work on one or more fixed-size canvases with the full set of professional tools you would expect: a pen tool, shape primitives, text, a layers panel, alignment guides, and pixel-perfect grid snapping. When your design is ready, you can send it to Compose mode to generate a working app or presentation from it in one step.

## Creating and managing artboards

Artboards are the fixed-size frames within which you design. Each project can contain multiple artboards.

<Steps>
  <Step title="Add an artboard">
    Click the **Artboard** tool in the left toolbar or press `A`, then click and drag on the canvas to define the size. You can also choose a preset size from the properties panel.
  </Step>

  <Step title="Name your artboard">
    Double-click the artboard label above the frame to rename it. Names appear in the layers panel and are used by the Design-to-Build workflow.
  </Step>

  <Step title="Resize an artboard">
    Select the artboard by clicking its border and adjust the width and height fields in the properties panel on the right.
  </Step>
</Steps>

<Tip>
  Design for multiple screen sizes by creating separate artboards at mobile (375 × 812), tablet (768 × 1024), and desktop (1440 × 900) dimensions on the same canvas. You can pan between them to compare layouts side by side.
</Tip>

## Vector tools

<CardGroup cols={2}>
  <Card title="Pen tool" icon="pen-tool">
    Draw arbitrary paths by placing anchor points. Click for straight segments, click-and-drag for curves. Close a path by clicking the first anchor point.
  </Card>

  <Card title="Shapes" icon="shapes">
    Rectangle, ellipse, line, and polygon primitives. Hold `Shift` while dragging to constrain to equal proportions.
  </Card>

  <Card title="Text" icon="type">
    Click to place a single-line text element, or click and drag to create a bounded text box. Supports Google Fonts and custom typefaces from your design system.
  </Card>

  <Card title="Selection and transform" icon="mouse-pointer">
    Click to select, drag to move, and use corner handles to resize or rotate. Hold `Shift` to add to a selection.
  </Card>
</CardGroup>

## Layers panel

The layers panel on the left side of the screen shows every element on the active artboard as a named, reorderable row. You can:

* **Reorder** elements by dragging rows up or down
* **Rename** an element by double-clicking its label
* **Toggle visibility** with the eye icon on each row
* **Lock an element** to prevent accidental edits with the lock icon
* **Group elements** by selecting multiple rows and pressing `Cmd`/`Ctrl` + `G`

## Alignment tools and snapping

### Smart guides and alignment

When you move an element, smart guides appear automatically to show alignment with other elements on the artboard. The alignment toolbar at the top of the screen lets you align or distribute a selection precisely.

<Tabs>
  <Tab title="Align">
    Select two or more elements, then choose an alignment option — left edges, horizontal centers, right edges, top edges, vertical centers, or bottom edges.
  </Tab>

  <Tab title="Distribute">
    Select three or more elements and use **Distribute horizontally** or **Distribute vertically** to space them evenly.
  </Tab>
</Tabs>

### Grid snapping

Enable the grid from **View → Show grid** or press `Cmd`/`Ctrl` + `'`. Elements snap to the grid as you drag them, making it easy to maintain consistent spacing. You can configure the grid size in the canvas settings panel.

## Design System support

You can import a design system to make fonts, color tokens, and component styles available across your artboards. Open **File → Design System** to connect an external source or define tokens manually. Once imported, the design system is also available to the AI when you use Design-to-Build, so generated output will match your brand.

## Design-to-Build

The **Generate** button in the top toolbar sends a screenshot of your active artboard to Compose mode, where the AI uses it as a blueprint to generate a working app or presentation. The AI receives both the screenshot and your design system context.

For the full workflow, see [Design-to-Build](/workflows/design-to-build).

<Warning>
  Design-to-Build sends a screenshot of the artboard, not the underlying vector data. Make sure your artboard is at its intended final state before generating.
</Warning>