# Create a DESIGN.md file from your Figma design > Click + New and start from your selection, the current page, your variables, an empty scaffold or a built-in example, then edit and save it. ## Goal Write down a design system's colors, type, spacing and rules as a DESIGN.md file, the Markdown format AI coding tools read to build in your style. ## Before you start - design.md creator installed from Figma Community. - For a scan: frames selected, or local variables and text styles in the file. ## Steps 1. **Open the library** Run design.md creator. The DESIGN.md library shows your saved documents and the built-in Examples: Polished, Blueprint, Atmospheric Glass, Paws & Paths and Totality Festival Design System. ![The DESIGN.md library: New, two saved documents, and examples such as Polished, Blueprint and Atmospheric Glass.](https://raiken.io/assets/kb/design-md/design-md-create/library-examples.png) 2. **Click + New** Choose where to start. Selection: tokens from the layers you selected. Current page: every layer on the page. Variables: your local and library variables, modes and text styles. Empty scaffold: a neutral structure with prompts to fill in. ![The New menu: Selection, Current page, Variables and Empty scaffold under Extract from Figma, and From a URL.](https://raiken.io/assets/kb/design-md/design-md-create/new-sources.png) 3. **Or start from an example** Click an example tile, or pick one under Templates in the New menu. It opens as a copy; nothing is saved until you click Save. 4. **Edit the text** The Raw tab is a plain text editor with YAML tokens at the top and written guidance below. Click Contents to jump between the headings, and type a name in the name field. ![The editor with Contents open: ten headings such as Colors and States, and the Raw text at the States section.](https://raiken.io/assets/kb/design-md/design-md-create/editor-contents.png) 5. **Save it** Click Save. The document is added to Your documents with the status "Saved." ## Tips - Turn on Generate with AI in the New menu to add an AI-written rationale to Selection and Variables documents. It needs an AI provider in Settings. - Back returns to the library without asking, so save first. Deleting a tile with its ✕ is immediate and cannot be undone. ## Result A DESIGN.md document in your library, ready to refine, assign to frames or share. ## If something goes wrong - **"Select at least one frame, component, or instance to extract."** -> Selection needs something selected on the canvas. Select a frame, or use Current page instead. - **My document lists colors and fonts I did not select.** -> Selection and Current page also list every local color and text style and the spacing and radius variables of the whole file, not only what is selected. - **A Variables document has spacing or radius values that are not in my file.** -> Where the file has no tokens for a section, design.md creator fills it with the Polished example's values. Edit or delete them in the Raw tab. ## Common questions ### What is a DESIGN.md file? A Markdown file that describes a design system: design tokens such as colors, type, spacing and radii in a YAML block at the top, followed by written guidance such as an overview, components and do's and don'ts. AI coding tools can read it to build interfaces in that style. ### Which scan should I use? Variables when your file uses variables and text styles; it gives the most complete, structured document. Selection or Current page when the design lives in layers and fills; they list what they find without prose. ### Are hidden layers scanned? No. Hidden layers are skipped, and only the first mode of each variable is read. ### Does design.md creator connect to Google Stitch? No. It writes DESIGN.md files; it has no connection to Google Stitch or other tools. ## Related guides - [Draft and change a DESIGN.md with AI](https://raiken.io/kb/design-md/design-md-ai-refine): Add an API key for Groq, OpenAI or Google Gemini, then let the AI draft a DESIGN.md from a website or change named tokens such as colors.primary in chat. - [Assign a DESIGN.md to frames and recolor them](https://raiken.io/kb/design-md/design-md-assign): Save the document, select frames, and click Assign. The layers are linked to the DESIGN.md and take on its palette; Reset assignment brings the old colors back. --- Source: https://raiken.io/kb/design-md/design-md-create (design.md help centre). Reviewed: 2026-10-30.