shilp-sutra
For Figma Make

Generate apps in Figma against the real design system.

One npm version. 26 guideline files. Same conventions as production.

Figma Make turns prompts into React. shilp-sutra-as-a-Make-kit teaches it which Button to reach for, which surface a card sits on, why soft beats outline. The Buttons your team already ships, applied to AI-generated screens.

v0.42.1 on npm
Setup

Six steps. Fifteen minutes, mostly pasting.

  1. 1
    Open the Resources panel
    From Figma's top-right menu, head to Resources → Make kits tab → Create Make kit. Name it shilp-sutra. Description below.
    text
    Devalok Design System — React + Tailwind 4 + CVA. OKLCH tokens, framer-motion, dark mode, accessibility baked in.
  2. 2
    Pick public npm
    Two registry options show up: public npm and Figma's private registry. Pick public npm. shilp-sutra lives at @devalok/shilp-sutra on npmjs.com.
    text
    @devalok/shilp-sutra
  3. 3
    Pin the version
    Type the package name above and version 0.42.1. Figma fetches the tarball — confirm version, size (about 6 MB), and dependency count look right before continuing.
    text
    0.42.1
  4. 4
    Choose manual guidelines
    Figma offers auto-gen or manual. Pick manual. Auto-gen reads the package and drafts what it thinks the rules are; the files below are written from inside the system, with conventions and anti-patterns baked in.
  5. 5
    Paste the 26 files
    Recreate the file tree from the section below. Paste Guidelines.md first — Figma always reads that as the entry point. Within each group, order does not matter.
  6. 6
    Publish the kit
    Hit Publish kit. Figma assigns a kit version separate from the npm version — kit 1.0.0, npm 0.42.1. Teammates see the kit in their Make kit picker on next session.
Guidelines

Paste these 26 files into the kit's guideline editor.

Each file ships in the npm tarball at node_modules/@devalok/shilp-sutra/make-kit/ — copy from there, or copy from below. Both reach the same content. The "Copy all" button concatenates a group with file-path separators so you can paste a whole tier in one shot.

Top level

2 files

Entry point + setup. Figma Make reads Guidelines.md first, so paste it before anything else.

Foundations

8 files

Tokens, surfaces, spacing cadence, motion, dark mode, icons. Paste all eight before moving to components.

Components

16 files

Per-component guides. Overview first, then any order. 15 components covered — extend over time as Make fumbles surface.

Update cadence

When to refresh the kit in your Figma org.

No auto-update from Figma
Publishing a new npm version does not push to Figma Make. The republish step lives inside Figma's kit UI. Track shilp-sutra releases in npm or our changelog, then trigger the kit republish on the cadence below.
The rhythm
  • Minor bumps (0.43, 0.44…) — bump the kit's npm version in Figma, re-paste any guideline file that changed.
  • Patch bumps — usually skip. Re-paste only when the patch fixes Make-visible behavior (rare).
  • Major bumps — full re-paste. Treat as a fresh kit setup, especially for breaking API changes.
FAQ

Things people ask before they hit publish.

Can I use the kit on a free Figma plan?+
Make kits need an Organization or Enterprise plan. Free and Pro can still install @devalok/shilp-sutra in any React project — the kit registration is the part that needs the higher tier.
Does Figma Make pull new versions automatically?+
No. Publishing a new npm version does not flow into Figma. Open the kit in Figma → Update kit → bump the npm version field → republish. Files using the kit get a notification next session.
Why does Figma bump the kit version on every republish?+
Kit version (Figma-internal) is separate from npm version. Figma auto-increments the kit version every republish. If your CI also publishes the npm tarball, both can move independently — pick one to drive bumps to avoid "package version already exists" errors.
Make generated a raw <button> instead of <Button>. What now?+
Open components/button.md in the kit, tighten the rule that was missed, republish. File an issue against shilp-sutra so the upstream guideline catches it for everyone else.
Auto-gen guidelines look fine. Should I use those instead?+
Acceptable starting point. Ours are stricter on conventions (soft over outline default, ds-* spacing cadence, surface tiers, no mixing border with shadow). Swap them in when you start seeing drift in Make output.
Can I share the kit with another Figma org?+
Not directly. Each consumer org registers its own kit against the same npm package and pastes the same guidelines. The npm tarball is the shared source of truth.
npm
@devalok/shilp-sutra@0.42.1 — sigstore provenance, public registry.
GitHub source
Read the guidelines in context. File issues, suggest sharper rules.
Vote for auto-update
Open Figma forum request to detect new npm versions without manual republish.