Object type prop support for React Dynamic code snippet

Abierto
  • ¿Algo no está bien?
#348 3 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
developer-experience

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1.6k
Forks
126
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de figma/code-connect

Todos los issues de figma/code-connect

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.