# Sound Kit

> The sound layer Figma never shipped

Design, audit and hand off the sound of your product without leaving Figma. Browse and preview UI sounds, generate them with AI, trim and normalise them in a real editor, score Figma Motion animations, audit a whole file for consistency, and export tokens and code for developers.

**Open in Figma:** https://www.figma.com/community/plugin/1398310751744117050

## Features

### Searchable Sound Library
A curated library of UI sounds — taps, toggles, sends, successes, errors, notifications and system audio — with waveform and LUFS readings rendered on every result row.

### Find Similar & Family Fit
Start from a sound you like and get its acoustic neighbours, then score any candidate against the sounds you already ship so a new one joins the family instead of breaking it.

### AI Sound Generation
Generate sounds from a text description with OpenAI, ElevenLabs or Replicate using your own API key — including batches of variations and generations matched to a reference sound.

### Waveform Editor & Effects
Trim, fade, EQ, reverb, echo, pitch and speed, rendered offline against the real buffer so the preview is the deliverable. A/B any edit against the original.

### Loudness Targets (LUFS)
Normalise every sound to one perceptual loudness target, with presets matching what iOS, Android and web expect — the single biggest fix for a set that feels amateur.

### Spectrogram & Accessibility Check
Read a sound as a spectrogram to find the band that makes it harsh, and flag clips that startle or fatigue before they end up on a screen users see forty times a day.

### Multi-Track Mixer
Layer several sounds into one signature with per-track effects, time offsets and swap-a-layer, then bounce the result down to a single attachable clip.

### Behaviour & State Variations
Record how a sound behaves — trigger, interrupt, loop, delay — and derive hover, pressed and disabled variants from one base so a component set stays coherent.

### Sound for Figma Motion
Read a layer’s real duration, easing and trigger, stretch a sound to that length, shape it with the same curve, align its attack to the motion’s peak, and scan a page to find every animation that is still silent.

### Canvas Scan, Graph & Flows
Inventory every sound across every page, see coverage as a map so silent flows are visible, and play a whole journey in order to hear how the sequence actually feels.

### Consistency & Audit Reports
Catch duplicate roles, missing sounds and loudness drift with one-click fixes, then run the full categorised audit across coverage, loudness, accessibility and handoff readiness.

### Sound Tokens (W3C DTCG)
Name a sound once and reuse it everywhere, with versioning and per-theme variants, in the same $type / $value / $extensions shape as your colour and spacing tokens.

### Developer Export & Git Sync
Export a tokens file plus Swift, Kotlin, React and web snippets with behaviour and loudness attached, and push tokens to GitHub, GitLab or Bitbucket as a reviewable diff.

### Figma Variables Sync
Push sound tokens into Figma Variables so audio sits alongside colour, spacing and typography, resolving per mode like every other variable.

### Generated Style Guide
Produce a style guide from your real tokens — what each sound is for, when it fires, how loud it sits — so the next designer does not invent a fourth success chime.

### Bring Your Own Storage
Full-quality audio is uploaded to storage you connect and control — GitHub, an S3-compatible bucket, Cloudflare R2, Drive or your own CDN. Systergon never hosts your files.

## Use cases

- **Testable Prototypes** — Ship prototypes people can hear, so audio gets reviewed and user-tested with the design instead of being decided during implementation.
- **Sound Design Systems** — Give sound the same tokens, versioning, themes and documentation your colour and spacing already have.
- **Motion + Audio Choreography** — Score Figma Motion animations against their real timing and easing, and find the animations that are still silent.
- **Design QA & Audits** — Run a consistency and accessibility audit across a whole file before a design review, with fixes you can apply in place.
- **Engineering Handoff** — Hand over W3C design tokens, platform code snippets and a style guide — specifications rather than a folder of files.

## How to use

1. **Find or Make a Sound** — Search the library by what the sound does, or generate one with AI using your own provider key.
2. **Shape It** — Trim, EQ and normalise it to your loudness target, then run the accessibility check.
3. **Attach & Tokenise** — Select the layer, add it to canvas, and save it as a named token you can reuse everywhere.
4. **Audit & Hand Off** — Scan the file for drift and gaps, then export tokens, code snippets and a style guide for developers.

Page: https://systergon.com/products/figma-plugins/figma-sound-kit