`figma connect preview` support for nested components props

Open
  • Is something wrong?
#412 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
54/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
figma, typescript
Domain
developer-experience

Research direction

Start by locating the figma connect preview command and the code that builds the --inspect and --output json property lists. Check how nested component instances are represented in the Figma data and compare that with the current boolean output for “Assistive text.” Done means both preview formats report nested component properties accurately so they can be used to test templates.

Written by the indexing model from the issue text.

Description

feature request

Recently I started to experiment with the CLI preview feature and notice it can only receive props that belong strictly to the component.

Often my team designers share components that rely on nested instances. See in the image below the "Assistive text" nested component:

Image

As you can see in the image below, the nested component value is a relevant prop for the component code:

Image

When I run the preview command with the --inspect flag, Assistive text is represented as a boolean, which is not the case - it's a nested component.

● components.figma.batch.json (198:33673)
  Name                      Type     Options                                      Default
  ------------------------  -------  -------------------------------------------  ---------
  [𝐓] Label                Text                                                  "Label"
  Trailing label (Default)  Boolean  true | false                                 true
  Assistive text            Boolean  true | false                                 false
  Leading label             Boolean  true | false                                 false
  Selection                 Variant  None | Selected | Partial                    "None"
  State                     Variant  Default | Hover | Active | Focus | Disabled  "Default"
  Error                     Variant  True | False                                 "False"

Similar output is generated with --output json:

[
  {
    "filePath": "components.figma.batch.json",
    "nodeId": "198:33673",
    "availableProperties": [
      {
        "name": "[𝐓] Label",
        "type": "TEXT",
        "default": "Label"
      },
      {
        "name": "Trailing label (Default)",
        "type": "BOOLEAN",
        "default": true
      },
      {
        "name": "Assistive text",
         "type": "BOOLEAN",
        "default": false
      },
      {
        "name": "Leading label",
        "type": "BOOLEAN",
        "default": false
      },
      {
        "name": "Selection",
        "type": "VARIANT",
        "variantOptions": [
          "None",                                                                                       "Selected",
          "Partial"
        ],
        "default": "None"
      },
      {
        "name": "State",
        "type": "VARIANT",
        "variantOptions": [
          "Default",
          "Hover",
          "Active",
          "Focus",
          "Disabled"
        ],
        "default": "Default"
      },
      {
        "name": "Error",
        "type": "VARIANT",
        "variantOptions": [
          "True",
          "False"
        ],
        "default": "False"
      }                                                                                           ]
  }
]

Being able to test the templates with the nested component values is quite relevant for our team to ensure these are working as we designed them.

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.