Jessica Aviles Design System Kit para Figma Make

Pacote npm em React + TypeScript com tokens, CSS variables e componentes base para usar no Figma Make.

Instalação

npm install @jessica-aviles/design-system-kit

Enquanto o pacote ainda não estiver publicado no npm, use localmente:

npm install ./jessica-design-system-kit

ou publique com:

npm publish --access public

Uso no Figma Make

import '@jessica-aviles/design-system-kit/styles.css';
import { Button, Card, CardContent, CardHeader, CardTitle, Input, Badge } from '@jessica-aviles/design-system-kit';

export default function App() {
  return (
    <main className="min-h-screen bg-[var(--ja-color-background)] p-8 font-[var(--ja-font-family)]">
      <Card className="max-w-xl rounded-[var(--ja-radius-xl)] shadow-[var(--ja-shadow-sm)]">
        <CardHeader>
          <Badge>Design System</Badge>
          <CardTitle>Jessica Aviles DS Kit</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <Input placeholder="Digite algo" />
          <Button>Criar interface</Button>
        </CardContent>
      </Card>
    </main>
  );
}

Estrutura

src/
  components/        Componentes React base
  styles/styles.css  CSS variables e classes utilitárias
  tokens/            Tokens em TypeScript
  utils/             Helpers

Componentes incluídos

Button, Card, Badge, Input, Textarea, Label, Checkbox, Switch, Tabs, Dialog, Select, Separator, Skeleton, Progress e Tooltip.

Tokens principais

Cores de marca: #6F619A, #988CBC, #A884B0, #D0CAE5, #F0F0F0, #1E1E1E.

Tipografia: Plus Jakarta Sans.

Sistema visual: superfícies claras, roxos suaves, cantos arredondados, sombras discretas, foco acessível e base compatível com Tailwind/Figma Make.

Observação

O site publicado exige JavaScript para renderizar. O arquivo do Figma Make forneceu os arquivos-fonte do design system, que foram usados como base para este kit.