figma
Support for Linking Figma Frames to React Layout Components
Describe the feature you'd like:
We've been using Figma Code Connect to link our design system's React components with Figma designs, and it's been working great for components like Button, Link, Card, etc.
However, I noticed that many Figma designs are composed of Frames, which function as layout components in Figma. In our React codebase, we use layout components like Box, VStack and HStack (depending on the direction) to handle layout.
Is there a recommended way or workaround to link Figma Frames to these kinds of React layout components? If this isn't currently supported, is there a possibility to add this feature in the future?
Additionally, we envision a scenario where a developer can copy-paste a large block of Code Connect code that consists of both layout and other components, streamlining the workflow between design and development even further.
Thanks for your help!
Hey @siddharthkul , thanks for the question -- Just wanted to ask a clarifying question, what are the layout components in question that you're referring to? I'm not sure if they made it to the comment properly.
If the Figma frames themselves can be components (For example, maybe a Frame with Auto Layout is used for lists), you could link those components themselves, and then use helpers like figma.children in order to add the nested elements to be rendered inline.
Hey @siddharthkul , thanks for the question -- Just wanted to ask a clarifying question, what are the layout components in question that you're referring to? I'm not sure if they made it to the comment properly.
If the Figma frames themselves can be components (For example, maybe a Frame with Auto Layout is used for lists), you could link those components themselves, and then use helpers like
figma.childrenin order to add the nested elements to be rendered inline.
Hey @jyyang0,
The layout components I'm referring to are custom components we maintain in our React codebase: Box, VStack, and HStack. These are used to handle layout, similar to how Figma Frames might be structured, especially when using Auto Layout.
In an ideal scenario, we'd like to see Figma Frames automatically convert into these layout components within Code Connect, similar to the structure shown below:
For example, when selecting the overall Frame in Figma and viewing it in Code Connect, it would be great if the tool could auto-detect whether the Frame should map to a <VStack /> or <HStack /> based on the direction of the layout, and apply our spacing tokens for gap and spacing.
I understand that we can use figma.children to manage nested elements, but for our use case, it would be incredibly helpful if HStack and VStack components could be directly code-connected to their Figma counterparts. This would significantly enhance the developer experience and maintain the design consistency we're aiming for.
If we could describe and standardize layout information of frames as "component frames," or "frame templates," it would be awesome. Our designs are filled with thousands of unnamed and haphazardly created frames.
