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’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Combine properties from nested instances #11
Comments
Hi @andreiduca, thanks for raising this and for such a clear explanation of the use case. I agree that this would make sense – I'm going to raise this topic with the team for discussion as to how best we might support it. |
Want to +1 this request, we have lots of nested instances in Figma whose properties don't map to a separate component in our codebase. |
Is it possible to export the
Because sometimes the button label is not a property of the Button, it's just a Text node, and the icon also it's just a Icon instance inside the Button. we probably need to extract some information from the node. |
@coodersio unlikely something like that will work, since the code in the See this comment for more info: #14 (comment) which references this piece of doc: https://github.com/figma/code-connect/blob/main/react/README.md#basic-setup
|
Commenting for support. My enterprise team uses nested, base components to simply our Figma components. If this becomes available, this will be a game changer for us. We are considering reverting to an older branch without our base components, to support Code Connect. This has been our number one requested feature from our developers since we transitioned to Figma. Regardless, really excited about Code Connect. |
+1 on needing this functionality to truly be able to utilize Code Connect. Many of our components in Carbon are built differently in Figma vs. React. For example for Accordion, in React the figma.connect(
Accordion,
'https://www.figma.com....',
{
props: { children: figma.children(['Accordion item']) },
example: ({ children }) => (
<Accordion>{children}</Accordion>
// need to be able access properties from the Accordion item
// <Accordion size={size} isFlush={isFlush} align={align}>{children}</Accordion>
),
}
); figma.connect(
AccordionItem,
'https://www.figma.com...',
{
props: {
title: figma.string('Title text'),
disabled: figma.enum('State', {
Disabled: true,
}),
open: figma.boolean('Expanded'),
content: figma.string('Content text'),
children: figma.instance('Swap slot'),
size: figma.enum('Size', {
Large: 'lg',
Medium: 'md',
Small: 'sm',
}),
isFlush: figma.boolean('Flush'),
align: figma.enum('Alignment', {
Left: 'start',
}),
},
example: ({
title,
disabled,
open,
content,
children,
// size, needs to be set on Accordion
// isFlush, needs to be set on Accordion
// align, needs to be set on Accordion
}) => (
<AccordionItem title={title} disabled={disabled} open={open}>
{content}
{children}
</AccordionItem>
),
}
); |
We use base components in our Design System, and we expose properties from nested components so they can be combined with properties from the main component.
We have a basic
Icon
component with aSize
enum and anIcon ID
instance swap.We use it in a
.button-shape
base component as both anIcon
and aTrailing Icon
. We expose its props in this base component.We then use the base button to build the actual
Button
component, and we expose all its props (including the icon props). The final variants and states are defined at the main component level.With this setup, I couldn't find a way to combine the
.button-shape
props with theButton
props, since in code we only have a singleButton
component without a baseButtonShape
. I can excludeIcon
, since we pass that as a child rather than via a prop.I know we can combine multiple Figma components to a single React component, and likewise multiple React components to a single Figma component. But it would be great if we could also map props from nested instances to a single React component.
Something like this maybe:
The current workaround I tried is to map both
Button
and.button-shape
Figma components to the sameButton
React component. But this is less than ideal since it ends up showing as nested<Button>
components.Side note: I see the hierarchy is also not respected, since
Icon
should be a child of the innerButton
next to the label.The text was updated successfully, but these errors were encountered: