SDS Design System (Figma Make)

React design system package: primitives, compositions, and icons for use in Figma Make.

Install

In a Figma Make file, ask the chat: install @your-scope/sds (replace @your-scope with your Figma org scope), or add to package.json:

"@your-scope/sds": "latest"

Use

1. Import styles once in your app root (e.g. main.tsx or root layout):

   import "@your-scope/sds/styles";

   This loads design tokens and component CSS. Required for correct styling.

2. Import components where needed:

   import { Button, Card, Text, IconStar } from "@your-scope/sds";

Contents

• Primitives: Button, IconButton, Text, Input, Checkbox, Avatar, Dialog, Menu, Navigation, Pagination, etc.
• Compositions: Cards, Headers, Footers, Forms, Heroes, Panels
• Icons: IconStar, IconMenu, IconChevronDown, and many more
• Layout: Flex, Section, Grid
• Utils: AnchorOrButton, etc.

Publish (maintainers)

1. In Figma: Make settings → Figma npm registry → Get started. Enter org scope, then Generate key (admin) and copy the snippet.
2. In this repo root, add the snippet to .npmrc (or use .npmrc.example as a template and paste the real snippet where indicated).
3. From repo root: npm run build:lib
4. From this directory: npm publish

Replace @your-scope in package.json with your actual scope before publishing.