Inside the app
A visual tour of Fanta’s real Layers, Variables, layout, components, FNX, Motion, and Prototype screens.
These screenshots were taken in the installed Fanta Public Alpha 1.0.0 app on October 13, 2026, using our own Launch Card and Docs Showcase projects. Each close-up links to the original full app capture.
Layers
Expand a frame to see its children. Here, Launch Card contains text, shapes, the Design Tile, and a CTA Button with its own label. Explore the editor surfaces →
Variables and modes
Open the Variables workspace to work with collections, mode values, and aliases. The showcase’s sample collection, Fanta Brand, uses Light and Dark values for the navy-and-orange launch card, plus spacing and radius tokens. Semantic/Action aliases Color/Accent. Work with variables → · Official brand identity →
Auto layout
Select a container to edit its Layout controls. This button uses a horizontal layout with centered alignment and separate vertical and horizontal padding. Set up auto layout →
A component master
The CTA Button was created as a component in the app. Its inspector identifies it as Component; the sample has no exposed component properties yet. Create components and instances →
FNX source
Switch to Code, then choose FNX, to inspect the page’s design source. The launch card appears as nested frames, text, and shapes with stable layer IDs. Understand FNX → · Version control a design →
Motion
Motion shows the selected layer’s animation controls and timeline. The showcase includes a CTA fade in clip: button opacity goes from 0 to 100% over 800 ms within a 1.2-second clip. The capture is paused at 0.8 seconds. Animate a layer →
Prototype interactions
In Prototype, open an interaction to inspect its trigger and action. The showcase button uses On click → Open link with the docs URL and an Instant transition. Build a prototype →
