Introduction – Why Developers Need Figma
Architecture Overview
Step‑by‑Step Implementation
const FIGMA_TOKEN = process.env.FIGMA_TOKEN; const FILE_ID = 'YOUR_FIGMA_FILE_ID'; // Replace with actual ID
async function getFile() {
const url = https://api.figma.com/v1/files/${FILE_ID};
const res = await fetch(url, {
headers: { 'X-Figma-Token': FIGMA_TOKEN }
});
if (!res.ok) throw new Error(Figma API error: ${res.status});
const data = await res.json();
const fs = require('fs');
fs.writeFileSync('./design-raw/file.json', JSON.stringify(data, null, 2));
console.log('✅ Design file saved to design-raw/file.json');
}
getFile().catch(console.error); </code></pre>
<p>Run it with <code>node figma-fetch.js</code>. The JSON is now the source for token extraction.</p> <h3>3. Extract Design Tokens</h3> <p>Design tokens are the atomic values (colors, spacing, typography). The following script walks the JSON tree, gathers them, and writes a <code>tokens.json</code> file compatible with <a href="https://github.com/amzn/style-dictionary">Style Dictionary</a>. </p> <pre><code class="language-javascript">// token-extractor. ```js const fs = require('fs'); const raw = JSON.parse(fs.readFileSync('./design-raw/file.json')); ```function traverse(node, tokens) {
if (node.type === 'FILL') {
const color = node.fills[0].color;
const rgba = rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${color.a});
tokens.colors = tokens.colors || {};
tokens.colors[node.name] = { value: rgba };
}
if (node.type === 'TEXT') {
const style = node.style;
tokens.fontSizes = tokens.fontSizes || {};
tokens.fontSizes[node.name] = { value: ${style.fontSize}px };
}
if (node.children) {
node.children.forEach(child => traverse(child, tokens));
}
}
const tokens = {}; raw.document.children.forEach(page => traverse(page, tokens));
fs.writeFileSync('./tokens/tokens.json', JSON.stringify(tokens, null, 2)); console.log('✅ Tokens extracted to tokens/tokens.json'); </code></pre>
<p>Running <code>node token-extractor.js</code> produces a clean token set that can be fed into any styling solution (CSS variables, SCSS, Tailwind config, etc.).</p> <h3>4. Scaffold React Components</h3> <p>With tokens ready, we generate component skeletons. Assume each top‑level frame in Figma corresponds to a UI component. The script below creates a functional React component file using the extracted token names.</p> <pre><code class="language-javascript">// component-generator. ```js const fs = require('fs'); const raw = JSON.parse(fs.readFileSync('./design-raw/file.json')); const path = require('path'); ```function createComponent(name, children) {
const componentName = name.replace(/\s+/g, '');
const filePath = path.join('src', 'components', ${componentName}.tsx);
const content = import React from 'react';\nimport './${componentName}.scss';\n\nexport const ${componentName}: React.FC = () => (\n <div className=\"${componentName}\">\n {/* TODO: map Figma layers to JSX */}\n </div>\n);\n;
fs.mkdirSync(path.dirname(filePath), { recursive: true });
fs.writeFileSync(filePath, content);
console.log(✅ Component ${componentName} created);
}
raw.document.children.forEach(page => { page.children.forEach(frame => { if (frame.type === 'FRAME') { createComponent(frame.name, frame.children); } }); }); </code></pre>
<p>After execution, you’ll have a <code>src/components</code> directory populated with reusable React component placeholders.</p> <h3>5. Wire the Pipeline into CI/CD</h3> <p>Below is a concise GitHub Actions workflow that triggers on every push to <code>main</code>. It installs dependencies, runs the three scripts, and publishes the generated package.</p> <pre><code class="language-yaml"># .github/workflows/figma-pipeline.yml name: Figma Design Sync on: push: branches: [main]jobs: sync: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Node uses: actions/setup-node@v3 with: node-version: '18' - name: Install deps run: npm ci - name: Export design JSON env: FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }} run: node figma-fetch.
- name: Extract tokens
run: node token-extractor.js
- name: Generate components
run: node component-generator.js
- name: Publish package
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
npm publish --access public
</code></pre>
<p>With this workflow in place, design changes propagate automatically, keeping the UI in sync without manual copy‑pastes.</p>