Import your Figma design system into Claude Design: the complete flow, from .fig file to prototype

Claude Design wants to do what Figma doesn't do

Anthropic Labs has released Claude Design, a research preview product that generates interactive prototypes, slide decks, one-pagers and templates - not generic, but aligned with your design system. Powered by Claude Opus 4.8 and available to Claude Pro, Max, Team and Enterprise subscribers, it fills a gap left by conventional tools: transforming an intention into an on-brand visual piece without starting from scratch. The central idea, and the one that makes all the difference: you configure your design system once, and then each project automatically reuses your colors, typography and components.

The practical question: how do you give it your Figma design system? That's the import of the .fig file, at the heart of onboarding. Here's the complete flow, as the interface presents it - and as I experienced it by plugging in my own system.

Step 1 - Set up your design system

The entry point is a "Set up your design system" screen. First you give a name and a short blurb. Then comes the part that counts, "Provide examples of your design system and products", optional but crucial to the quality of everything that follows. There are several different entry channels, depending on the objective.

Source	What it does	When to use it
Link code on GitHub	point Claude to your repository	design system already coded
Link code from your computer	Claude copies selected files (not all codebase)	large codebase: attach a frontend subfolder
Upload a .fig file	import your Figma layout, parsed locally	your design system lives in Figma
Add fonts, logos and assets	fonts, logos, brand images	complete visual identity
Any other notes	palette, brand voices, constraints	everything the code doesn't say

Claude Design's "Set up your design system" screen: GitHub sources, local folder, .fig file import and assets](/blog/claude-design/01-setup.svg)

For a large codebase, the interface itself recommends attaching a frontend-oriented subfolder rather than the entire repository. And the "Any other notes" field is not incidental: this is where you specify what no file contains - "warm, earthy palette, rounded corners, playful but professional voice". A "Continue to generation" button launches the rest of the process.

The heart of the matter: importing your .fig file

This is the option that responds directly to "import my Figma system design". You upload a .fig file, and there's a reassuring confidentiality detail: it's parsed locally in your browser, never uploaded. Claude reads the structure of your design without the file leaving your machine. If your system is fragmented, export the one containing your components and styles.

The advantage over a screenshot is enormous: instead of guessing your intentions from pixels, Claude starts from your actual structure.

Step 2 - "Your design system is ready

Once the .fig has been parsed, Claude displays a "Your design system is ready" screen and - here's where it gets real - he's broken down my file into named groups, exactly those in my model. In my PP. Design System, this results in a "UI Kit - Marketing Site" and a detailed "Brand" section: Brand - Logo & Glyphs, three color groups (Accent Or, Backgrounds & Borders, Text & Misc), a series of components (Blog Card, Buttons, Form Inputs, Navigation, Section Header, Service Card, Tags & Pills), logos and their SVG exports, spacing (Scale 4px, Radius, Motion & Elevation) and typography (Display en Playfair, Body & Mono, Type Scale), down to the colors_and_type.css and README. Twenty-three assets, readable and reusable. Two checkboxes govern usage: "Published" and "Default" - tick them and your team's new projects will automatically start on this system. And you can update it directly via chat, without having to go through onboarding again.

Step 3 - Generate: prototype, deck, template

With the design system in place, you create projects. The interface offers four types - Prototype, Slide deck, Template, Other - and a "Start with context" panel reminds you that designs anchored in real context come out better: you can attach the Design System, add a capture, attach a codebase or drag a Figma file, then describe what you want in the chat. Choose your design system from the menu - for me "PP. Design System - pascalpotvin.com", marked "default organization" - and generate. For a slide deck, a "Use speaker notes" option adds the presenter's notes. Each project is private by default until you share it.

Creating a slide deck in Claude Design with the PP. Design System selected](/blog/claude-design/03-generate.svg)

What each type produces is aimed at real-life use: interactive prototypes can be shared for feedback and testing without code reviews or pull requests; decks can be exported as PPTX or sent to Canva. As the design system is linked to the project, everything is already output in the right colors and typefaces - provided that the font details have been set.

Refine without starting from scratch

Generation is just the first draft; iteration makes the difference. Refine through conversation, online comments, direct editing, or via custom cursors that vary a design parameter. You enrich the context along the way: upload documents - DOCX, PPTX, XLSX - or use the web capture tool to retrieve elements directly from your existing site. This quick loop is exactly what's been missing between "I've got an idea" and "I've got an on-brand mock-up to show".

My opinion: where Claude Design wins, and where it doesn't replace Figma

Let me be clear. Claude Design is not a replacement for Figma for managing a production design system - token governance, library versioning, fine handoff dev remain Figma's responsibility. Where it does win is in the speed of on-brand shaping: explore ten directions in an hour, produce a customer deck that conforms to the charter, deliver a testable prototype without mobilizing a dev.

But the principle I repeat with every mandate applies here too, and the "design system is ready" screen makes it clear: the quality of what Claude Design generates is capped by the cleanliness of what you import. A well-structured .fig - named components, clear spacing scale, explicit scale type - comes out in clean, reusable groups. Missing fonts, and you get "almost". Importing your Figma design system into Claude Design is not a magic button: it's the culmination of an already clean system. The button simply reveals the real state of your home.