Nested props not syncing to code

Open
  • Is something wrong?
#368 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
developer-experience

Research direction

Start by tracing how Code Connect 1.4.0 resolves figma.nestedProps for the conditional Badge in the supplied IconButton example. Reproduce the issue by changing Content or Variant in Figma and checking whether the generated code updates; done when both nested prop changes appear correctly in the generated code.

Written by the indexing model from the issue text.

Description

API question

While integrating Figma with Code Connect, I encountered an issue with prop synchronization for nested components.

I have an IconButton component that conditionally renders a nested Badge component when the Show Badge property is set to true.

The Badge component has the following props:

  • Variant (Standard / Dot)
  • Content (only displayed when Variant is set to Standard)

Issue
When updating any of the Badge props in Figma:

  • Changing the Content value
  • Switching the Variant between Standard and Dot

…the changes are not reflected in the generated code via Code Connect (the changes are reflected in Figma).

Expected behavior
Changes made to the nested Badge component props should be propagated and correctly reflected in the generated code.

Actual behavior
The Badge props remain unchanged in the code, even though they are updated in Figma.

Code Connect version: 1.4.0
OS: Ubuntu

Code snippet:

figma.connect(
  IconButton,
  "figma_url",
  {
    props: {
      disabled: figma.enum("State", {
        Disabled: true,
      }),
      showBadge: figma.boolean("Show badge"),
      badge: figma.boolean("Show badge", {
        true: figma.nestedProps("<Badge>", {
          variant: figma.enum("Variant", {
            Standard: "standard",
            Dot: "dot",
          }),
          badgeContent: figma.enum("Variant", {
            Standard: figma.string("Content"),
            Dot: undefined,
          }),
        }),
        false: { variant: undefined, badgeContent: undefined },
      }),

      icon: figma.nestedProps("<Icon>", {
        name: figma.instance<string>("Icon instance"),
      }),
    },
    example: (props) => (
      <IconButton
        disabled={props.disabled}
        showBadge={props.showBadge}
        badgeContent={props.badge.badgeContent}
      >
        <Icon>{props.icon.name}</Icon>
      </IconButton>
    ),
  },
);
Image
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.