feat: add Figma design integration to Storybook #1510

isadorable-png · 2025-12-22T19:40:59Z

🎯 Overview

This PR adds secure Figma design integration to Storybook, allowing developers to view Figma designs alongside component stories without exposing the Figma API token.

✨ Features Added
1. Secure Figma API Proxy (app/api/figma/route.ts)
Server-side API route that proxies Figma requests
Token stored only in server environment variables (FIGMA_TOKEN)
Built-in security features:
Rate limiting (30 requests/min per IP)
Input validation for file IDs
Response sanitization
CORS protection

2. Storybook Figma Helper (shared/utils/figma-storybook.ts)
getFigmaDesignConfig(url) - Easy-to-use function for story files
Reads token from server-side env vars at Storybook build time
Graceful fallback when token is not configured

3. Client-side Figma Utility (shared/utils/figma.ts)
fetchFigmaFile() - Fetch Figma data through the secure proxy
extractFileIdFromUrl() - Helper to parse Figma URLs
getFigmaProxyUrl() - Generate proxy URLs

4. Updated Story Files (12 files)
Added Figma design parameters to stories for:
Avatars (EnsAvatar)
Alerts (BannerAlert, InlineAlert)
Badges (BadgeStatus)
Buttons (Button, IconButton)
Links (DefaultLink, UnderlinedLink)
Layout (Footer, BlankSlate, DividerDefault, Table)
Sections (SectionTitle, SubSection, SubSectionContainer, SubSectionTitle)

5. Storybook Configuration
Updated .storybook/main.ts to load FIGMA_TOKEN from env
Added custom manager head and theme configuration

6. Security Scripts
scripts/check-token-security.js - Verifies no tokens are hardcoded
scripts/test-production-storybook.js - Tests production Storybook security
Unit tests for security (figma-security.test.ts)
API route tests (route.test.ts)

7. Documentation
FIGMA_SETUP.md - Complete setup guide
FIGMA_PROXY_IMPLEMENTATION.md - Technical implementation details
FIGMA_PRODUCTION_SECURITY.md - Security considerations

vercel · 2025-12-22T19:41:03Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
anticapture	Ready	Preview, Comment	Jan 7, 2026 9:48pm
anticapture-storybook	Ready	Preview, Comment	Jan 7, 2026 9:48pm

pikonha · 2025-12-23T17:41:26Z

apps/dashboard/.storybook/main.ts

+const envPath = resolve(__dirname, "../.env.local");
+if (existsSync(envPath)) {
+  try {
+    const envFile = readFileSync(envPath, "utf-8");
+    envFile.split("\n").forEach((line) => {
+      const match = line.match(/^([^=:#]+)=(.*)$/);
+      if (match) {
+        const key = match[1]. trim();
+        const value = match[2].trim().replace(/^["']|["']$/g, "");
+        if (! process.env[key]) {
+          process.env[key] = value;
+        }
+      }
+    });
+  } catch (error) {
+    // Failed to parse .env.local, log quietly
+    console.info("ℹ️  Could not parse .env.local file");
+  }
+}


use dotenv instead

pikonha · 2025-12-23T17:44:17Z

apps/dashboard/shared/components/design-system/alerts/inline-alert/InlineAlert.stories.tsx

  parameters: {
    layout: "centered",
+    design: getFigmaDesignConfig(
+      "https://www.figma.com/design/DEKMQifA8YOb3oxznHboSY/%F0%9F%93%81-Orbit-UI?node-id=10150-19926",


you could use an env variable to avoid having to change multiple places

brunod-e · 2026-01-05T22:52:13Z

FIGMA_PRODUCTION_SECURITY.md

Remove this file

brunod-e · 2026-01-05T22:52:30Z

FIGMA_PROXY_IMPLEMENTATION.md

Remove this file

brunod-e · 2026-01-05T22:53:15Z

FIGMA_SETUP.md

Remove this file

brunod-e · 2026-01-05T22:54:29Z

apps/dashboard/.storybook/main.ts

  stories: [
    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../stories/**/*. stories.@(js|jsx|mjs|ts|tsx)",


remove the space between ". stories" because it will break

brunod-e · 2026-01-05T22:55:47Z

apps/dashboard/.storybook/main.ts

+    // Inject FIGMA_TOKEN into browser bundle for Storybook addon-designs
+    if (process.env. FIGMA_TOKEN) {
+      // Token exists - inject it into the bundle
+      const webpack = require("webpack");
+      config.plugins = config.plugins || [];
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          "process.env.FIGMA_TOKEN": JSON.stringify(process.env.FIGMA_TOKEN),
+        })
+      );
+      console.log("✅ FIGMA_TOKEN injetado no bundle do Storybook");
+    } else {
+      // Token not found - warn the user
+      console.warn(
+        "⚠️  FIGMA_TOKEN não encontrado.  Integração com Figma não funcionará no Storybook."
+      );
+      console.warn(
+        "   Para desenvolvimento local:  adicione FIGMA_TOKEN ao arquivo apps/dashboard/.env.local"
+      );
+      console.warn(
+        "   Para Vercel (preview/production): adicione FIGMA_TOKEN nas Environment Variables do projeto"
+      );
+    }
+


No need of these logs and warn, a single warn saying "FIGMA_TOKEN not found" is okay but please use en-US

brunod-e · 2026-01-05T23:00:51Z

apps/dashboard/app/api/figma/route.test.ts

+      const rateLimited = responses.some(
+        (r) => r.status === 429 || r.status === 200,
+      );
+      expect(rateLimited).toBe(true);


this will always be true

use this instead:

const has429 = responses.some((r) => r.status === 429);
expect(has429).toBe(true);

brunod-e · 2026-01-05T23:09:32Z

apps/dashboard/scripts/check-token-security.js

I really dont think those 3 scripts are necessary, the figma api token security follow the same pattern as other api tokens that we have, no need of 3 scripts to validate it

brunod-e · 2026-01-05T23:10:50Z

apps/dashboard/shared/components/design-system/alerts/banner-alert/BannerAlert.stories.tsx

  parameters: {
    layout: "fullwidth",
+    design: getFigmaDesignConfig(
+      "https://www.figma.com/design/DEKMQifA8YOb3oxznHboSY/%F0%9F%93%81-Orbit-UI?node-id=10150-19926",


add this url to .env

brunod-e · 2026-01-05T23:11:16Z

apps/dashboard/shared/components/design-system/avatars/ens-avatar/EnsAvatar.stories.tsx

  parameters: {
    layout: "centered",
+    design: getFigmaDesignConfig(
+      "https://www.figma.com/design/DEKMQifA8YOb3oxznHboSY/%F0%9F%93%81-Orbit-UI?node-id=10166-18044",


same here, add it to .env

brunod-e · 2026-01-05T23:14:15Z

apps/dashboard/shared/utils/figma-security.test.ts

+
+// eslint-disable-next-line no-restricted-imports
+import { getFigmaDesignConfig } from "./figma-storybook";
+// eslint-disable-next-line no-restricted-imports


remove every reference of eslint-disable in this code because it mask potential errors

feat: add Figma design integration to Storybook

08ee12a

isadorable-png self-assigned this Dec 22, 2025

isadorable-png requested review from LeonardoVieira1630, PedroBinotto, alextnetto, brunod-e, edulennert and pikonha as code owners December 22, 2025 19:41

vercel bot deployed to Preview – anticapture December 22, 2025 19:41 View deployment

fix: figma token

39c3ed5

vercel bot deployed to Preview – anticapture-storybook December 22, 2025 19:55 View deployment

vercel bot deployed to Preview – anticapture December 22, 2025 19:56 View deployment

fix: dont load env.local if does not exist

223157a

vercel bot deployed to Preview – anticapture-storybook December 22, 2025 20:09 View deployment

vercel bot deployed to Preview – anticapture December 22, 2025 20:11 View deployment

fix: api

b63abb8

vercel bot deployed to Preview – anticapture-storybook December 22, 2025 20:14 View deployment

vercel bot deployed to Preview – anticapture December 22, 2025 20:16 View deployment

fix: detect errors

86ba062

vercel bot had a problem deploying to Preview – anticapture-storybook December 22, 2025 20:24 Failure

vercel bot deployed to Preview – anticapture December 22, 2025 20:25 View deployment

fix: add-validate-file

426dc57

vercel bot deployed to Preview – anticapture-storybook December 22, 2025 20:28 View deployment

vercel bot deployed to Preview – anticapture December 22, 2025 20:29 View deployment

fix: main.ts

1d7f0c4

vercel bot deployed to Preview – anticapture-storybook December 22, 2025 20:37 View deployment

vercel bot deployed to Preview – anticapture December 22, 2025 20:38 View deployment

pikonha changed the base branch from main to dev December 23, 2025 17:37

pikonha reviewed Dec 23, 2025

View reviewed changes

brunod-e requested changes Jan 5, 2026

View reviewed changes

chore: remove outdated Figma security and setup documentation

e2f0297

vercel bot deployed to Preview – anticapture-storybook January 7, 2026 21:46 View deployment

vercel bot deployed to Preview – anticapture January 7, 2026 21:48 View deployment

feat: add Figma design integration to Storybook #1510

Are you sure you want to change the base?

feat: add Figma design integration to Storybook #1510

Conversation

isadorable-png commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Overview

Uh oh!

vercel bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brunod-e Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

isadorable-png commented Dec 22, 2025 •

edited

Loading

vercel bot commented Dec 22, 2025 •

edited

Loading

brunod-e Jan 5, 2026 •

edited

Loading