ds/bridge

Tutorials

Friendly, step-by-step walkthroughs — start at the top and work down.

  1. Getting started

    Install ds-bridge, answer the preferences dialog, and read your very first lint finding — start to finish, in about ten minutes, no Figma account required.

  2. Linting for off-system values

    Run ds-lint to find hardcoded colors and sizes, tell an exact match from a near-miss, and apply safe fixes — without ever losing control of your code.

    ds-lint

  3. Catching token drift

    Compare your design-token source against your built CSS, read stale, missing, and orphan drift in plain language, and watch the trend improve over time.

    token-check

  4. Scoring a frame for handoff

    Score a Figma frame's machine-readability before it reaches engineering, set up a read-only token, gate on the score in CI, and post findings back to the designer — safely.

    handoff-qa

  5. Build your component registry and parity matrix

    Build a Figma↔code component registry, read matches versus unmatched-with-candidates, and turn the four-status parity matrix into an issue you can act on — without ever guessing.

    parity-audit

  6. From a Figma frame to on-system code

    Point figma-impl at a frame and get code assembled only from your registered components and exact tokens — with everything it can't resolve reported as a gap instead of invented.

    figma-impl

  7. Keep every mode WCAG-compliant with a11y-check

    Audit your color tokens for WCAG contrast across light, dark, and every other mode — read which pairings fail, see lightness-only fixes, and gate CI on the result.

    a11y-check

  8. Know the blast radius before a library change lands

    Diff your published Figma library against the last snapshot, classify each change as breaking, additive, or cosmetic, see how many code call sites it touches, and gate CI on the breaking ones.

    impact

  9. One changelog for designers and developers

    Turn your git history, Figma versions, and token changes into a single audience-segmented changelog — one document everyone on the team can read.

    ds-changelog

  10. Component docs that write themselves

    Turn your saved registry, a code scan, and your token map into one MDX page per component plus a machine-readable llms.txt — generated, gap-honest, and reviewable in a pull request.

    ds-docs