How to Integrate Replit with Figma

1// figma-tokens.js — Extract design tokens from Figma
2const FIGMA_API = 'https://api.figma.com/v1';
3
4function headers() {
5  const token = process.env.FIGMA_TOKEN;
6  if (!token) throw new Error('FIGMA_TOKEN not set in Replit Secrets');
7  return { 'X-Figma-Token': token };
8}
9
10function fileKey() {
11  const key = process.env.FIGMA_FILE_KEY;
12  if (!key) throw new Error('FIGMA_FILE_KEY not set in Replit Secrets');
13  return key;
14}
15
16// Fetch file metadata and page structure
17async function getFileMeta() {
18  const res = await fetch(`${FIGMA_API}/files/${fileKey()}`, {
19    headers: headers()
20  });
21  if (!res.ok) throw new Error(`Figma API error ${res.status}: ${await res.text()}`);
22  return res.json();
23}
24
25// Fetch all named styles (colors, typography, effects)
26async function getStyles() {
27  const res = await fetch(`${FIGMA_API}/files/${fileKey()}/styles`, {
28    headers: headers()
29  });
30  if (!res.ok) throw new Error(`Figma API error ${res.status}: ${await res.text()}`);
31  const data = await res.json();
32  return data.meta?.styles || [];
33}
34
35// Get node data for a list of node IDs
36async function getNodes(nodeIds) {
37  const ids = nodeIds.join(',');
38  const res = await fetch(`${FIGMA_API}/files/${fileKey()}/nodes?ids=${encodeURIComponent(ids)}`, {
39    headers: headers()
40  });
41  if (!res.ok) throw new Error(`Figma API error ${res.status}: ${await res.text()}`);
42  return res.json();
43}
44
45// Convert Figma RGBA (0-1 range) to CSS hex
46function rgbaToHex({ r, g, b, a = 1 }) {
47  const toHex = v => Math.round(v * 255).toString(16).padStart(2, '0');
48  return a < 1
49    ? `#${toHex(r)}${toHex(g)}${toHex(b)}${toHex(a)}`
50    : `#${toHex(r)}${toHex(g)}${toHex(b)}`;
51}
52
53async function extractColorTokens() {
54  const styles = await getStyles();
55  const colorStyles = styles.filter(s => s.style_type === 'FILL');
56
57  if (colorStyles.length === 0) {
58    console.log('No color styles found in this Figma file.');
59    return;
60  }
61
62  // Fetch the actual node data to get fill colors
63  const nodeIds = colorStyles.map(s => s.node_id);
64  const nodeData = await getNodes(nodeIds);
65
66  const tokens = [];
67  for (const style of colorStyles) {
68    const node = nodeData.nodes?.[style.node_id]?.document;
69    if (!node) continue;
70    const fill = node.fills?.[0];
71    if (fill?.type === 'SOLID' && fill.color) {
72      const hex = rgbaToHex(fill.color);
73      const cssVar = `--color-${style.name.toLowerCase().replace(/[\s/]+/g, '-')}`.replace(/[^a-z0-9-]/g, '');
74      tokens.push({ name: style.name, cssVar, hex });
75    }
76  }
77
78  // Output as CSS custom properties
79  console.log(':root {');
80  tokens.forEach(t => console.log(`  ${t.cssVar}: ${t.hex};`));
81  console.log('}');
82
83  return tokens;
84}
85
86extractColorTokens().catch(console.error);

1// export-assets.js — Download Figma components as SVG files
2const fs = require('fs');
3const path = require('path');
4
5const FIGMA_API = 'https://api.figma.com/v1';
6const OUTPUT_DIR = './assets';
7
8function headers() {
9  return { 'X-Figma-Token': process.env.FIGMA_TOKEN };
10}
11
12async function exportNodes(nodeIds, format = 'svg') {
13  const ids = nodeIds.join(',');
14  const url = `${FIGMA_API}/images/${process.env.FIGMA_FILE_KEY}?ids=${encodeURIComponent(ids)}&format=${format}`;
15  const res = await fetch(url, { headers: headers() });
16  if (!res.ok) throw new Error(`Export error ${res.status}: ${await res.text()}`);
17  const data = await res.json();
18  return data.images; // { nodeId: 'https://s3.amazonaws.com/...' }
19}
20
21async function downloadFile(url, filepath) {
22  const res = await fetch(url);
23  if (!res.ok) throw new Error(`Download failed: ${res.status}`);
24  const content = await res.text();
25  fs.writeFileSync(filepath, content, 'utf8');
26}
27
28async function exportIcons(nodeIdMap) {
29  // nodeIdMap = { 'icon-home': '123:456', 'icon-user': '123:789' }
30  const nodeIds = Object.values(nodeIdMap);
31  const imageUrls = await exportNodes(nodeIds, 'svg');
32
33  if (!fs.existsSync(OUTPUT_DIR)) fs.mkdirSync(OUTPUT_DIR, { recursive: true });
34
35  for (const [name, nodeId] of Object.entries(nodeIdMap)) {
36    const url = imageUrls[nodeId];
37    if (!url) {
38      console.warn(`No export URL for node ${nodeId} (${name})`);
39      continue;
40    }
41    const filepath = path.join(OUTPUT_DIR, `${name}.svg`);
42    await downloadFile(url, filepath);
43    console.log(`Downloaded: ${filepath}`);
44  }
45}
46
47// Example: replace these with your actual node IDs from Figma
48const icons = {
49  'icon-home': process.env.FIGMA_NODE_HOME || '1:23',
50  'icon-user': process.env.FIGMA_NODE_USER || '1:24'
51};
52
53exportIcons(icons).catch(console.error);