Skip to content

Visual Interface Guide

github-actions[bot] edited this page Jul 20, 2026 · 4 revisions

Visual interface guide

This page maps the main parts of FigureLoom before you start clicking around. The drawings use the same structure as the editor and stay readable in light and dark appearance.

Desktop and tablet overview

Annotated FigureLoom desktop and tablet interface

1. Project and account area

The profile button opens account and project gallery controls. The project name is editable. Local save status appears beside it.

Open project tabs sit below the title area. Each tab keeps its × close control directly beside the project title rather than below the tab.

2. Undo, redo, Help, and Export

These actions stay close to the top of the editor. The ? button opens a Help menu with the complete manual, quick task guides, the visual guide, and the passive tour.

3. Main tabs

The normal workflow is organized into Settings, Projects, Home, Add, Illustrations, Arrange, Style, Charts, Check, and Share. Some advanced tools live inside Pro Tools so the main interface does not become overcrowded.

4. Pages and layers

The left side switches pages and controls object order. Use layers when an object is hidden, locked, difficult to select, or needs to move in front of or behind another object.

5. Canvas and workspace

The white page is the real export area. The surrounding workspace is only for navigation. Zoom changes the view, not the page dimensions. It should never create extra page area.

6. Inspector

The right side changes with the selected object. Position, size, color, opacity, text, chart, image, metadata, and accessibility controls appear here when relevant.

7. Canvas navigation

Pages, the Hand tool, zoom, 100 percent, Format, and Navigation stay together in one control bar. On supported desktop layouts, drag the complete bar from an empty part of the bar or its grip. The existing collapse control still collapses it.

Phone overview

Annotated FigureLoom phone interface

Compact top bar

The project name, undo, redo, and Export remain available. Less frequent actions move into More.

Scrollable tabs

The same main tabs remain available in a horizontal row. Scroll the row instead of trying to squeeze every tab into the phone width.

Full-screen Add panel

Add opens a large insertion panel for text, shapes, files, images, templates, charts, equations, code windows, and other objects.

Bottom dock

  • Tools shows the current ribbon controls.
  • Pages shows pages and layers.
  • Edit opens the selected object's inspector.
  • More contains projects, settings, account, templates, Loomy, Pro Tools, Guide, sharing, and other less frequent actions.

Moving and zooming

Drag a selected object with one finger. Pinch with two fingers to zoom. Use the Hand tool or navigator to move around a zoomed page. Zoom never changes the real page bounds.

Help on a phone

Open More → Guide. The phone sheet closes and the FigureLoom Help menu opens without leaving the current project.

Help menu

FigureLoom Help menu

Press ? on desktop or use More → Guide on a phone to open:

  • Search the full manual
  • Start here
  • Quick task guides
  • Visual interface guide
  • Passive interface tour

The passive tour now covers the main sections, project tabs, Add and Illustrations, the real page area, the movable canvas controls, pages and layers, the inspector, Pro Tools, Help, export, checks, and backups.

The manual opens in a new tab so the current canvas remains open.

Light and dark appearance

The editor and the Help center use the same saved appearance setting. Changing appearance in the manual also updates the FigureLoom appearance preference for the next editor load.

The canvas background can still be white or another project color while the surrounding interface is dark. Interface appearance and exported page color are separate settings.

Continue learning

Use Quick task guides for short instructions, or Complete tutorials for full projects from beginning to export.

Clone this wiki locally