Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DNM] Figma code connect components #4320

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

Conversation

origami-z
Copy link
Contributor

@origami-z origami-z commented Oct 17, 2024

This PR shows the diff of what's been tried with Figma code connect for Salt (Next) Figma library, in case anyone case want to update on any new library.


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

npx figma connect publish 

Below components are published to Salt (Next) Figma library, keeping as a branch until this can be formalized as a requirement to be maintained

  • Icons (see list in diff)
  • Avatar
  • Badge
  • Banner
  • Button
  • Card
  • Divider
  • Tooltip

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

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();

Copy link

changeset-bot bot commented Oct 17, 2024

⚠️ No Changeset found

Latest commit: 94d895b

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

Copy link

vercel bot commented Oct 17, 2024

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 Nov 29, 2024 10:19am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant