Your First Project

Use the same ten-minute exercise as the launch demos. Reviewed silent recordings, screenshots and short GIFs appear on the demos page.

1. Choose File → New Design… and select a new folder, or File → Open… to import a Figma .fig. Fanta attempts to create a project beside the import; if the location is not writable, save the imported design to a folder you can access.
2. Open fanta.md in the project root and record the intended audience, visual direction, palette, typography, layout rules, and acceptance checks. Fanta seeds this brief without replacing an existing one. The adjacent AGENTS.md explains how agents should edit the design source.
3. Draw a rectangle or frame. About a second after editing stops, Fanta saves the change into the project folder. The working source is under pages/, not inside the original .fig.
4. Open the Code workspace to inspect and edit the page's .fnx or its companion page.json. Use Find in the selected source editor and Discard draft if you want to reload that buffer's saved version. Save a valid, complete source change to reload the canvas; the authored edit remains undoable after Save. Fanta checks JSON types and project references, not just syntax. You can also edit project files in another code editor; the open canvas reloads after a valid save.
5. In a non-Store build, choose File → Review Changes or inspect the Git diff. Use File → Commit… when the screenshot and source diff agree. Fanta initializes Git when a bundled or system Git is available, unless the project is already inside a repository.

File → Save As… makes a new local project copy with the current edits and assets, then continues saving to the new folder. The original stays in place. Choose a new destination rather than an occupied or nested project folder. Save or discard unfinished FNX source edits and finish active canvas previews before using Save As.

Let a canvas edit autosave before modifying the same nodes in FNX, and let source reload before continuing on canvas. After moving or adding layers, inspect the FNX diff: Fanta preserves authored attributes and child comments on surviving nodes. If a delete or type change is refused to protect source-only data, edit FNX intentionally or undo the visible canvas change. Keep the manifest, *.ids.json sidecars, fanta.md, and assets with the project. If you add component variants, the current version 5 layout groups their masters under one set folder; use a current Fanta build before sharing a migrated project. The non-Store app bundle includes Git, so Xcode Command Line Tools are not normally needed for project initialization. Mac App Store feature builds do not initialize Git automatically; use an external Git client for version history.