{"slug": "fountible-agentic-figma", "title": "Fountible: Agentic Figma", "summary": "Fountible, a 3-week-old startup by @onuro, launches an infinite canvas that renders real React and Tailwind from Figma pastes or AI prompts, eliminating design-to-code handoffs. The tool is 100% free for now, with Pro ($29/month) and Team ($99/month) tiers, and supports AI generation via Kimi K3, Claude, or ChatGPT. The entire product—website, MacOS app, and extension—was built using AI (Claude Fable 5, Opus 5, GPT 5.6) on Convex infrastructure.", "body_md": "01 · Structure\n\n### Auto layout becomes flex\n\nFrames and groups keep their hierarchy; sections become frame containers. Direction, wrap, gap, padding, alignment, sizing, constraints and relative placement map onto native structure.\n\nThis website, the web and MacOS app, and the extension is 100% designed and built with AI(Claude Fable 5, Opus 5 and GPT 5.6). App infrastructure is [Convex](https://convex.dev). There hasn't been a single pixel designed, but all built with prompts.\n\n100% free. Fountible stays free until it isn't.\n\nApple Silicon build·[Intel Mac](/download/fountible-mac-intel.dmg)·[All downloads](/download)\n\nFountible renders real React and Tailwind. Paste from Figma or generate in context with Kimi K3, Claude or ChatGPT then refine editable motion and 3D rotation before export. A 3 weekend project by [@onuro](https://x.com/onuro).\n\nFountible is only **3 weeks** old but already being used by teams at:\n\nTheygaveusdesigntools.Thentheyblockeduswithhandoffs.Theygaveusagenticdesign.Buttheyfailed.Until“Bro”.\n\nFountible\n\nAn infinite canvas that renders real React and Tailwind — no redraw, no handoff.\n\nStarter\n\n$0\n\nPro\n\n$29\n\nTeam\n\n$99\n\nEverything a design tool has\n\nFigma paste, components, variables, animation timelines, 3D transforms and multiplayer — the familiar design workflow mapped onto the web platform so it stays close to production.\n\nFountible\n\nFrames render live React styled with Tailwind — what you shape on the canvas is exactly what ships in the browser.\n\n```\nexport function Hero() {\n  return <section className=\"px-7 py-8\">\n    <h1 className=\"text-3xl\n      font-semibold\">\n      Ship as real code.\n    </h1>\n  </section>;\n}\n```\n\nSelect any node and copy it as clean React, HTML or SVG. Components, props and theme tokens come along for the ride.\n\nMia is editing the CTA\n\nLive cursors and presence on a shared canvas. Create a team, share files and fonts — everyone stays in sync.\n\nA compact snapshot of the current canvas is already in context. Attach a layer to add its exported markup and, when capture succeeds, a visual reference.\n\nUse your Kimi K3 API key on web or desktop, or connect a Claude or ChatGPT subscription locally. Every model works on the same editable React and Tailwind canvas.\n\nFigma → Fountible\n\nPaste a Figma selection directly onto the canvas. Supported frames, auto layout, text, shapes, vectors, fills and effects become native Fountible layers — without an export file, plugin or import wizard.\n\nLayers\n\n$29 / month\n\n✓ Unlimited projects\n\n✓ Team libraries\n\n✓ Motion export\n\nLayers\n\nGenerated styles\n\n01 · Structure\n\nFrames and groups keep their hierarchy; sections become frame containers. Direction, wrap, gap, padding, alignment, sizing, constraints and relative placement map onto native structure.\n\n02 · Detail\n\nMixed-style text, parametric shapes, pen vectors, fills, gradients, strokes, shadows, blur, opacity and blend modes arrive as supported editable properties.\n\n03 · Flow\n\nUse ordinary copy and paste. The scene is decoded locally, centered in your current view and selected in one undoable step so you can continue designing immediately.\n\nComplex details may be approximated. Image fills become self-contained when the source Figma file allows link access; the guide covers fallbacks and known limits.\n\nContext-aware AI\n\nEvery request begins with the current page, top-level canvas outline, selected layers and design variables. Attach a layer or image when you want an exact reference. Then generate with your Kimi K3 key, Claude or ChatGPT directly into editable React and Tailwind.\n\nAI\n\nBring a Kimi or Anthropic key anywhere, or use a Claude / ChatGPT subscription on desktop.\n\nYour key · web and desktop\n\nClaude subscription\n\nClaude Pro or Max via Claude Code.\n\nOpenAI Codex\n\nYour ChatGPT plan via Codex.\n\nAnthropic API key\n\nYour key · web and desktop\n\nAPI keys are encrypted at rest. Subscription sign-ins stay on your machine and run through the desktop app.\n\nPro\n\nCard added$29 / month\n\nThe model receives a compact canvas snapshot first, then can inspect exact layer detail or use a visual reference you attach when the task needs it.\n\nBring a Kimi K3 or Anthropic API key on the web and desktop. Prefer the subscription you already have? Claude and ChatGPT connect locally through the **desktop app**.\n\nMotion, built into the canvas\n\nAdd a polished entrance in seconds or open the timeline for full choreography. Every keyframe stays attached to the real layer — including 3D rotation, solid fill or stroke, blur, size and radius.\n\nGive every layer a point of view.\n\n01 · Presets\n\nFade, slide, scale, blur, rotate, flip, grow, wiggle, spin, pulse or float. Trigger on load, in view, hover or press, then tune delay, stagger and easing.\n\n02 · Timeline\n\nScrub the scene, drag individual keyframes, multi-select for batch easing or deletion, snap to time or another property, and retime a layer’s entire animation span without rebuilding it.\n\n03 · Real output\n\nExport the frame that owns the motion and Fountible emits its first non-empty clip as plain anime.js — including 3D rotation. Motion itself adds only the anime.js dependency.\n\nStart by hand or ask the assistant to build the timeline from a prompt. Either way, every keyframe remains visible and editable.\n\nBuilt into the canvas\n\nDesign-system tools, editable motion, spatial transforms and collaboration — shown the way they work inside Fountible.\n\nCreate a main component, reuse instances, override text and styles, then reset or jump back to the source.\n\n`bg-brand`\n\n`rounded-card`\n\n`gap-space-lg`\n\n`opacity-muted`\n\nColor, number, radius and opacity variables mint real utilities. Change one token and every usage updates.\n\nGrain gradient\n\nLive shader layer\n\nAdd mesh and grain gradients, waves, Voronoi, halftone, liquid metal, water or ASCII as parameterized layers — not flattened images.\n\nRotate on X, Y and Z, then tune perspective, depth, backface and pivot. Fountible writes the same compound CSS transform you see.\n\nAcme design team\n\nShared workspace\n\nTeam fonts\n\n● 3 people online\n\nKeep work inside shared teams, upload team-wide fonts, and design together with live cursors and presence.\n\nVertical, horizontal and grid flows map directly to flexbox, grid, gap, padding and responsive sizing.\n\nFigma alternative\n\nFountible is built for the same job as Figma and Paper — visual UI design with multiplayer — but you can paste supported Figma work into a real React and Tailwind canvas, then use components, variables, editable timelines and 3D transforms that export as production code and anime.js.\n\n| Fountible | Figma | Paper | |\n|---|---|---|---|\n| Canvas renders real UI | Live React + Tailwind on the canvas | Drawn rectangles & vectors | Design-first canvas |\n| Export | Production React / HTML / SVG | Dev Mode handoff, plugins, inspect | Handoff-oriented export |\n| Bring over Figma work | Direct paste into native editable layers | Source design | File-dependent workflow |\n| Fidelity gap | Zero — the design is the code | Rebuild in code after design | Still a design → code step |\n| Collaboration | Real-time multiplayer | Real-time multiplayer | Team collaboration |\n| AI assistant | Kimi BYOK, Claude or ChatGPT with canvas context | Plugins & third-party AI | Varies by product |\n| Motion | Presets + editable keyframe timeline → anime.js | Prototype transitions / plugins | Varies by product |\n| 3D transforms | X / Y / Z, perspective, depth + keyframed rotation | Limited / plugin-oriented | Varies by product |\n| Components | Local components with instances & overrides | Components & variants | Components & systems |\n| Best for | Teams who ship React & Tailwind | General product design | Design-system workflows |\n\nIf you searched for a **Figma alternative**,** Figma clone**, or** Paper app alternative** that exports real code — start free in the browser.\n\nFAQ\n\nCommon questions about pasting existing Figma work, AI models, editable motion, exporting React and getting started free.\n\nFountible is a Figma-style visual design tool — frames, auto layout, vectors, components, variables, 3D transforms, multiplayer — but the canvas renders real React components styled with Tailwind. It’s a Figma alternative built for teams who ship code, not a pixel-perfect clone of Figma’s file format.\n\nFor product UI that ends up as React and Tailwind, yes. You can paste supported Figma work into native editable layers, continue on a live DOM canvas with components, variables, motion and 3D transforms, then export production code. Teams using Figma for pure illustration or marketing art may keep both tools.\n\nYes. Use the normal Copy command on a Figma selection, then paste it onto the Fountible canvas. Supported frames, auto layout, text, shapes, vectors, fills and effects become native editable layers without an import file or plugin. Complex details may be approximated, and private image fills require link access.\n\nPaper is another strong Figma alternative focused on design craft. Fountible’s differentiator is that anything you design is also code — the same React and Tailwind classes you see on the canvas are what you export.\n\nYes. Select a node and copy or export clean React, HTML, or SVG. Layout maps to flexbox and gap; fills, radius, and tokens map to real CSS and Tailwind utilities — including your variables.\n\nNot if you use Claude Pro/Max through Claude Code or ChatGPT through Codex in the desktop app. In the browser or desktop app, you can instead bring an Anthropic or Kimi API key. Kimi K3 runs with its required Max reasoning mode.\n\nYes. Every request starts with the current page, canvas outline, selection and document variables. The assistant prefers your Tailwind variable utilities, and you can attach a layer with its JSX, classes and visual reference when an edit needs exact context.\n\nYes. Bring your Kimi API key on the web or desktop, select Kimi K3 in the canvas assistant and design with its required Max reasoning mode. Your key is validated and encrypted at rest.\n\nYes. Add entrance, emphasis and loop presets, or use the timeline to keyframe position, scale, rotation, opacity, size, corner radius, solid fill or stroke, and layer blur. Scrub, retime, snap, multi-select keyframes and edit curves or springs.\n\nYes. Ask the canvas assistant to add a motion preset or author a frame timeline. The generated tracks and keyframes appear in the same editor for manual refinement, including X, Y and Z rotation while perspective and depth remain intact.\n\nYes — Fountible is 100% free while you get started. No credit card required. Open the web app or download the macOS desktop build and the Fountible Capture Chrome extension.", "url": "https://wpnews.pro/news/fountible-agentic-figma", "canonical_source": "https://fountible.com/", "published_at": "2026-07-25 01:46:36+00:00", "updated_at": "2026-07-25 02:22:31.472464+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "developer-tools", "ai-products"], "entities": ["Fountible", "Convex", "Claude", "ChatGPT", "Kimi K3", "Anthropic", "OpenAI", "@onuro"], "alternates": {"html": "https://wpnews.pro/news/fountible-agentic-figma", "markdown": "https://wpnews.pro/news/fountible-agentic-figma.md", "text": "https://wpnews.pro/news/fountible-agentic-figma.txt", "jsonld": "https://wpnews.pro/news/fountible-agentic-figma.jsonld"}}