# Design System

... or create a design system in figma, convert that design system in to a claude skill.

### What I have working currently... 

Manual export of token and components from figma. Converting to JSON for claude to eat.

Here's some examples of exports coming out of figma.

{% code title="Typography JSON Example" %}

```json
{
  "typography": {
    "heading": {
      "h1": {
        "fontFamily": "Inter",
        "fontSize": "32px",
        "lineHeight": "40px",
        "fontWeight": 700,
        "letterSpacing": "-0.02em"
      },
      "h2": {
        "fontFamily": "Inter",
        "fontSize": "24px",
        "lineHeight": "32px",
        "fontWeight": 600
      }
    },
    "body": {
      "default": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "lineHeight": "20px",
        "fontWeight": 400
      }
    }
  }
}

```

{% endcode %}

{% code title="Component JSON Example" %}

```json
{
  "Button": {
    "variants": ["primary", "secondary", "ghost"],
    "sizes": ["sm", "md", "lg"],
    "states": ["default", "hover", "disabled", "loading"],
    "rules": [
      "Primary buttons must use color.bg.primary",
      "No custom padding allowed",
      "Icon buttons must be square"
    ]
  }
}
{
  "Dropdown": {
    "composedOf": [
      "TriggerButton",
      "Menu",
      "MenuItem"
    ],
    "variants": ["default"],
    "states": ["closed", "open", "disabled"],
    "rules": [
      "Only one dropdown may be open at a time",
      "Menu width matches trigger width",
      "Menu appears below trigger by default"
    ]
  }
}
```

{% endcode %}

Manually exporting everything from figma is a chore, to say the least. Once everything is organized the skill layout looks like:

<pre><code>design-system/
├─ tokens.json
├─ typography.json
├─ components.json
├─ interactions.json
├─ rules.md
<strong>├─ visuals/
</strong>│  ├─ button.primary.png
│  ├─ button.secondary.png
│  ├─ dropdown.closed.png
│  ├─ dropdown.open.png
</code></pre>

You see "visuals" up there? I'm messing around with exported pngs of each component. I've been threatened with hallucinations by my copilot. But for the limited tests I've been doing, things have been tedious *but GOOD.*

### Moving forward.

So, right now I have this design system process working ... in a sense. Still theory crafting.

#### The plug-in

The next logical step is a claude plug-in that keeps an eye on a figma and **automatically exports** updated JSONS when it sees figma has updated.

When all is said and done it will look like this:

* **Plugin** - fetches latest tokens/components from figma
* **Skill** - design system library, enforces rules, and rejects violations