[DNM] Figma code connect components

[origami-z]

This PR shows the diff of what's been tried with Figma code connect for Salt DS Figma library. This is an "off-the-book" effort to enhance dev mode experience before we have a full roadmap around supporting it.

#4810

---

Figma code connect docs -
https://github.com/figma/code-connect/blob/main/docs/react.md

npx figma connect publish 

• Icons can be generated using a script in the description below
• Other core components can be found in packages/core/figma-src

---

Learnings

Most of text / label in our Figma components is controlled via 2 props (one boolean & one string), therefore code connect will generate 2 separate prop mapping (one figma.boolean & figma.string). The correct way to map them is using valueMapping object, e.g. below. See more on Figma doc.

      label: figma.boolean("Label", {
        true: figma.string("Label text value"),
        false: undefined,
      }),

When using npx figma connect, our Figma library is too large with below error

Failed to fetch components from Figma (400): 400 Request too large. If applicable, filter by query params.

In order to get node ids on a page in batch, can use REST API get file nodes, e.g., https://api.figma.com/v1/files/7Fh5JbUUM84pYwLt9tpJh2/nodes?ids=7992-77669&depth=2 (note the depth to keep it small), then run some scripts on the componentSets with something like below

Object.entries(componentSets).map(([key, value])=> `// ${value.name}: ${key}`).join('\n')

---

Scripts

For icons update from - https://github.com/figma/code-connect/blob/main/cli/scripts/import-icons.ts

// change to: "import { client } from '@figma/code-connect'"
import { client } from "../src/react/index_react";
import fs from "fs";

async function generateIcons() {
  // fetch components from a figma file. If the `node-id` query parameter is used,
  // only components within those frames will be included. This is useful if your
  // file is very large, as this will speed up the query by a lot
  let components = await client.getComponents(
    "https://www.figma.com/design/9laF7Zn75aUMNsqSqRgAuX/Salt-Icons"
  );

  // Converts icon names from e.g `icon-32-list` to `Icon32List`
  components = components
    .filter(({ name }) => {
      return !name.includes("#") && !name.includes("DEPRECATED");
    })
    .map((component) => ({
      ...component,
      name:
        component.name
          .split(/[.-]/g)
          .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
          .join("") + "Icon",
    }));

  const uniqueNames = new Set([...components.map((c) => c.name)]);

  fs.writeFileSync(
    "icons.figma.tsx",
    `\
  import figma from '@figma/code-connect'

  import {
  ${Array.from(uniqueNames)
    .map((iconName) => `  ${iconName},`)
    .join("\n")}
  } from '../components'

  ${components
    .map((c) => `figma.connect(${c.name}, '${c.figmaUrl}')`)
    .join("\n")}
  `
  );
}

generateIcons();

[changeset-bot]

⚠️ No Changeset found

Latest commit: 359a45f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
saltdesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 7, 2025 4:43pm