{"id":27859838,"url":"https://github.com/marklearst/figma-vars","last_synced_at":"2026-04-25T21:34:12.247Z","repository":{"id":222868418,"uuid":"758584522","full_name":"marklearst/figma-vars","owner":"marklearst","description":"Welcome to FigmaVars, a library designed to simplify the integration of Figma variables into your projects.","archived":false,"fork":false,"pushed_at":"2025-04-11T11:04:15.000Z","size":451,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-23T22:27:10.897Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://figmavars.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marklearst.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-16T16:26:03.000Z","updated_at":"2025-05-27T22:17:19.000Z","dependencies_parsed_at":"2024-02-16T19:25:49.268Z","dependency_job_id":"20d92ca9-439e-4913-9e66-478a12f87f1b","html_url":"https://github.com/marklearst/figma-vars","commit_stats":null,"previous_names":["ipaintcode/figma-vars-hooks","ipaintcode/figmavars","ipaintcode/figma-vars","marklearst/figma-vars"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/marklearst/figma-vars","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marklearst%2Ffigma-vars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marklearst%2Ffigma-vars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marklearst%2Ffigma-vars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marklearst%2Ffigma-vars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marklearst","download_url":"https://codeload.github.com/marklearst/figma-vars/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marklearst%2Ffigma-vars/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32278249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-04T17:10:21.170Z","updated_at":"2026-04-25T21:34:12.229Z","avatar_url":"https://github.com/marklearst.png","language":"TypeScript","readme":"# Figma Variables Package\n\nA modern, modular library for working with Figma variables.\n\n## Features\n\n- 🚀 Modern ESM modules with TypeScript support\n- 📦 Monorepo structure for clean separation of concerns\n- 🔄 Full TypeScript declarations for type safety\n- 🌳 Tree-shakable exports for smaller bundle sizes\n- 🧩 Modular packages for different environments (Core, React, React Native)\n- 🔒 Secure token handling to protect your Figma assets\n\n## Packages\n\nThis repository is a monorepo that contains the following packages:\n\n- `@figma-vars/core` - Core functionality for working with Figma variables\n- `@figma-vars/plugin` - Figma plugin integration components\n- `@figma-vars/react` - React components and hooks for Figma variables\n- `@figma-vars/react-native` - React Native components for Figma variables\n\n## Requirements\n\n- Node.js 16+\n- pnpm 7+\n\n## Installation\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm build\n```\n\n## Development\n\n```bash\n# Watch for changes and rebuild\npnpm dev\n\n# Run type checking\npnpm typecheck\n\n# Clean build artifacts\npnpm clean\n```\n\n## Security \u0026 Environment Variables\n\nFor secure usage, create a `.env` file at the root of your project:\n\n```env\n# Server-side environment variable (Node.js) - SECURE\nFIGMA_API_TOKEN=your_figma_token_here\nFIGMA_FILE_KEY=your_file_key_here\n```\n\n⚠️ **SECURITY WARNING:** Never expose Figma API tokens in client-side code. Environment variables with `VITE_` or `REACT_APP_` prefixes are bundled with your client-side code and can be extracted by anyone using your application.\n\n❌ **UNSAFE - DO NOT USE IN PRODUCTION:**\n\n```env\n# These will be exposed in client-side code!\nVITE_FIGMA_TOKEN=your_figma_token_here\nVITE_FIGMA_FILE_KEY=your_file_key_here\n```\n\n✅ **RECOMMENDED APPROACH:** Use a secure backend proxy (see below).\n\nAlways add your `.env` file to `.gitignore` to prevent committing sensitive credentials.\n\n\u003e **Note:** Create React App (with REACT_APP_ prefix) has been officially deprecated by the React team. We recommend using Vite for new projects. See the [official React blog post](https://react.dev/blog/2025/02/14/sunsetting-create-react-app) for more information.\n\n### Vite Configuration\n\nReact recommends Vite for new projects that don't use a full framework. Our packages are designed to work seamlessly with Vite, you just need to ensure environment variables are properly exposed:\n\n```ts\n// vite.config.ts\nimport { defineConfig, loadEnv, ConfigEnv } from 'vite'\nimport react from '@vitejs/plugin-react-swc'\n\nexport default defineConfig(({ mode }: ConfigEnv) =\u003e {\n  // Load env file based on `mode` in the current directory.\n  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.\n  const env = loadEnv(mode, process.cwd(), '')\n\n  return {\n    define: {\n      'process.env': env\n    },\n    plugins: [react()],\n  }\n})\n```\n\nThis configuration ensures that our library can access environment variables in a Vite environment.\n\n## Usage\n\n### Core Package\n\nThe most secure way to use the core package is with a server-side approach:\n\n```js\nimport { FigmaClient } from '@figma-vars/core';\n\n// Server-side (Node.js): Uses environment variables automatically\nconst client = new FigmaClient();\nconst fileKey = process.env.FIGMA_FILE_KEY;\nconst variables = await client.getFileVariables(fileKey);\n```\n\nFor more control, you can provide custom token handling:\n\n```js\nimport { FigmaClient } from '@figma-vars/core';\n\n// Using a secure backend service (recommended for client-side apps)\nconst client = new FigmaClient(async () =\u003e {\n  const response = await fetch('/api/get-figma-token');\n  const { token } = await response.json();\n  return token;\n});\n\nconst variables = await client.getFileVariables('your_file_key');\n```\n\n### React Package\n\n```jsx\nimport { useFigmaVariables } from '@figma-vars/react';\n\nfunction App() {\n  // SECURITY BEST PRACTICE: Using a backend proxy service\n  const { variables, loading, error } = useFigmaVariables(\n    'your_file_key',\n    {\n      tokenProvider: async () =\u003e {\n        // Call your own backend API that securely handles the token\n        const response = await fetch('/api/get-figma-token');\n        const { token } = await response.json();\n        return token;\n      }\n    }\n  );\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  if (error) return \u003cdiv\u003eError: {error.message}\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      {variables.map(variable =\u003e (\n        \u003cdiv key={variable.id}\u003e{variable.name}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Security Best Practices\n\nTo prevent unauthorized access to your Figma designs:\n\n1. **Never hardcode API tokens in your source code**\n2. **Never expose tokens in client-side code** - Use a backend proxy service\n3. **Implement token scoping** - Only request access to specific files\n4. **Use environment variables** with appropriate access restrictions\n5. **Implement token rotation** for long-lived applications\n6. **Apply the principle of least privilege** - Use tokens with minimal necessary permissions\n7. **Set up proper CORS policies** on your backend proxy\n\n### Example of a Secure Backend Proxy\n\n```js\n// server.js\nimport express from 'express';\nimport { FigmaClient } from '@figma-vars/core';\nimport cors from 'cors';\n\nconst app = express();\nconst PORT = process.env.PORT || 3001;\n\n// Configure CORS (in production, restrict to your domain)\napp.use(cors({\n  origin: process.env.NODE_ENV === 'production'\n    ? 'https://your-domain.com'\n    : 'http://localhost:3000'\n}));\n\n// FigmaClient automatically uses FIGMA_API_TOKEN from environment variables\nconst figmaClient = new FigmaClient();\n\napp.get('/api/figma/variables/:fileKey', async (req, res) =\u003e {\n  try {\n    // Add your authentication and authorization logic here\n    // Example: Check if the user is logged in and has access to this file\n\n    const variables = await figmaClient.getFileVariables(req.params.fileKey);\n    res.json(variables);\n  } catch (error) {\n    console.error('Figma API error:', error);\n    res.status(500).json({ error: 'Failed to fetch variables' });\n  }\n});\n\n// Token endpoint - never return raw tokens to unauthorized users!\napp.get('/api/get-figma-token', (req, res) =\u003e {\n  // Verify the user is authenticated\n  if (!req.headers.authorization) {\n    return res.status(401).json({ error: 'Unauthorized' });\n  }\n\n  // In a real implementation, you'd verify the auth token\n  // and might use scoped/temporary tokens for specific files\n\n  // IMPORTANT: This is just a proxy - we're not actually sending the token to the client\n  // Instead, make the Figma API request server-side and return only the data\n  res.json({\n    success: true,\n    message: 'Use /api/figma/variables/:fileKey instead of requesting tokens directly'\n  });\n});\n\napp.listen(PORT, () =\u003e {\n  console.log(`Server running on port ${PORT}`);\n});\n```\n\n### Using with Next.js and Similar Frameworks\n\nModern frameworks like Next.js provide built-in solutions for secure API token handling:\n\n#### Next.js API Routes\n\n```js\n// pages/api/figma/variables.js (Next.js API Route)\nimport { FigmaClient } from '@figma-vars/core';\n\nexport default async function handler(req, res) {\n  // API routes run on the server - tokens are secure here\n  const figmaClient = new FigmaClient();\n  const fileKey = req.query.fileKey;\n\n  try {\n    // You can implement authentication here\n    // e.g., check session, API key, etc.\n\n    const variables = await figmaClient.getFileVariables(fileKey);\n    res.status(200).json(variables);\n  } catch (error) {\n    res.status(500).json({ error: 'Failed to fetch variables' });\n  }\n}\n```\n\n#### Next.js Server Components (App Router)\n\n```jsx\n// app/figma/page.jsx (Server Component)\nimport { FigmaClient } from '@figma-vars/core';\n\n// This component runs entirely on the server - tokens are never sent to the client\nexport default async function FigmaVariablesPage() {\n  const figmaClient = new FigmaClient();\n\n  try {\n    const variables = await figmaClient.getFileVariables(process.env.FIGMA_FILE_KEY);\n\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eFigma Variables\u003c/h1\u003e\n        \u003cul\u003e\n          {variables.map(variable =\u003e (\n            \u003cli key={variable.id}\u003e{variable.name}\u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  } catch (error) {\n    return \u003cdiv\u003eError loading Figma variables\u003c/div\u003e;\n  }\n}\n```\n\n#### Client Component with Server Data Fetching\n\n```jsx\n// app/figma/client-page.jsx\n'use client'\nimport { useState, useEffect } from 'react';\n\nexport default function FigmaVariablesClientPage() {\n  const [variables, setVariables] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() =\u003e {\n    async function fetchVariables() {\n      // Call your internal API route which securely handles the token\n      const response = await fetch('/api/figma/variables?fileKey=your_file_key');\n      const data = await response.json();\n      setVariables(data);\n      setLoading(false);\n    }\n\n    fetchVariables();\n  }, []);\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eFigma Variables (Client Component)\u003c/h1\u003e\n      \u003cul\u003e\n        {variables.map(variable =\u003e (\n          \u003cli key={variable.id}\u003e{variable.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Production Security Configuration\n\nFor production environments, consider these additional security measures:\n\n1. **Run periodic security audits** on your dependencies\n2. **Set up rate limiting** to prevent abuse of your Figma API proxy\n3. **Implement request logging** for security monitoring\n4. **Use HTTPS** exclusively for all API communication\n5. **Configure secure headers** (Content-Security-Policy, etc.)\n6. **Consider using a CDN** with WAF capabilities\n\n## License\n\nMIT\n\n## CDN Usage\n\nYou can use this package directly via CDN without npm installation:\n\n### Skypack (recommended)\n\n```html\n\u003c!-- ES Module import for main functionality --\u003e\n\u003cscript type=\"module\"\u003e\n  import { FigmaClient } from 'https://cdn.skypack.dev/@figma-vars/core';\n\n  // Using the library\n  const client = new FigmaClient(async () =\u003e {\n    // Get token from your secure backend\n    const response = await fetch('/api/figma-token');\n    const data = await response.json();\n    return data.token;\n  });\n\n  // Fetch variables\n  const variables = await client.getFileVariables('your_file_key');\n  console.log(variables);\n\u003c/script\u003e\n```\n\n#### Importing React Package\n\n```html\n\u003c!-- React components and hooks --\u003e\n\u003cscript type=\"module\"\u003e\n  import React from 'https://cdn.skypack.dev/react';\n  import { useFigmaVariables } from 'https://cdn.skypack.dev/@figma-vars/react';\n\n  // Use React components and hooks\n  function MyComponent() {\n    const { variables, loading, error } = useFigmaVariables('your_file_key', {\n      tokenProvider: async () =\u003e {\n        const response = await fetch('/api/figma-token');\n        const data = await response.json();\n        return data.token;\n      }\n    });\n\n    // Component implementation...\n  }\n\u003c/script\u003e\n```\n\n#### Importing Plugin Functionality\n\n```html\n\u003c!-- For plugin-specific functionality --\u003e\n\u003cscript type=\"module\"\u003e\n  import { somePluginFunction } from 'https://cdn.skypack.dev/@figma-vars/core/plugin';\n\n  // Use plugin functionality\n  somePluginFunction();\n\u003c/script\u003e\n```\n\n### UNPKG\n\n```html\n\u003c!-- Core package --\u003e\n\u003cscript type=\"module\"\u003e\n  import { FigmaClient } from 'https://unpkg.com/@figma-vars/core/dist/index.mjs';\n\n  // Using the library...\n\u003c/script\u003e\n\n\u003c!-- React package --\u003e\n\u003cscript type=\"module\"\u003e\n  import React from 'https://unpkg.com/react/umd/react.production.min.js';\n  import { useFigmaVariables } from 'https://unpkg.com/@figma-vars/react/dist/index.mjs';\n\n  // Using React components...\n\u003c/script\u003e\n\n\u003c!-- Plugin functionality --\u003e\n\u003cscript type=\"module\"\u003e\n  import { somePluginFunction } from 'https://unpkg.com/@figma-vars/core/dist/index.mjs';\n\u003c/script\u003e\n```\n\n### jsDelivr\n\n```html\n\u003c!-- Core package --\u003e\n\u003cscript type=\"module\"\u003e\n  import { FigmaClient } from 'https://cdn.jsdelivr.net/npm/@figma-vars/core/dist/index.mjs';\n\n  // Using the library...\n\u003c/script\u003e\n\n\u003c!-- React package --\u003e\n\u003cscript type=\"module\"\u003e\n  import React from 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js';\n  import { useFigmaVariables } from 'https://cdn.jsdelivr.net/npm/@figma-vars/react/dist/index.mjs';\n\n  // Using React components...\n\u003c/script\u003e\n\n\u003c!-- Plugin package --\u003e\n\u003cscript type=\"module\"\u003e\n  import React from 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js';\n  import ReactDOM from 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js';\n  import { VariablesWidget, VariableList } from 'https://cdn.jsdelivr.net/npm/@figma-vars/plugin/dist/index.mjs';\n\n  // Using Plugin components\n  ReactDOM.render(\n    \u003cVariablesWidget /\u003e,\n    document.getElementById('figma-widget')\n  );\n\u003c/script\u003e\n```\n\n## Getting Started with FigmaVars\n\nWelcome to FigmaVars, a React hooks library designed to simplify the integration of Figma variables into your React applications.\n\n[FigmaVars dot com](https://figmavars.com)\n\n## Setup\n\nBefore using the hooks, you need to configure your Figma API token. You can store your token securely and make it available in your application, preferably through environment variables.\n\nCreate a `.env` file in the root of your project and add:\n\n```env\nREACT_APP_FIGMA_TOKEN=your_figma_api_token_here\n```\n\nPlease ensure you have .env in your .gitignore file to secure your token.\n\n## Basic Usage\n\nHere's a simple example of how to use the useFigmaVars hook to fetch variables from a Figma file:\n\n```tsx\nimport React, { useEffect } from 'react';\nimport { useFigmaVars } from 'figma-vars-hooks';\n\n// Define a type for the variable object\ninterface FigmaVariable {\n  id: string;\n  name: string;\n  value: string; // Adjust the type according to what `value` can be\n}\n\nConst App: React.FC = () =\u003e {\n  // Here we're assuming `useFigmaVars` returns an object with data, loading, and error properties\n  // Adjust the type of `data` based on the actual structure of variables you expect\n  const { data: variables, loading, error } = useFigmaVars('file_key_here');\n\n  useEffect(() =\u003e {\n    if (error) {\n      console.error(error);\n    }\n  }, [error]);\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      {variables?.map((varItem: FigmaVariable) =\u003e (\n        \u003cdiv key={varItem.id}\u003e{varItem.name}: {varItem.value}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## Next Steps\n\nYou can thoroughly explore the other hooks provided by FigmaVars to leverage Figma variables in your project. For detailed API documentation, please take a look at APIReference.md.\n\n## React + TypeScript + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:\n\n- Configure the top-level `parserOptions` property like this:\n\n```js\nexport default {\n  // other rules...\n  parserOptions: {\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n    project: ['./tsconfig.json', './tsconfig.node.json'],\n    tsconfigRootDir: __dirname,\n  },\n}\n```\n\n- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`\n- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`\n- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` \u0026 `plugin:react/jsx-runtime` to the `extends` list\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarklearst%2Ffigma-vars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarklearst%2Ffigma-vars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarklearst%2Ffigma-vars/lists"}