FigCraft by ArtCraft: UI Design and Prototyping

GitHub repository · 3,976 stars at the 2026-11-01 snapshot · All ArtCraft GitHub repositories →

Key features

Layouts and reusable design

Build frames with auto layout, wrapping and grid tracks, sizing constraints and layout grids. Components support instances, overrides, variants and properties. Local styles and typed variables provide modes, aliases and bindings across design properties.

Drawing, prototypes and handoff

Edit vector networks, editable boolean groups, variable-width strokes, gradients and text. Prototype connections support triggers, actions, transitions and conditional variables. Inspect mode documents measurements, annotations, ready-for-development status and generated code.

File formats

The README describes sRGB and Display P3 documents and exports tagged with the document’s colour profile. It does not document writing .fig files.

Install notes

Use the official download section below to choose a package for your operating system and processor. The README lists signed and notarized universal macOS installers, Windows x64, x86 and arm64 builds, Linux packages, FreeBSD and web builds. The official listing labels macOS, Windows, Linux and Web; FreeBSD packages are documented separately in the README.

The official README does not provide the detailed per-platform troubleshooting instructions found in some other Crafting Apps. Do not assume their warnings or fixes apply to FigCraft. The separate figcraft-server release packages contain the collaboration server. For source builds, the optional sibling craft-fonts checkout supplies embedded fonts; without it, FigCraft uses system fonts.

Status and limits

The official listing labels FigCraft Early alpha. The README describes an alpha, best-effort .fig import and a lack of validation against real design documents. Multiplayer is a preview, with no accounts, teams or cloud yet. Its plugin system runs FigCraft’s own sandboxed WebAssembly plugins. The maintainers’ readiness estimate is their own assessment, not this guide’s testing.

Sharing and privacy

The README says the app works offline without an account or telemetry until you share or join a file. Online sharing uploads the document to a server; TLS protects the connection, but the server stores the file unencrypted and its operator can read it. This is not end-to-end encryption. Anyone with an edit or view link has the corresponding access. Stopping sharing revokes access, while removing the stored file is a separate action.

Local-network sessions have no server and are also unencrypted. Keep a local saved copy: the public server provides no backup or uptime guarantees. Read the official sharing notes before sharing confidential work.

Build a reusable interface system

Auto layout works in both directions, with wrapping and grids. Tracks can be fixed, hug content or use fractional sizing; cells can span tracks. Padding, gaps, alignment, minimum and maximum sizes and absolute positioning affect how children fit. On-canvas handles adjust spacing, while arrow keys can move children through the flow, grid cells and nested frames.

Main components produce instances with overrides that survive edits. Component sets organize variants, and instance properties support swapping, resetting and detaching. The Assets panel provides live thumbnails and search, with dragging into frames and auto layout. Local styles work alongside typed color, number, string and boolean variables, whose modes and aliases can bind design properties together.

Edit geometry without flattening it too early

Vector networks have pen and pencil tools, branching paths, bend controls, region fills and lasso selection. Point controls include mirrored handles and individual corner radii. Boolean groups retain editable operands, with the result following changes on the canvas. Flattening is a separate operation, not a prerequisite for combining shapes.

Variable-width strokes have profiles and draggable width points, with one-side adjustment available. Rectangles support smooth corners; arcs and rings have sweep, start and ratio controls. Multiple fills and strokes, gradients, masks, shadows, blur, noise, texture and glass effects expand the documented drawing options. Documents use sRGB or Display P3 and tag exports with the document profile.

Prototype and hand a frame to a developer

Connections have triggers, actions and animated transitions. Flows and a presentation view with device frames provide a route for walking through screens; hotspot hints and a live preview aid inspection. Variables and conditional branches can change behavior rather than requiring a separate static screen for every state.

Handoff includes distance and padding measurements, categorized annotations and ready-for-development status. Compare Changes reports property-level differences since a frame was marked ready. Generated CSS, HTML, React, Vue, Leptos, SwiftUI, Compose, ArkUI and Flutter output can use component properties as parameters. Saved redline measurements follow their layers, and the Inspect panel includes a Playground preview. These are documented handoff features, not a statement that generated code has been checked for a particular production application.

The README also shows a board file with sticky notes, templates and labeled connectors. A shared timer and voting support group sessions within that whiteboard file kind.

Navigate and share deliberately

Desktop accessibility exposes names, roles, values and states through AccessKit. F6 moves between toolbar, layers, canvas and properties; Tab navigates within those areas and Escape returns to the canvas. The app honors the system’s reduced-motion setting. These navigation controls are useful independently of the mouse-driven design tools.

Comment threads can be pinned to frames and have replies, mentions, reactions and read state; named version history is also described. Sharing, however, sends a document to a server, and possession of a view or edit link grants corresponding access. Keep the privacy section’s distinction between revoking access and deleting the stored file in mind. A locally saved archive remains important because the public server promises neither backups nor uptime.

What's new in FigCraft v0.13.1 →

git clone https://github.com/storytold/figcraft
cd figcraft
cargo run --release -p figcraft            # the desktop app
cargo run --release -p figcraft-server     # the collaboration server (docs/server.md)
cargo test --workspace                     # the test suite
cargo xtask ci                             # fmt, clippy, tests, layering and asset checks

# Headless: render and export
figcraft-cli render landing.figcraft -o landing.png --scale 2
figcraft-cli export landing.figcraft -o out/ --format svg

# Run a script of commands without a window
figcraft-cli run build-card.json --out card.figcraft

# Every command, with its parameters
figcraft-cli commands --filter autoLayout

# Let an agent drive it over MCP (headless, or attached to the running app)
figcraft-cli mcp
figcraft-cli mcp --attach 47800