# design.md help centre --- > Guides, steps, tips and common questions for design.md, in full. Landing page: https://raiken.io/kb/design-md --- # Draft and change a DESIGN.md with AI > 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. ## Goal Use AI to get a first draft quickly and to adjust tokens by asking, while you keep the final say in the Raw text. ## Before you start - An API key from Groq, OpenAI or Google Gemini. The AI runs on your own key. ## Steps 1. **Add your API key** Click Settings in the sidebar, open the API Key tab, choose the AI Provider (Groq AI, OpenAI or Google Gemini), paste the key, click Test & Detect Capabilities, then Save API Settings. 2. **Draft from a website** Click + New, type an address under From a URL, such as https://brand.com, and click Create. The AI is asked to write a DESIGN.md based on that site; when it answers, the draft lands in the Raw tab. 3. **Open the AI tab** With a document open, switch from Raw to AI. Type a request in the chat, for example "Set colors.primary to #1E40AF". 4. **Check the change** The AI changes tokens in the YAML block at the top of the document. The status line says how many tokens it updated. Switch back to Raw to read the result. 5. **Save** Changes from the chat are not saved on their own. Click Save to keep them. ## Tips - The chat knows that a DESIGN.md is open, but it does not read the document's text. Tell it the token paths and values you want rather than asking it to review the file. - Add background about your project under Settings > Context; the chat uses it with every request. ## Result A DESIGN.md drafted or adjusted with AI, saved in your library. ## If something goes wrong - **"Looks like AI is not set up yet."** -> No provider is set. Add an API key under Settings > API Key. - **The chat answered, but nothing changed in the document.** -> Name the token by its path at the top of the document, such as colors.primary. The chat can change top-level tokens and one level below them, not deeper ones like typography.body-md.fontSize; edit those in Raw. - **The website draft never appeared in the Raw tab.** -> The plugin does not open the site itself; the result depends on your AI model. If the answer has no DESIGN.md in it, ask again in the chat or try another provider. ## Common questions ### Which AI providers does design.md creator support? Groq, OpenAI and Google Gemini, with your own API key. ### Can the AI review my whole DESIGN.md? No. The chat does not receive the document's text, so it cannot review or rewrite the prose. It can set token values by path. ### Does the AI cost anything? Requests run on your own provider key, so your provider bills them under your account. ## Related guides - [Create a DESIGN.md file from your Figma design](https://raiken.io/kb/design-md/design-md-create): 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. - [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-ai-refine (design.md help centre). Reviewed: 2026-10-30. --- # Assign a DESIGN.md to frames and recolor them > 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. ## Goal Connect frames or components to the DESIGN.md that describes them, and preview them in its colors. ## Before you start - A saved DESIGN.md in your library with colors in it. - The frames or components you want to link, selected on the canvas. ## Steps 1. **Save first** Open the document and click Save. A document that was never saved cannot be found again from the layers. 2. **Stay on the Raw tab** Assign uses the text in the Raw tab, so switch from AI back to Raw before you assign. 3. **Select and assign** Select the frames on the canvas and click Assign. The status says, for example, "Assigned to 3 node(s) and applied theme to 3." If the document has no colors it can read, the layers are only linked. 4. **Reopen it from a layer** Select an assigned layer and click Edit DESIGN.md in Figma's right panel. The plugin opens that document from your library. 5. **Undo it** Select the assigned layers and click the Reset assignment arrow next to Assign. Their original colors come back and the link is removed. ## Tips - The document-level Open DESIGN.md button in Figma's right panel opens the library. ## Result Frames linked to their DESIGN.md, shown in its colors, with a one-click way back. ## If something goes wrong - **"Select at least one node to assign a variant."** -> Nothing was selected. Select the frames first, then click Assign. - **Edit DESIGN.md opens only the library.** -> The document is not in your own library: it was assigned before it was saved, or a teammate assigned it from theirs. Save it and assign again. ## Common questions ### Does assigning change my frames permanently? It recolors them, which you can reverse with Reset assignment, or with Undo right away. ### Can teammates open the DESIGN.md from an assigned frame? Only if the same document is in their library too, because each person's library is stored on their own computer. Send them the DESIGN.md file to import. ## Related guides - [Create a DESIGN.md file from your Figma design](https://raiken.io/kb/design-md/design-md-create): 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. - [Import DESIGN.md files and share them with others](https://raiken.io/kb/design-md/design-md-import-share): Drop .md files onto the plugin to add them to your library, decide what happens with duplicates, and download a DESIGN.md from the Design system panel to pass it on. --- Source: https://raiken.io/kb/design-md/design-md-assign (design.md help centre). Reviewed: 2026-10-30. --- # 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. 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. 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. 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. --- # Import DESIGN.md files and share them with others > Drop .md files onto the plugin to add them to your library, decide what happens with duplicates, and download a DESIGN.md from the Design system panel to pass it on. ## Goal Bring existing DESIGN.md files into Figma, and give your documents to teammates or to a coding tool. ## Before you start - design.md creator open. ## Steps 1. **Drop the file** Drag a DESIGN.md file from your computer onto the plugin window. "Import DESIGN.md file" appears; let go to add it to your library under its file name. 2. **Handle duplicates** If a document with the same name exists, choose Keep current, Use merged or Save as copy. The window shows Current, Incoming and Merged side by side. 3. **Check the result** A message sums it up, for example "Drop result: 2 imported, 0 merged, 0 discarded." 4. **Download a document** Open the Design system panel from the sidebar, open the theme’s menu and download its DESIGN.md as a .md file. 5. **Share it** Send the .md file to your teammates to drop into their own design.md creator, or add it to your code repository. ## Tips - Dropping a file while a document is open asks whether to merge it into that document. ## Result Your DESIGN.md files in the library, and copies you can hand to people and tools. ## If something goes wrong - **"No valid DESIGN.md content found in dropped files."** -> The file is not recognised as a DESIGN.md. Use a .md file with "design" in its name, or one with a name: or colors: line or a ## Colors heading. ## Common questions ### Is my DESIGN.md library saved in the Figma file? No. It is stored on your computer for your Figma account, so teammates who open the file do not see it. Share documents as files. ### Can I export from the library screen? Downloading happens in the Design system panel. The library and the editor have no export button. ## Related guides - [Create a DESIGN.md file from your Figma design](https://raiken.io/kb/design-md/design-md-create): 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. - [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-import-share (design.md help centre). Reviewed: 2026-10-30.