How to remove Freebox while using Figma to code

Plasmic adds this free box after pasting my button component from Figma and I don’t want it to.

I think free box is created as my Figma component has a layer called “[slot: Label]” with Text inside that layer.

So I tried creating a label prop in Figma instead, but then the text for the label no longer changes the default in Plasmic. I assume I made/named the Figma prop the wrong way. Like should it be called “Content” as in Plasmic the prop is:

I’m using a React Aria Button.

Hi @lincoln_mitchell1

I’m currently looking into this issue.

So I tried creating a label prop in Figma instead, but then the text for the label no longer changes the default in Plasmic. I assume I made/named the Figma prop the wrong way. Like should it be called “Content” as in Plasmic the prop is:

Slots are handled separately from Props so a Figma prop won’t translate to Plasmic slot with the same name.

I’m reviewing why the first slot approach didn’t work.

The docs say slots are actually a type of prop:
"
This includes slots, which are actually a type of prop. If “label” were a Plasmic slot, then a Figma instance with a label of “Hello” will result in a text element inside of that slot that says ‘Hello.’

Source: Importing from Figma | Learn Plasmic

Sorry for the misunderstanding, I thought in your second approach, you added a different type of prop in Figma similar to Plasmic component props (not slots).

Can you also DM the Figma file so I can look at the structure of the Button component?

Thanks.

I can’t send the file from here , so will DM you in Slack.

1 Like

Hi @lincoln_mitchell1

I couldn’t reproduce the issue with the sample figma file you shared on Slack and also with a different Button component I created in my figma file during testing. I suspect the issue might be in Button component in your project. Could you please share your Project Id so we can review it further?

Demo 01

Demo 02

Plasmic Test Project Link

Thanks

Seen as yours works. Can you share your figma file too?

I believe Asim was testing using your Figma file. He just didn’t have the same Button component as is currently in your Plasmic project.

He Slacked me and said he made a new one.

My Figma file works with a copy of his Plasmic file.
So it must be the Plasmic file. Not to worry, I have a PoC now so all good!
Thx guys.