`figma connect preview` support for nested components props

オープン
#412 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
54/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
figma, typescript

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
1.6k
フォーク
126
PR マージ指標
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

figma/code-connect のほかの issue

figma/code-connect の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。