[figma] Show React code snippets in Figma

[oliviertassinari]

Summary 💡

This issue is about extending the built-in feature of Figma to see React rather than CSS code:

Examples 🌈

• https://twitter.com/matsugfx/status/1576980290861682688

  

• https://zeplin.io/features/connected-components/

  

Motivation 🔦

• We have recently started working with a customer who uses MUI Design Kits and have those in Figma libraries, but from a Development stand point, they don't have the component libraries built out for the Engineers. The Engineers are going to the documentation in MUI to find the code snippets but want a fast way to access those, which is where Zeplin's Connected Components capability comes in.

[adrianmanea]

What would be the best format for the code snippet? I think we have two strong examples described above, one would be the extended snippet with the imports:

import * as React from 'react';
import Avatar from '@mui/material/Avatar';

export default function ImageAvatars() {
  return (
    <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  );
}

or simply

<Avatar
   alt={string}
   component={elementType}
   src={string}
   sizes={string}
   src={string}
   variant={string}
/>

I'm more in favor of the second option.

[oliviertassinari]

We can make this a vote:

• 🎉 is full import
• 🚀 is only component.

I'm personally leaning more toward the former option (🎉) so it be copied & paste and work directly.

[oliviertassinari]

An interesting attempt at this: https://twitter.com/jake_albaugh/status/1582404765597646848. It converts the Figma props to how they would look in code based on their name and type.

We could at least use this to normalize all the APIs used in Figma to be closer to the code, e.g. Primary -> primary, Medium* -> medium.

[adrianmanea]

arobert93 created a custom Figma plugin that enables bulk changes to component configurations. It uses LiquidJS as the templating engine to automatically obtain the prop names. The task went from 1 month of work to 1 week 🤓. Let me know if someone needs the plugin!

Input:

import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

export default function CheckboxDemo() {
  return (
    <>
      {%- assign label = Label -%}
      {% if label %}
      <FormControlLabel
        control={
          <Checkbox
            {%- assign checked = Checked -%}
            {% if checked %}
            checked{% endif %}
            color="{{Color | downcase}}"
            {%- assign indeterminate = Indeterminate -%}
            {% if indeterminate %}
            indeterminate{% endif %}
            size="{{Size | downcase}}"
          />
        }
        label="Label"
      />
      {% else %}
      <Checkbox
        {%- assign checked = Checked -%}
        {% if checked %}
        checked{% endif %}
        color="{{Color | downcase}}"
        {%- assign indeterminate = Indeterminate -%}
        {% if indeterminate %}
        indeterminate{% endif %}
        size="{{Size | downcase}}"
      />{% endif %}
    </>
  );
}

Outputs:

import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

export default function CheckboxDemo() {
  return (
    <>
      <Checkbox
        checked
        color="primary"
        size="medium"
      />
    </>
  );
}

[oliviertassinari]

Interesting, It sounds like something we we could push further.

[HowardStredwick]

I'd die in a ditch for this. Our engineers (full stack) just want boilerplate React code, they don't want to have to poke through figma diagrams looking at how something is put together.

The code generated by Anima and the new Figma dev feature is jokes with Material UI, etc, in fact, it's actually dangerous, as we want folks to adopt all the useful stuff in MUI, and Figma's new dev feature pushes them down the vanilla HTML route.

[adrianmanea]

We experienced a small setback due to a recently introduced bug. It appears that Figma trimmed some lines of the description, causing us to lose most of the completed components. This is unfortunate. We plan to re-do this feature during Q3, but it will not be included in the July update.

[adrianmanea]

Another issue when copying the code. It exports brake lines.

https://github.com/mui/mui-design-kits/assets/5917515/74a0944d-8472-4614-b196-db488d48cee7

[adrianmanea]

An update has been developed in collaboration with Figma using a plugin: https://github.com/figma/code-snippet-editor-plugin. It appears to use a templating language similar to what we've used, but it's directly integrated into the Dev Mode. This is a significant improvement over our current method of using component descriptions.

I think we should move the code snippets we have into the Code Snippet Editor.

[oliviertassinari]

To consider if we should do a v2 on this with https://github.com/figma/code-connect

https://www.figma.com/blog/introducing-code-connect/

[adrianmanea]

This is definitely a better option then adding the code snippet in the component description haha.