figma / code-connect

A tool for connecting your design system components in code with your design system in Figma
MIT License
774 stars 58 forks source link

Single import statment with multiple components :: Nested instances #69

Open Meloyski opened 1 month ago

Meloyski commented 1 month ago

Whenever using a nested instance of another component, the example that is pushed out provides two import statements: one for the original component and one for when the nested instance is being used. Is there a way to combine these into the same import statement?

Icon Component

import { Icon } from `@library`;

figma.connect(Icon, 'https://...', {
  props: ...,
  example: (props) => <Icon name="name" />,
});

Button Component

import { Button } from `@library`;

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Label'),
    icon: figma.boolean('Show Icon', {
       true: figma.instance('Icon'),
       false: undefined,
    })
  }
  example: ({ label, icon }) => <Button icon={icon}>{label}</Button>,
});

Button Output in Figma

import { Button } from `@library`;
import { Icon } from `@library`;

<Button icon={<Icon name="name"} >
  Hey
</Button>

Is there a way that this can be combined into a single statement, dynamically?

import { Button, Icon } from `@library`;

...

Sorry, I couldn't find any information on it. Thanks! <3

karlpetersson commented 1 month ago

Hey @Meloyski, thanks for reporting this! There's currently no way to achieve this, just wanted to let you know that we're looking into it.

alisonjoseph commented 3 weeks ago

Just commenting to +1 wanting this feature. 😃

Not a deal breaker by any means, but would be nice if this displayed

Screenshot 2024-07-02 at 10 38 13 AM

like this

import {
  Button,
  ContainedList,
  ContainedListItem,
  Search,
} from '@carbon/react';