VR Design System Kit para Figma Make

Kit npm criado a partir dos arquivos base:

• styles-vr.css: variáveis CSS, classes tipográficas e tokens já exportados.
• master-design-system.json: tokens brutos vindos do Figma, incluindo modos, scopes e aliases.

Instalação local

npm install
npm run build

Desenvolvimento

Sempre que atualizar src/tokens/styles-vr.raw.css ou src/tokens/master-design-system.raw.json, rode:

npm run tokens

Uso em uma aplicação React/Figma Make

import { Button, Card, Badge, Input } from "@sua-org/vr-design-system-kit";
import "@sua-org/vr-design-system-kit/styles.css";

export default function App() {
  return (
    <Card>
      <Badge tone="success">Ativo</Badge>
      <h1 className="vr-title-sm">Design System Kit</h1>
      <Input label="Nome" placeholder="Digite seu nome" />
      <Button>Continuar</Button>
    </Card>
  );
}

Publicação no npm da Figma

1. Abra um arquivo novo no Figma Make.
2. Vá em Make settings.
3. Entre em Figma npm registry.
4. Gere a chave da organização.
5. Cole o snippet no arquivo .npmrc local.
6. Renomeie o pacote no package.json, por exemplo: @sua-org/vr-design-system-kit.
7. Rode:

npm publish

Estrutura

src/
  components/       Componentes React base
  styles/           CSS global e tokens normalizados
  tokens/           Arquivos originais + tokens normalizados
scripts/            Scripts para extrair tokens
docs/               Guidelines para Figma Make

Observação

Este kit é um ponto de partida. Depois, você pode evoluir os componentes para incluir Modal, Select, Table, Tabs, Toast, Sidebar e Stepper.