adac-figma-make-kit

Production-ready React + TypeScript components for the ADAC web design system, packaged as a Figma Make kit. Ten accessible, composable components built directly from the Figma library ADAC_DS_Web_Elements, plus a token system exported as CSS custom properties and typed JS objects.

• ✅ React 18, TypeScript, Vite-compatible (works in Figma Make)
• ✅ Accessible semantic HTML, keyboard support, visible focus, ARIA
• ✅ Tree-shakeable ESM + CJS, .d.ts types, React as a peer dependency
• ✅ No runtime dependencies

Installation

npm install adac-figma-make-kit

React and React DOM are peer dependencies — they are provided by your app (or by Figma Make) and are not bundled.

Usage

Import the components you need and the stylesheet once at your app root:

import {
  AdacButton,
  AdacGradeBadge, // (see full list below)
  AdacRatingStars,
} from "adac-figma-make-kit";

import "adac-figma-make-kit/styles.css";

The stylesheet ships all design tokens and component styles. If you only want the tokens (e.g. to style your own elements), import adac-figma-make-kit/tokens.css instead.

import {
  AdacButton,
  AdacLink,
  AdacIconButton,
  AdacCheckbox,
  AdacRadio,
  AdacRadioGroup,
  AdacSwitch,
  AdacDivider,
  AdacRatingStars,
  AdacGradeBadge,
  AdacSpinner,
} from "adac-figma-make-kit";
import "adac-figma-make-kit/styles.css";

export default function Example() {
  return (
    <div>
      <AdacButton onClick={() => alert("Hi")}>Get quote</AdacButton>
      <AdacRatingStars value={4} />
      <AdacGradeBadge grade={1} value="1,7" />
    </div>
  );
}

A complete example rendering all ten components lives in examples/ExampleApp.tsx.

Components

| Component | Figma source | Key props | |---|---|---| | AdacButton | Button/Button | variant tone loading fullWidth startIcon endIcon | | AdacLink | Button/Text link | size secondary href startIcon endIcon | | AdacIconButton | Button/Gallery arrow · Video control | icon aria-label* size tone | | AdacCheckbox | Selection/Checkbox | label checked indeterminate error disabled | | AdacRadio / AdacRadioGroup | Selection/Radiobutton | group: name value onChange orientation; item: value label error | | AdacSwitch | Switch | label size checked disabled | | AdacDivider | Divider/Divider | orientation spacing decorative | | AdacRatingStars | Rating/Stars | value max size onChange readOnly label | | AdacGradeBadge | Rating/Grades | value grade size | | AdacSpinner | Loading | size label |

*aria-label is required on AdacIconButton (enforced by the type system).

All components forward refs to their underlying DOM element and spread native HTML attributes.

Figma → React prop mapping (variants)

Button — Button/Button

| Figma property | React prop | |---|---| | Secondary = false / true | variant="primary" / "secondary" | | Variant = Default / Alternative · OnYellow / Alternative · OnBlack | tone="default" / "onYellow" / "onBlack" | | Loading = true | loading | | State = Hover / Focus | native :hover / :focus-visible |

Link — Button/Text link: Big=false/true → size="small"/"big"; secondary=true → secondary.

Checkbox — Selection/Checkbox: State=Empty/Selected/Selected-intermediate → unchecked / checked / indeterminate; Error=true → error; Focus=true → :focus-visible.

Radio — Selection/Radiobutton: same state mapping as Checkbox.

Switch — Switch: active=true/false → checked; mobile=false/true → size="small"/"large".

Divider — Divider/Divider: Vertical → orientation; Incl. spacing → spacing.

Rating stars — Rating/Stars: rating=1..5 → value.

Grade badge — Rating/Grades: color=01..05 → grade={1..5}; Big=false/true → size="small"/"big".

Design tokens

Tokens are available two ways:

1. CSS custom properties (namespaced --adac-*), shipped in styles.css and tokens.css:

   .my-hero { background: var(--adac-color-brand); color: var(--adac-color-ink-primary); }

2. Typed JS objects for use in code:

   import { tokens, colors, radii } from "adac-figma-make-kit";
   colors.brand; // "#ffcc00"
   radii.m;      // 6

Token inventory

• Colors — brand #ffcc00 / brand-hover #ffb700; ink 90/60/42/10/4%; on-black 100/60/42/12%; semantic error #cc3333, error-hover #921100, valid #2e7d32, light-valid #8ac30c, attention #f18700; grade scale 1–5.
• Typography — ADAC Sans (proprietary, not bundled — see Assumptions): Body 1 (20/32), Body 2 (16/20) in regular & bold, Action/Navi (14/16 bold, +0.248px tracking).
• Spacing — 4px-based scale (2, 4, 8, 12, 16, 24, 32, 48).
• Sizing — control 36, selection 24, switch 34×20 / 51×31, icon button 40.
• Radii — S 4 (assumed), M 6, L 8, pill.
• Borders — 1px / 2px, focus ring 2px @ 2px offset.
• Shadows — sm / md (minimal defaults; none defined in Figma).
• Motion — fast 120ms, base 180ms, spinner 900ms (inferred).
• Breakpoints — mobile / desktop @ 768px (assumed threshold).

Accessibility

• Native elements drive behavior: <button>, <a>, <input type="checkbox|radio">, role="switch", role="radiogroup", role="separator".
• Keyboard: Space/Enter for buttons, Space toggles checkbox/switch, arrow keys move within a radio group and the interactive star rating.
• Every interactive component has a visible focus ring (:focus-visible).
• Icon-only AdacIconButton requires aria-label at the type level.
• Form controls associate their label; otherwise pass aria-label.
• AdacSpinner exposes role="status" (unless made decorative with label="").
• Honors prefers-reduced-motion.

Development

npm install
npm run build       # tsup (ESM+CJS+dts) + CSS bundle -> dist/
npm run typecheck   # tsc --noEmit
npm run lint        # eslint
npm pack            # produce the .tgz

Publishing

See PUBLISHING.md. Do not publish under the @adac scope without confirmed npm org access.

Figma Make

See FIGMA_MAKE.md for the install command, imports, an example page, and a ready-to-paste Make prompt.

Assumptions & open questions

See ASSUMPTIONS.md.

License

MIT (code). "ADAC", the ADAC logo, and the ADAC Sans typeface are trademarks/ assets of ADAC e.V. and are not covered by this license.