Skip to main content

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 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.
1

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.
2

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.
3

Resize an artboard

Select the artboard by clicking its border and adjust the width and height fields in the properties panel on the right.
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.

​
Vector tools

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.

Shapes

Rectangle, ellipse, line, and polygon primitives. Hold Shift while dragging to constrain to equal proportions.

Text

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.

Selection and transform

Click to select, drag to move, and use corner handles to resize or rotate. Hold Shift to add to a selection.

​
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.
Select two or more elements, then choose an alignment option — left edges, horizontal centers, right edges, top edges, vertical centers, or bottom edges.

​
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.
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.