Support for parsing instance().getProps() in nested props

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

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
49/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
developer-experience

Research direction

Start by tracing how figma.nestedProps, figma.enum, and figma.instance().getProps() are parsed and emitted, using the example in the issue as the expected case. Check the relevant parser and output tests, then add coverage for the nested icon property mapping; done means the generated example preserves the requested instance property only when its enum condition is true.

Written by the indexing model from the issue text.

Description

feature request

Our UX team is using nested components for reusability in Figma which has created a challenge for us when hooking it up to code connect. It seems like code connect isn't parsing instance().getProps in this example:

import figma from "@figma/code-connect";
import { Button } from "./DesignSystem/Button";

figma.connect(
  Button,
  "https://www.figma.com/design/example",
  {
    props: {
      type: figma.string("type"),
      disabled: figma.enum("state", {
        default: false,
        hover: false,
        disabled: true,
      }),
      buttonBaseProps: figma.nestedProps(".button-base", {
        size: figma.string("size"),
        label: figma.string("label"),
        leftIcon: figma.enum("has-left-icon", {
          true: figma.instance("left-icon").getProps().type,
          false: undefined,
        }),
        rightIcon: figma.enum("has-right-icon", {
          true: figma.instance("right-icon").getProps().type,
          false: undefined,
        }),
      }),
    },
    example: ({ type, disabled, buttonBaseProps }: { type: any; disabled: boolean; buttonBaseProps: any }) => (
      <Button
        type={type}
        size={buttonBaseProps.size}
        leftIcon={buttonBaseProps.leftIcon}
        rightIcon={buttonBaseProps.rightIcon}
        label={buttonBaseProps.label}
        disabled={disabled}
        onPress={() => {}}
      />
    ),
  }
);

Output in Figma:

import { Button } from "./DesignSystem/Button"

<Button
    type="primary"
    size="small"
    rightIcon={figma.instance("right-icon").getProps().type}
    label="Button"
    onPress={() => {}}
/>

Since we also need to handle the nested has-right-icon properties, it makes sense to use the enum to try to map the icon only when it's present. But then we need to access the type prop for the instance, as we are not passing the icon component to the button, just the type.

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.