Closed oliviertassinari closed 8 months ago
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.
We can make this a vote:
I'm personally leaning more toward the former option (🎉) so it be copied & paste and work directly.
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
.
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"
/>
</>
);
}
Interesting, It sounds like something we we could push further.
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.
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.
Another issue when copying the code. It exports brake lines.
https://github.com/mui/mui-design-kits/assets/5917515/74a0944d-8472-4614-b196-db488d48cee7
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.
To consider if we should do a v2 on this with https://github.com/figma/code-connect
This is definitely a better option then adding the code snippet in the component description haha.
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 🔦