Inside Fanta · October 2026

Keep the idea moving. Keep the document yours.

Draw, build a system, animate a detail and review the change. Fanta connects the visual canvas, readable source and agents around one local project.

A shared document

Make an edit. Follow it through.

Change the button’s fill or corner radius on either side. This interactive illustration keeps the canvas and FNX together. On a phone, switch between Canvas and Code.

Fanta Launch Card main

Fanta Launch Card In sync

Canvas 93%

Design⌗ CTA Button

Corner radiusFill

Code page.fnx

▧ FNX≡ JSONCTA Button

// Same document, editable source

<Frame

name="CTA Button"

clip_size={[184, 52]}

background={{

color: fnxColor(

"#"),

kind: "solid"

}}

corner_radius={}

<Text

content="Start creating"

</Frame>

Try an edit on either side

Interactive illustration · Try the controls or play the short sequence.

Explore FNX

Drawing & layout

Stay close to the detail.

Select layers, adjust properties and refine paths on a light canvas. Frames, text, shapes, vectors and auto-layout provide the structure for the next edit.

Explore the editor

Vector editing · interface illustration

Design systems

Give the detail a system.

Build with components, variants and instances. Use variables, aliases and modes to keep repeated colors and values connected across a project.

Components Variables

Fanta Docs Showcase main

Fanta Docs ShowcaseVariables workspace

Fanta BrandSearch

NameDarkLight

◉Color/Canvas#111C33⬡#F7F6F0⬡

◉Color/Surface#1B2942⬡#FFFFFF⬡

◉Color/Accent#FF6B35⬡#FF6B35⬡

◉Color/Text#F7F6F0⬡#111C33⬡

◉Color/Text muted#B6C2D3⬡#4C596E⬡

◉Semantic/ActionColor/Accent#FF6B35Color/Accent#FF6B35

#Spacing/Small8⬡8⬡

#Spacing/Large24⬡24⬡

#Radius/Card24⬡24⬡

Create variable

Variables and modes · interface illustration

Motion

A timeline for the details.

Animate supported properties with clips and keyframes, then inspect the result at the playhead. Motion stays attached to the layers you are already editing.

Fanta’s Motion inspector and timeline showing opacity keyframes on the Launch Card button — Native app capture · October 13, 2026View full size

Motion tools and current limits

Prototypes

Make the next step tangible.

Set a flow starting point, add supported interactions and test the result in presentation mode. Keep the interaction beside the design it belongs to.

Fanta’s Prototype inspector with a flow starting point, click interaction and presentation settings — Native app capture · October 13, 2026View full size

Prototype interactions

Comments & review

Keep the conversation with the work.

Pin a comment to the canvas, reply with context, attach a file and resolve the thread. Motion comments can reference a time.

Comments are stored with the local project. Shared cloud multiplayer is not an established Public Alpha workflow.

Project-local comments

Illustrated thread · example content

Fanta Launch Card main

Fanta Launch Cardmain · pages/fanta-studio/page.fnx

Code

FNX≡ JSONpages/fanta-studio/page.fnxSaved

1/** @jsxRuntime classic */

2import { Frame, Text, Rect } from "../../fnx";

3export default function Fanta_Studio() {

4 return (

5 <Frame name="Launch Card"

6 background={fnxColor("#111C33")}

7 corner_radius={24}>

8 <Text content="Make your next idea real." />

9 <Frame name="CTA Button"

+ background={fnxColor("#FF6B35")}

+ clip_size={[184, 52]} corner_radius={12}>

12 <Text content="Start creating" />

13 </Frame>

14 </Frame>

15 );

16}

main·+2 linesEdit source · save to update the canvas

Source and Git review · interface illustration

Git & agents

Make the change reviewable.

Inspect readable FNX and review file changes in Git. Connect an external agent through local MCP, or work with the in-app Agent Panel on supported routes.

Give the agent a bounded task and inspect the result.

Review the canvas, the saved file and the source diff.

Keep Git available for repository workflows.

Connect an agent Git review

Import & media

Bring the pieces together.

Import supported .fig content as editable native structure, place supported media and export the result. Check the format notes before planning a full migration.

Supported formats and imports

Use connected generation intentionally.

Hosted generation depends on the routes enabled for your account and uses paid credits. Supported provider keys and private endpoints are configured separately for chat and agent workflows.

Plans and hosted credits

Media generation guide

Editable .fig importPNGJPEGSVGPDFSupported output formats

Choose a workflow, check its scope

Start with the app you can install.

This overview follows the October 19 documentation. The Public Alpha installer is Build45, released October 12. Later source improvements need their own installed-app checks.

Apple Silicon Mac · manual updates · current import and capability limits apply. The download page lists requirements, installation steps and known issues.

Get the Public Alpha

Current capabilities and limits Latest changes Explore the native captures

Support is part of the alpha

Answers, troubleshooting and a direct line to the team

Installation, credits, local files, privacy, model providers and editor workflows are covered in one practical support center.

Open Support & FAQ