Figma to Plasmic plugin not working completely.

Plasmic Studio Questions
1

Hiiiii! :blush:

We’ve been able to register some Shadcn code components. However while we are able to use the Figma to Plasmic plugin to move over some components the plugin isn’t working completely well.

Take for instance this breadcrumb component in Figma.

Screenshot 2024-10-10 at 12.26.23 PM

When we move the breadcrumb over using the Figma to Plasmic plugin, this is what it looks like this in Plasmic

Screenshot 2024-10-10 at 12.29.39 PM

All the breadcrumbs doesn’t move over. We have the same issue with other components.

Would anyone have a suggestion as to how to solve this problem?

Thank you in advance! :blush:

Relevant links:

2

When you use Plasmic Figma plugin, it copies some data to your clipboard, which then gets copied to Plasmic. Can you re-run the Plasmic Figma plugin and paste the contents of the clipboard here?

3

I’m very grateful Jason!

Here it is :blush:

{“__clipType”:“application/vnd.plasmic.clipboard+json”,“clipId”:“f98aca75-866d-4a15-b77e-e2d29457c439”}

4

@jason I hope you are good. Just wondering is there is an update on this kind sir :blush:

5

@jason I think you must be have been busy. I’m following up on this.

@muhammad_asim Might you have any insights into this?

6

Hey, so sorry for the slow response. @fmota will follow up on this issue soon.

1 Like
7

Hi, could you provide a fresh data reference? This one is already invalid, if possible could you also include a video showcasing the issue while trying to paste the content?

1 Like
8

Hi @fmota! :blush: Thank you so much @jason!!

I’m very grateful!

Below is the clip and a copy of the clipboard data.

I tried copying a button and breadcrumbs as you will see in the video

Video

Button clipboard data: {“__clipType”:“application/vnd.plasmic.clipboard+json”,“clipId”:“f104590d-b0aa-413d-93bf-8caecf1eb81d”}

Breadcrumb clipboard data: {“__clipType”:“application/vnd.plasmic.clipboard+json”,“clipId”:“9afe5004-4d5e-4f77-bb59-d65fbb7458da”}

9

Hi, for handling slots in the figma importer we require a naming convention to be applied in the layers in figma designs. You can read more about it in Importing from Figma | Learn Plasmic. Your current design doesn’t follow the pattern, in a quick glance you should also include Breadcrumb List in your designs. It’s appearing 3 elements because this is the default value of your Breadcrumb component.

It’s not clear to me the issue here, Plasmic is correctly using the specified width in the figma designs.

1 Like
10

I’m very grateful @fmota

We will discuss as a team and implement.

11

@fmota

Thank you for this. Just a request, would the Plasmic team have a visual example of how to achieve this: Importing from Figma | Learn Plasmic

A visual example would be good, if possible, as English is not the first language for all designers :blush:

12

@fmota I want to thank you for your help and I would also like to share this with the community for others so they can make the Figma to Plasmic plugin work.

Figma to Plasmic Plugin Video demonstration

13

Hi, thanks for sharing. An additional note is that you don’t need to name your button component in figma with the [slot] suffix, you only need to do it for the text.

14

I’m very grateful for your clarification @fmota ! :blush:

15

Hi @fmota! :blush:

I hope you are good. I’m very grateful for the help you offer earlier!

Just a little question, we’ve been able to get the figma to plasmic component to work but we haven’t been able to get the Figma colors to transfer over to Plasmic.

Would there be a quick sample e.g. of a button and the associated code that we could see so we know exactly what to do to effectively move props like color from Figma to Plasmic?

I am very grateful in advance!