Current Plugin

About this plugin

Turn your Figma components into production-ready code — with quality built in.The Current Plugin create Variables audits your components against industry standards, enhances them with AI-powered metadata, and exports fully-structured React component packages — ready to drop into your codebase.**The problem:** Copying designs into code is slow, error-prone, and skips quality checks. Teams ship components with accessibility gaps, inconsistent tokens, and no documentation.**The solution:** Current Plugin scores every component across 5 quality categories before export. Only components that meet a 90/100 threshold get exported — ensuring your code starts clean.---### What you get**Quality Audit (score 0-100)**Every component is scored across 5 categories:- Accessibility (30%) — WCAG AA contrast, focus states, aria labels- Naming (20%) — detects generic layer names like "Frame1" or "Group 2"- Structure (20%) — auto-layout usage, nesting depth, hierarchy- Visual (15%) — spacing consistency, token usage, border radius- Variants (15%) — property alignment, naming conventionsEach issue comes with an inline fix you can apply in one click — rename layers, fix contrast colors, apply design tokens.**AI-Powered Metadata**Uses Claude AI to generate complete component documentation:- Description, tags, and category- Atomic Design level (atom, molecule, organism)- Property and variant descriptions- Accessibility notes and usage guidelines- Writes structured metadata back into your Figma component description**11-File Export Package**When your component scores 90+, export a production-ready ZIP:```ComponentName/ComponentName.tsx — React component with props & variantsComponentName.types.ts — TypeScript interfacesComponentName.module.css — CSS ModulesComponentName.module.scss — SCSS Modules with variables_tokens.scss — Design tokens as SCSS variablesComponentName.tokens.ts — Tokens as TypeScript constantsuseComponentName.ts — Custom React hookComponentName.test.tsx — Jest test suiteindex.ts — Barrel exportREADME.md — Full documentationmetadata.json — Structured metadata```**Developer Handoff**The Dev Info tab shows everything a developer needs:- Component dimensions, layout mode, spacing- All properties with types and descriptions- Variant combinations- Extracted design tokens with CSS variable names---### How it works1. **Select** a component in Figma2. **Run Full Review** — audits quality + analyzes metadata in parallel3. **Fix issues** — apply smart suggestions inline (naming, colors, tokens)4. **Generate metadata** — AI fills in descriptions, tags, a11y notes5. **Export** — download the 11-file package when score hits 90+6. **Drop into your codebase** — files are organized by atomic level---### Smart SuggestionsCurrent Plugin doesn't just flag problems — it fixes them:- **Naming:** "Rectangle456" → suggests "IconContainer" based on context- **Contrast:** Shows failing ratio (2.1:1) → suggests 2-3 colors in the same hue that pass WCAG AA- **Tokens:** Detects hard-coded values → links to your design system tokens- **Bulk apply:** Fix the same issue across all variants in one click---### Atomic Design ClassificationComponents are automatically classified into your design system hierarchy:- **Atoms** — buttons, inputs, labels- **Molecules** — input with label, button with icon- **Organisms** — headers, forms, cards- **Templates** — page layouts- **Pages** — full implementationsExport paths follow the structure: `src/components/atoms/Button/`---### Built for teams- Pair with your account using a 6-digit code — no passwords- Free tier for getting started- Pro tier for unlimited audits, AI metadata, and exports