feat: add Figma design integration to Storybook #1510
+4,150
−11
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
isadorable-png
requested review from
LeonardoVieira1630,
PedroBinotto,
alextnetto,
brunod-e,
edulennert and
pikonha
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
pikonha
reviewed
Dec 23, 2025
Comment on lines
+10
to
+28
| 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"); | ||
| } | ||
| } |
pikonha
reviewed
Dec 23, 2025
| parameters: { | ||
| layout: "centered", | ||
| design: getFigmaDesignConfig( | ||
| "https://www.figma.com/design/DEKMQifA8YOb3oxznHboSY/%F0%9F%93%81-Orbit-UI?node-id=10150-19926", |
Member
There was a problem hiding this comment.
you could use an env variable to avoid having to change multiple places
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 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