Object type prop support for React Dynamic code snippet

オープン
  • 何か問題がありますか？
#348 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る

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

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
react, typescript
領域
developer-experience

調査の方向性

Start with the React Code Connect examples in the issue and the linked nested-properties documentation to understand how boolean mappings and generated snippets are represented. The issue gives no repository files, tests, or implementation entry point to follow, so first locate the React snippet generation code and its tests. Done means a true object prop renders its nested values and a false value omits the prop, without requiring a combinatorial set of variants.

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

説明

feature request

Hello Figma team! Thanks for the Code Connect tool. We are currently setting it up for new Design System in our company to help developers and LLMs to better understand how components work in code. While Dynamic Code Snippets solve most of the cases for us, I have one feature request related to the mapping of object type props. I know this was already discussed, but I did not see my particular case, so wanted to bring it up.

Use case:
Imagine Checkbox component that can conditionally render Hint component. In our Design System we follow props composition approach where you can pass props of underlying component to the parent component. Looks something like this when implemented (all non-related props are omitted here and in rest of request):

const Checkbox = ({ hint, ...rest }) => 
  <div>
    {hint && <Hint {...hint} />}
    {/* rest of the component */}
  </div>

And when implemented it can be used like this:
With hint: <Checkbox hint={{ children: "Hint text" }} />
Without hint: <Checkbox />

In Figma, there is a hint boolean that controls if Hint component is rendered and (consequentially) if this components props are available for editing. I tried all three variants in the spoiler below and none of them worked:

Dynamic Code Snippets generating incorrect code

In nested properties example, Figma docs suggest using figma.nestedProperties with figma.boolean. While it works well with generic values, it fails when we need to pass a whole object as a prop.

We want hint: true case to generate snippet like this:
<Checkbox hint={{ children: "some text" }} />
While hint: false have hint prop in code completely omitted:
<Checkbox />
We can try to approach it in several ways using figma.boolean.
First option:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={props.hint}
    />
  ),
});

This example won’t work because of Figma Code Connect limitations. Example function here is just a template for Code Connect to put variables in, and it does not evaluate any JS inside of it. While it has access to the props.hint object, it does not know how to put the whole object in the snippet, resulting in next example generated:
<Checkbox />

Second option:
Knowing that Figma cannot put object into snippet, you might want to try something like this:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={{ children: props.hint?.children }}
    />
  ),
});

This example will work correct for the hint: true case and it will generate something like this:
<Checkbox hint={{ children: "some text" }} />
However, for the hint: false case, it will generate this snippet:
<Checkbox hint={{ children: undefined }} />
Which is not what we want.

Third version:
At the end you might want to try something like this:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={ props.hint ? { children: props.hint?.children } : undefined }
    />
  ),
});

But unfortunately, (since Figma does not evaluate any JS), it will only generate snippet like this for hint: true
<Checkbox hint={undefined ? { children: “some text” } : undefined}
and like this for hint: false:
<Checkbox hint={undefined ? { children: undefined } undefined} />

Considering all the options above does not work, the only option is to use variant:

// Variant: without hint
figma.connect(Checkbox, FIGMA_URL, {
  variant: { hint: false },
  props: {...},
  example: (props) => (
    <Checkbox ... />
  ),
});
// Variant: with hint
figma.connect(Checkbox, FIGMA_URL, {
  variant: { hint: true },
  props: {
    ...
    hint: figma.nestedProps("Hint", {
      text: figma.string("hint"),
    }),
  },
  example: (props) => (
    <Checkbox ...
      hint={{
        children: props.hint.text,
      }}
    />
  ),
});

This generates correct snippets and solves the problem for components that have only one of such nested components.

Problem:
We have components like FormField that has multiple nested components. variant approach does not scale well for such components because the number of variants grows exponentially with every new conditionally rendered component added.

Component:

const FormField = ({ hint, validationMessage ...rest }) => 
  <div>
    {hint && <Hint {...hint} />}
    {/* rest of the component */}
    {validationMessage && <ValidationMessage {...validationMessage} />}
  </div>

Code Connect file:

figma.connect(FormField, FIGMA_URL, {
  variant: {hint: false, validation: "none"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: true, validation: "none"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: false, validation: "invalid"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: true, validation: "invalid"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: false, validation: "valid"},
  ...
});
figma.connect(FormField, FIGMA_URL, {
  variant: {hint: true, validation: "valid"},
  ...
});

While template files solve the issue, it's really cumbersome to write them only for such simple conditional cases.

Desired behaviour:
Ideally, we would have preferred objects to be rendered in the snippets correctly. Below is the example of desired behaviour with Checkbox component.

Code Connect file:

figma.connect(Checkbox, FIGMA_URL, {
  props: {
    hint: figma.boolean("hint", {
      true: figma.nestedProps("Hint", {
        children: figma.string("hint")
      }),
      false: undefined
    }),
  },
  example: (props) => (
    <Checkbox
      hint={props.hint}
    />
  ),
});

hint: true case:

<Checkbox hint={{ children: "text from figma" }} />

hint: false case:

 <Checkbox />

Sorry for the long post, just wanted to make sure we tried all other options and explain why it would be valuable to have it. Happy to discuss further.

主要言語
TypeScript
スター
1.6k
フォーク
126
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 を短くまとめたダイジェスト。