-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[figma] Show React code snippets in Figma #111
Comments
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. |
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:
Outputs:
|
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. |
Another issue when copying the code. It exports brake lines. MUI.for.Figma.-.v5.14.0.-.Code.Snippets.Bug.mov |
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 馃敠
The text was updated successfully, but these errors were encountered: