normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffix

Open Beginner friendly
  • Is something wrong?
#419 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
developer-experience

Research direction

Start with normalizePropName in cli/src/connect/create_template.ts and cli/src/connect/helpers.ts, which uses /#[0-9:]*/g, and compare it with normalizePropKey in cli/src/connect/property_combinations.ts and getPropName in cli/src/connect/validation.ts, which strip only the #<digits>:<digits> ID suffix. Reproduce with the mock.json steps in the issue. Done when "Step #1#12:1" yields "Step #1", "C# Snippet#4:5" yields "C# Snippet", and the Step collision is gone.

Written by the indexing model from the issue text.

Description

figma connect create and client.getComponents() strip every # (and any following digits or colons) from Figma component property names instead of removing only the trailing #<digits>:<digits> property ID suffix.

Reproduction
mkdir repro && cd repro
npm init -y
npm install @figma/[email protected]

cat > mock.json << 'EOF'
{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [{
      "id": "0:1",
      "name": "Page 1",
      "type": "CANVAS",
      "children": [{
        "id": "1:2",
        "name": "Stepper",
        "type": "COMPONENT_SET",
        "componentPropertyDefinitions": {
          "Step #1#12:1": { "type": "BOOLEAN", "defaultValue": true },
          "Step #2#12:2": { "type": "BOOLEAN", "defaultValue": false },
          "C# Snippet#4:5": { "type": "TEXT", "defaultValue": "x" },
          "Heading #1": { "type": "VARIANT", "defaultValue": "Small", "variantOptions": ["Small", "Large"] }
        },
        "children": []
      }]
    }]
  }
}
EOF

FIGMA_ACCESS_TOKEN=test CODE_CONNECT_MOCK_CREATE_API_RESPONSE=mock.json \
  npx figma connect create --skip-update-check "https://www.figma.com/design/abc/Test?node-id=1-2"
cat Stepper.figma.ts
Actual output (Stepper.figma.ts)
const step1 = figma.selectedInstance.getBoolean("Step ")
const step2 = figma.selectedInstance.getBoolean("Step ")
const cSnippet = figma.selectedInstance.getString("C Snippet")
const heading = figma.selectedInstance.getEnum("Heading ", {
  Small: "small",
  Large: "large",
})
Expected output
const step1 = figma.selectedInstance.getBoolean("Step #1")
const step2 = figma.selectedInstance.getBoolean("Step #2")
const cSnippet = figma.selectedInstance.getString("C# Snippet")
const heading1 = figma.selectedInstance.getEnum("Heading #1", {
  Small: "small",
  Large: "large",
})

normalizePropName in cli/src/connect/create_template.ts and cli/src/connect/helpers.ts (also used by client.getComponents() in cli/src/client/figma_client.ts, where "Step #1#12:1" and "Step #2#12:2" collide on "Step ") uses /#[0-9:]*/g (generateCodePropName also uses /#[0-9:]+$/g on variant keys that have no ID suffix), whereas normalizePropKey in cli/src/connect/property_combinations.ts and getPropName in cli/src/connect/validation.ts strip only the #<digits>:<digits> ID suffix.

Versions
  • @figma/code-connect: 2.1.0, main (d856baa)
  • Node.js: v26.13.0

Credit: https://ucsbplse.github.io/

Dominant language
TypeScript
Stars
1.6k
Forks
126
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from figma/code-connect

All issues in figma/code-connect

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.