Bolt.new Figma Import and Design Systems: How It Works (2026)

Bolt.new (Bolt) can turn a design into a working app on every plan, the Free plan included. It imports a single Figma frame through Anima, accepts one-click exports from Google Stitch, and lets anyone build on three pre-loaded design systems: Chakra, Material UI and Shadcn. The gate sits one step further. Adding your own design system needs a paid Teams plan, and a team can add or sync ten of them a week in total. So the verdict splits cleanly. A solo founder holding a Figma mockup can start without paying. A product team that wants every screen assembled from its real component library is buying Teams.

Importing a Figma frame into Bolt

Bolt hands the conversion to Anima, and it works on one frame at a time, never a whole Figma file^[1]. You can start from the Bolt homepage or, since January 2026, open the plus menu in the chatbox of a project you already have and choose Import Figma frame. Paste the frame's URL and stay logged in to Figma, or the import cannot read it. Each frame becomes code that runs in the preview, which you then wire up with prompts for data, navigation and sign-in. A multi-screen design therefore arrives in pieces, frame by frame.

Two habits decide how much the import costs you later. Design the frame responsively in Figma before importing, because Bolt's help center says that saves tokens compared with asking the agent to make the layout responsive afterwards. The second habit matters only for teams with a design system attached. The import offers a Code option and a Screenshot option. Only Screenshot respects your system, since the Code path is not aware of your components. Choose Screenshot and Bolt rebuilds the frame from your real components, using whichever revision of the system is marked active.

Handing a Google Stitch design to Bolt

Google added an Export to Bolt route to Stitch in May 2026. Inside Stitch you choose Export, then Bolt, then Build with Bolt; Bolt opens with screenshots and HTML of the pages attached and a prompt already filled in^[2]. The handoff runs one way. Edits you make afterwards stay in Bolt, and the receiving side needs a Bolt account. Pages left out of the first export can be copied from Stitch as code to the clipboard and pasted into the chat of the existing Bolt project, which builds them into the app.

Stitch screens arrive with hard-coded data. They show fixed content until you prompt Bolt to create a database for the dynamic parts, and Bolt Database is available on every plan. Stitch can also produce a DESIGN.md file, an open-source format Google introduced alongside Stitch that records colors, typography, spacing and component patterns. Download it, add it to the Bolt project, then write a rule in Project Knowledge telling Bolt to consult that file whenever it builds something new. Later pages keep the same visual rules, which suits a solo builder with no team workspace behind them.

Design systems: the built-in three and your own

What every plan can use

Anyone can build on the pre-loaded systems, Chakra, Material UI and Shadcn, the open-source libraries Bolt ships with. Pick one from the Design System button in the chat toolbar when a project starts; a team without its own system sees these three there instead. You cannot edit them. That is the honest limit of the no-cost route: the app follows a well-known library's look rather than your brand's components. Uploading brand guidelines or project files helps a prototype stay close to the brand, but Bolt does not count those uploads as a design system.

What a paid Teams plan adds

Your own system is a paid Teams feature, and any member of a paid team can add one^[3]. Teams starts at 10M tokens a month per member, $30 per member per month billed monthly or $27 per member per month billed yearly ($324 a year per member)^[4]. By our arithmetic, three members on that entry level pay $90 per month billed monthly or $81 per month billed yearly ($972 a year). Each paid member gets a separate token allotment, and tokens are never pooled, as our pricing guide explains.

Bolt builds the system from sources you point it at: up to 10 PDFs or images or a zip, a public website, a public GitHub repo, a published Storybook, or NPM packages from public or private registries. Sources carrying real component code, a GitHub repo or an NPM package, give the best results. A documentation website alone produces something closer to a theme than a true system. Processing typically takes 45 to 60 minutes. Bolt emails when it is ready and generates a Storybook you browse in the team workspace settings, though that Storybook cannot be edited directly.

Private packages need setup. A team admin can connect any private NPM registry reachable from the internet without proxies or VPNs; one behind a firewall cannot be connected, so the team books a setup call with a Bolt expert or uploads the resources as files. Admins can also write Packages knowledge, which teaches Bolt how the team uses specific NPM packages across every team project. The weekly cap is the constraint to plan around: ten adds or syncs per team per week, combined, and every resync counts against it.

Buyers comparing gates should look closely here. Lovable places design systems on its Pro plan and reserves npm-package design systems for Enterprise, as our Lovable pricing guide details. Bolt keeps your own design systems on Teams, while the pre-loaded ones work on every plan. Bolt's own comparison page claims it fits better when an app must match a design system and be owned by a team, which is Bolt's positioning rather than a neutral finding. The practical reading is simpler: on Bolt, a branded component library is a team purchase, never an individual one.

After the first build: syncs, revisions and switching

Syncing happens from the team workspace settings under Design systems, and Bolt emails when it finishes. A sync processes only what changed, which is why Bolt advises resyncing over adding a fresh copy of the same system. New projects pick up the latest version automatically. Existing projects receive the updated components, yet Bolt rewrites no code there until you prompt it. Each sync also lands in a version history, so an earlier revision stays within reach. The catch: switching revisions applies to every project using that system, never to one project alone.

Since April 2026 you can attach, detach or switch a design system on a project that already exists. Nothing in the code moves until you ask Bolt to update the components, so the switch itself is quick and the real token spend arrives with the rebuild prompt. Duplicating a project keeps its design system connection. That rules out a duplicate as a sandbox for testing a different system on the same app. Deletion is final. Existing projects keep working after a system is deleted, but they lose access to it from then on.

Habits that keep screens on brand and tokens in check

Bolt recommends the Max agent whenever a design system is involved, because it follows complex instructions more consistently than Standard. Max belongs to paid plans and spends more tokens per prompt, so keep Standard for small, well-defined edits. Avoid mixing components from several frameworks, such as React and Angular, or from unrelated systems; that confuses the agent, and the agent instructions can name the framework to use. Bolt builds JavaScript-based applications only, so code in other languages serves as reference material rather than as source.

Small styling fixes rarely need a prompt. The Select button turns on visual edits in the preview on every plan, covering text, colors, font size, opacity, links and alt text. Making the edits costs nothing; tokens are spent only when you save the batch, one batch per page, and that uses fewer tokens than describing each change in chat. Layout stays out of reach. You cannot drag elements or rearrange sections there, so structural changes go back through a prompt. A saved batch is undone only through version history, which never rolls back the database.

Plan before rebuilding a whole set of screens. Plan Mode lets the agent read the codebase and propose the work without changing code, and it spends fewer tokens than Build Mode, though not zero. Token use also climbs with project size, because Bolt reads the project files on every message, so a design-heavy app costs more per prompt as screens pile up. Our guide to building with Bolt's agents covers Plan Mode, context management and the /clear command in more depth for anyone moving past the first import.

The bottom line

Bolt gives designers two clean entry points, a single Figma frame through Anima and a one-way Stitch export, and both work on the Free plan. The three pre-loaded systems cover a prototype that only needs to look consistent. The decision point is your own component library: that lives on paid Teams, with per-member tokens, a weekly cap of ten adds or syncs and revision switches that hit every project at once. Import with Screenshot when a system is active, design responsively first, and let Max handle the heavy rebuilds.