Skip to content

Commit

Permalink
Adding script to generate figma files for icons
Browse files Browse the repository at this point in the history
  • Loading branch information
corbanbrook committed Dec 19, 2024
1 parent dbca432 commit 1e55339
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 3 deletions.
8 changes: 6 additions & 2 deletions figma.config.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
{
"codeConnect": {
"parser": "react",
"include": ["src/components/**/*.{tsx,jsx}"],
"include": [
"src/components/**/*.tsx",
"src/icons/*.tsx"
],
"importPaths": {
"src/components/*": "@0xsequence/design-system"
"src/components/*": "@0xsequence/design-system",
"src/icons/*": "@0xsequence/design-system"
}
}
}
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
"changeset:version": "changeset version",
"changeset:publish": "pnpm build && pnpm test && changeset publish",
"figma:connect": "figma connect",
"figma:publish": "figma connect publish"
"figma:publish": "figma connect publish",
"figma:generate:icons": "node ./scripts/generate-figma-icons.js"
},
"dependencies": {
"@radix-ui/react-aspect-ratio": "^1.1.0",
Expand Down
62 changes: 62 additions & 0 deletions scripts/generate-figma-icons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { client } from '@figma/code-connect'
import fs from 'fs'

import path from 'path'

async function getIcons() {
const components = await client.getComponents(
'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=9818-3653'
)

const rootPath = path.resolve('./src/icons')

console.log(components.length, 'icons found in figma')

console.log('Writing figma files...')

let succeeded = 0
let failed = 0

for (const icon of components) {
const componentName = `${capitalize(icon.name)}Icon`

const componentPath = path.join(rootPath, `${componentName}.tsx`)

// Check to see if a react component with the same name exists in the icons directory
// before creating a figma file
if (fs.existsSync(componentPath)) {
const figmaFilename = `${componentName}.figma.tsx`

console.log(` ✔ ${figmaFilename}`)

const figmaPath = path.join(rootPath, `${figmaFilename}`)
const source = `import figma from '@figma/code-connect'
import React from 'react'
import { ${componentName} } from './index'
figma.connect(
${componentName},
'${icon.figmaUrl}',
{
example: () => <${componentName} />
}
)
`

fs.writeFileSync(figmaPath, source)

succeeded++
} else {
console.log(' ✘ Couldnt find', componentName)
failed++
}
}

console.log('\nDone writing figma files')
console.log(succeeded, 'succeeded', failed, 'failed')
}

getIcons()

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

0 comments on commit 1e55339

Please sign in to comment.