Figma code connect setup

figma.config.json

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

package.json

@@ -38,7 +38,9 @@
     "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"
   },
   "dependencies": {
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -60,6 +62,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",

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,52 @@
+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'),
+      // hasLeftIcon: figma.boolean("hasLeftIcon"),
+      // hasRightIcon: figma.boolean("hasRightIcon")
+      // No matching props could be found for these Figma properties:
+      // "righIcon": figma.instance('righIcon'),
+      // "hasRightIcon": figma.boolean('hasRightIcon'),
+      // "leftIcon": figma.instance('leftIcon'),
+      // "hasLeftIcon": figma.boolean('hasLeftIcon')
+    },
+    example: props => (
+      <Button
+        variant={props.variant}
+        shape={props.shape}
+        disabled={props.disabled}
+        size={props.size}
+        label={props.label}
+      />
+    ),
+  }
+)

src/components/DropdownMenu/DropdownMenu.figma.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { DropdownMenuRoot } from "./DropdownMenu"
+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(
+  DropdownMenuRoot,
+  "https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=11510%3A28005",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "showButton": figma.boolean('Show button'),
+      // "ponting": figma.enum('ponting', {
+      //   "default": "default",
+      //   "inverted": "inverted"
+      // })
+    },
+    example: (props) => <DropdownMenuRoot />,
+  },
+)

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} />
+    ),
+  },
+)

src/components/Tooltip/Tooltip.figma.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { Tooltip } from "./Tooltip"
+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(
+  Tooltip,
+  "https://www.figma.com/design/0OB1JVXSqaxmJDrP7qAMJr?node-id=10757%3A3364",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "label2": figma.string('label 2'),
+      // "label1": figma.string('label 1'),
+      // "orientation": figma.enum('orientation', {
+      //   "down": "down",
+      //   "up": "up",
+      //   "left": "left",
+      //   "right": "right",
+      //   "orientation8": "orientation8",
+      //   "orientation7": "orientation7",
+      //   "orientation6": "orientation6",
+      //   "orientation5": "orientation5"
+      // }),
+      // "icon": figma.boolean('icon')
+    },
+    example: (props) => <Tooltip message={/* TODO */} />,
+  },
+)

vite.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
         'node_modules',
         'tests',
         '**/*.stories.tsx',
+        '**/*.figma.tsx',
         '**/*.test.tsx',
         'src/components/ThemeProvider/renderWithTheme.tsx',
       ],