Circuitry Logo
Circuitry
Open Circuitry

Designer

A full vector design studio — professional illustration and UI design in one place.

Designer is Circuitry's standalone design surface: a complete vector editor for illustration and a screen-and-artboard tool for UI design. Draw freehand or with precise vector tools, organize work across multiple artboards with layers, then turn any drawing into production HTML — all on desktop or iPad with Apple Pencil.

Two tools in one

Vector illustration — precise vector drawing, shape tools, path and vertex editing, curve optimization, and clean SVG export.

Screen & UI design — multiple artboards, a full layer system, reusable design systems, alignment guides, device-size previews, and screen-to-screen prototyping links.

You don't pick one or the other. Illustrate an icon, drop it onto a screen, lay out a page around it, and preview the whole thing on a phone — without leaving Designer.

Four modes

Switch modes from the header tabs. Your choice is remembered per design.

ModeWhat you do
DesignDraw freehand or with vector tools on any artboard
LayoutDrop responsive grids, flex rows, sections, and containers
HTMLTurn drawings into real HTML, SVG, or code
PreviewSee the true render at 100% on mobile, tablet, or desktop

Drawing & vector tools

Everything you'd expect from a professional vector editor:

  • A full pen tray — fountain pen, pencil, ballpoint, marker, and highlighter — for freehand and precise lines, plus a smoothing control to refine strokes after you draw them
  • Shape pen — rectangle, ellipse, polygon, and more — with an auto-recognition mode that snaps rough sketches to perfect geometry
  • Write pen that turns handwriting into real text as you go, or switches to a type mode
  • Vertex editing and automatic curve optimization for clean paths
  • Text, text-on-path, icons, and stamps
  • Fill, eraser, arrow, and selection — by rectangle, lasso, or brush — with full transform and perspective warp
  • Pressure-sensitive Apple Pencil input with high-resolution capture
  • A Style panel for everything a selected object looks like — thickness, stroke and fill colour (solid or gradient), opacity, corner radius, stroke options (dashed / dotted / dash-dot patterns, flat / round / square ends, sharp / round / bevelled corners), arrowheads, shadow, glow, blur and 3D — plus saved style presets, so a look you build once can be re-applied to anything with one click. See The Style Panel

Artboards & layers

  • Multiple artboards in one document, each with its own size, background, and layers
  • Full layer panel — add, delete, reorder, set opacity, show/hide, and set a per-artboard background color
  • Ruler-based alignment guides with snapping for pixel-perfect placement
  • Screen-to-screen links to wire up clickable prototypes

Moving around the canvas

  • Hold Shift to temporarily swap your current tool for the hand — drag to pan, release Shift and you're right back on the tool you were using. If the hand is already active, Shift swaps the other way to the pointer.
  • Hold the middle mouse button (press the wheel) and drag to pan from any tool, without swapping tools at all — the same gesture works on every canvas in Circuitry.
  • The hand tool lives in both the top toolbar and the drawing tools panel — pick it in either place, they stay in sync.
  • Pinch or scroll to zoom. Zooming is kept smooth while you move; the moment you stop, everything in view sharpens to full resolution.

Design systems

Designer learns the fonts, colors, and patterns you use across all your artboards. When you ask AI to generate a layout or component, the result automatically matches your existing design language — change your palette once and regenerate everything.

From drawing to production

Any drawing converts to clean HTML, SVG, or code — non-destructively. Switch back to Edit Strokes at any time to return to the original vectors. Layout components become real responsive CSS; drawn shapes become real markup.

Exporting

File → Export Screens… writes the current artboard, all of them, or a hand-picked set — as SVG vectors, PNG / JPEG / WEBP pictures, or a real HTML page. Export several artboards at once and you get a ZIP. Files can land in your downloads, on a connected Circuitry Server, or in a folder on this computer.

SVG export is true vector: shapes stay shapes, pen and brush strokes export as their drawn outline so pressure and taper survive, gradients and shadows come across, pictures are embedded so the file stands alone, and text stays live text (run Convert to Outlines first if you need type to render identically on a machine without the font). You can also select a few objects and export just those to their own cropped SVG. Full details in the Designer tour.

On iPad

Full Apple Pencil support, gesture controls, and complete feature parity with desktop. Sketch a wireframe by hand, recognize it into shapes, lay it out, and preview it on-device — the most capable vector and UI design tool available on tablet.

Related