Figma Code Connect

figma.config.json

@@ -0,0 +1,13 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "include": [
+      "src/components/**/*.tsx",
+      "src/icons/*.tsx"
+    ],
+    "importPaths": {
+      "src/components/*": "@0xsequence/design-system",
+      "src/icons/*": "@0xsequence/design-system"
+    }
+  }
+}

package.json

@@ -38,7 +38,10 @@
     "prepack": "pnpm build",
     "changeset": "changeset",
     "changeset:version": "changeset version",
-    "changeset:publish": "pnpm build && pnpm test && changeset publish"
+    "changeset:publish": "pnpm build && pnpm test && changeset publish",
+    "figma:connect": "figma connect",
+    "figma:publish": "figma connect publish",
+    "figma:generate:icons": "node ./scripts/generate-figma-icons.js"
   },
   "dependencies": {
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -60,6 +63,7 @@
     "@babel/core": "^7.25.2",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
+    "@figma/code-connect": "^1.2.4",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",

scripts/generate-figma-icons.js

@@ -0,0 +1,66 @@
+import fs from 'fs'
+import path from 'path'
+
+import { client } from '@figma/code-connect'
+
+async function getIcons() {
+  const components = await client.getComponents(
+    'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr/Sequence-Design-System-1.1?node-id=10216-5855'
+  )
+  const icons = components.filter(component => component.name.endsWith('Icon'))
+
+  const rootPath = path.resolve('./src/icons')
+
+  console.log(icons.length, 'icons found in figma')
+
+  console.log('Writing figma files...')
+
+  let succeeded = 0
+  let failed = 0
+
+  const missingIcons = []
+
+  for (const icon of icons) {
+    const componentName = icon.name
+    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++
+      missingIcons.push(componentName)
+    }
+  }
+
+  console.log('\nDone writing figma files')
+  console.log(succeeded, 'succeeded', failed, 'failed')
+
+  console.log('\nMissing icons:\n')
+  console.log(missingIcons.join('\n'))
+}
+
+getIcons()

src/components/Badge/Badge.figma.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Badge } from './Badge'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Badge,
+  'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=9892%3A4941',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      variant: figma.enum('variant', {
+        info: 'info',
+        warning: 'warning',
+      }),
+      size: figma.enum('size', {
+        small: 'sm',
+      }),
+      value: figma.string('value'),
+    },
+    example: props => (
+      <Badge variant={props.variant} size={props.size} value={props.value} />
+    ),
+  }
+)

src/components/Breadcrumbs/Breadcrumbs.figma.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { Breadcrumbs } from "./Breadcrumbs"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Breadcrumbs,
+  "https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=11294%3A72770",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "current": figma.string('Current'),
+      // "showWallet": figma.boolean('show wallet'),
+      // "showBack": figma.boolean('show back'),
+      // "showInfo": figma.boolean('show info'),
+      // "level": figma.enum('Level', {
+      //   "5": "5",
+      //   "4": "4",
+      //   "3": "3",
+      //   "2": "2"
+      // })
+    },
+    example: (props) => <Breadcrumbs paths={/* TODO */} />,
+  },
+)

src/components/Button/Button.figma.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Button } from './Button'
+import figma from '@figma/code-connect'
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=577%3A12160',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        glass: 'glass',
+      }),
+      shape: figma.enum('shape', {
+        circle: 'circle',
+        square: 'square',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      size: figma.enum('size', {
+        small: 'sm',
+        xsmall: 'xs',
+      }),
+      label: figma.string('label'),
+      leftIcon: figma.instance('leftIcon'),
+      // hasLeftIcon: figma.boolean("hasLeftIcon"),
+      // hasRightIcon: figma.boolean("hasRightIcon")
+      // No matching props could be found for these Figma properties:
+      // rightIcon: figma.instance('rightIcon'),
+      // "hasRightIcon": figma.boolean('hasRightIcon'),
+      // "hasLeftIcon": figma.boolean('hasLeftIcon')
+    },
+    example: props => (
+      <Button
+        variant={props.variant}
+        shape={props.shape}
+        disabled={props.disabled}
+        size={props.size}
+        label={props.label}
+        leftIcon={props.leftIcon}
+      />
+    ),
+  }
+)

src/components/Divider/Divider.figma.tsx

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { Divider } from './Divider'
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Divider,
+  'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=11869-30796',
+  {
+    example: () => <Divider />,
+  }
+)

src/components/DropdownMenu/DropdownMenu.figma.tsx

@@ -0,0 +1,64 @@
+import figma from '@figma/code-connect'
+import React from 'react'
+
+import { ContextMenuIcon } from '../../icons'
+import { IconButton } from '../IconButton'
+
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from './DropdownMenu'
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  DropdownMenuRoot,
+  'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=11510%3A28005',
+  {
+    props: {
+      side: figma.enum('ponting', {
+        default: 'bottom',
+        inverted: 'top',
+      }),
+      children: figma.children(['atoms/dropdown-menu-item-wallet', 'Divider']),
+    },
+    example: props => (
+      <DropdownMenuRoot>
+        <DropdownMenuTrigger asChild>
+          <IconButton icon={ContextMenuIcon} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side={props.side}>
+          {props.children}
+        </DropdownMenuContent>
+      </DropdownMenuRoot>
+    ),
+  }
+)
+
+figma.connect(
+  DropdownMenuItem,
+  'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=10606-387',
+  {
+    props: {
+      label: figma.textContent('Menu item'),
+    },
+    example: props => <DropdownMenuItem>{props.label}</DropdownMenuItem>,
+  }
+)
+
+// figma.connect(
+//   DropdownMenuSeparator,
+//   'https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=10606-387',
+//   {
+//     example: () => <DropdownMenuSeparator />,
+//   }
+// )

src/components/Spinner/Spinner.figma.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { Spinner } from "./Spinner"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Spinner,
+  "https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=12252%3A39779",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      as: figma.enum("use case", {
+        loading: "g",
+        default: "defs",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "state": figma.enum('state', {
+      //   "1": "1",
+      //   "2": "2",
+      //   "3": "3",
+      //   "4": "4"
+      // })
+    },
+    example: (props) => <Spinner as={props.as} />,
+  },
+)

src/components/Tag/Tag.figma.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { Tag } from "./Tag"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Tag,
+  "https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=10500%3A1829",
+  {
+    props: {},
+    example: (props) => <Tag label={/* TODO */} />,
+  },
+)

src/components/Toast/Toast.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { Toast } from "./Toast"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Toast,
+  "https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=9895%3A7000",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      description: figma.string("description"),
+      variant: figma.enum("variant", {
+        success: "success",
+        error: "error",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "showDescription": figma.boolean('Show Description'),
+      // "showIcon": figma.boolean('Show Icon'),
+      // "title": figma.string('title'),
+      // "description": figma.string('description')
+    },
+    example: (props) => (
+      <Toast description={props.description} variant={props.variant} />
+    ),
+  },
+)