Circuitry Logo
Circuitry
Open Circuitry

Design a website or app in Designer

Draw each page on its own artboard, let Designer turn the drawing into a page, link the pages together, then click through them in Preview. The exported pages work the same way in any browser: links go to the next page, Back goes to the page before, and form fields take typing.

Any deviceFree

1. Draw each page

Make one artboard per page or screen: Add new artboard in the top toolbar, with a phone, tablet or desktop size. Draw in Design mode.

Drawn this way, the page comes out right at every width:

  • A card, button or chip is a shape with its text and icons on top. It becomes one block on the page and stays together when the page narrows.
  • A paragraph is one text with a width. It wraps as one paragraph instead of breaking line by line.
  • A form field is a box with one line of text on its left. Faint text becomes the field's placeholder; an email address or "Search…" makes an email or search field.
  • Draw back to front. What you draw later sits on top in the page too.
  • Group what belongs together. A toolbar of buttons, each button with its icon, stays one piece.

To make another page like this one, use Duplicate on the artboard and change what is different.

2. Mark the sections

Switch to Layout and press Auto layout. Designer finds the header and footer (they stay at the top and bottom of the screen), a sidebar on a wide page, and the sections between them:

  • a row of chips becomes a row that scrolls sideways;
  • a grid of cards gets more columns on a wider screen;
  • a stack of matching rows becomes a list.

Sections you already drew stay as they are; Auto layout only adds the missing ones. You can also draw sections yourself from the Layout palette.

3. Convert the drawing

Switch to HTML and press Convert all. Text and shapes become page parts, icons and drawings become sharp vector pictures, and photos, 3D and effects become images. One Undo takes the whole conversion back.

To change something afterwards, select it, choose Edit Strokes, change the drawing in Design mode, and convert again.

4. Link the pages

In HTML mode, select a button, card or tab, and in the style panel open Link:

  • pick an artboard to go to that page;
  • pick Back to go to the page you came from — use it for a back arrow;
  • or type a web address.

A badge on a linked tab (a cart count) is part of that tab's link.

5. Click through it in Preview

Switch to Preview. Click the links to move between pages, type in the fields, and use the arrows at the top left to go back and forward. The artboard name at the bottom left opens a list of every artboard, to jump straight to one. Each page opens at its top.

The device buttons try the page at phone, tablet and desktop widths; drag the corner to try any width.

6. Export it

Choose File → Export Artboards…, pick All artboards and HTML. You get one page per artboard in a ZIP, each named after its artboard, linked to each other. Open the first page in a browser to use the site, or upload the files to a web hosting service to put it online.

Link targets follow artboard names: if you rename an artboard, pick it again in the links that go to it.

Ask an AI agent to do it

An agent connected to Circuitry can do every step here — draw the pages, run Auto layout and Convert all, set the links, and check the result — on the design you have open:

Make the Menu and Rewards pages for this coffee app, link the tab bar on every page, and give each detail page a back button.

Related