[BUG] Breaking Components

[RukmaPratista]

Hi, we like your PageClone plugin, really helpful for archiving. Found a bug today though.

After I clone a page, I realized that some components are breaking. Not sure why. Please check the attached images.

Also, I agree with this https://github.com/stevahnes/figma-plugins/issues/8, detaching style as well would be great.

Before:

After:

[stevahnes]

Hi Rukma! Thank you for highlighting this. Seems like deep nested components/instances that are hidden are not getting hidden. I will try to look into this ASAP :)

[RukmaPratista]

Terima kasih. 👍

[stevahnes]

Hi @RukmaPratista, I think I found the bug. I have released a new version. Please help test ya :) It should be version 2.2.2.

[stevahnes]

Sorry fixed another bug that might impact you. Please use 2.2.3 😊

[RukmaPratista]

Whoa, that's quick. Thanks. Anyway, I've tried the latest version, and I've got another problem. Check these screenshots, I've marked the differences.

Before:

After:

[stevahnes]

Hi @RukmaPratista, seems like the "clone" function does not clone specific node's properties. I have added them into the logic. Can you verify again? The version now is 2.2.4 :) If you notice anything wrong with texts, also please let me know :)

[stevahnes]

Hi @RukmaPratista have you tried the latest version?

[RukmaPratista]

Hi @stevahnes, sorry, I've tried it the other day but forgot to tell you the result. Unfortunately, I still get the same error from last time. But I'm not too sure, do I need to restart Figma to get the updated plugin? If I remembered it correctly, I didn't restart Figma that time to test 2.2.4. I'll let you know after I test it once more later.

[stevahnes]

Hi @RukmaPratista, I see.. Well I think it might take me a while to debug this one again. If it's okay with you, can you help provide the following information:

1. Is the button an instance or a main component?
2. Can you screenshot for me the righthand property panel of the button?

I will need to get to the bottom of why the clone function doesn't carry over the modifications made for the buttons :) Thank you!

[RukmaPratista]

Ok, let me answer that.

1. It's an instance.
2. Screenshots are as follows.

Before:

After:

One more thing, I tried to clone a page with a lot of frames. It seemed that the plugin had finished the job, but it didn't close by itself. But it's not the case after I tried it once more and only selected few frames.

It seems that you've made it to detach the styles as well. Nice!

[RukmaPratista]

Hi @stevahnes, is there any update? :)

[stevahnes]

Hi @RukmaPratista apologies I've been caught up with several trainings on my end. I will try to deliver a fix by end of next week, if that's okay with you? :)

[RukmaPratista]

Haha, that's okay my friend. It's not like I'm paying you to fix this bug. It's your plugin and you can do whatever you want with it, although my work kinda depends on it, hahaha. Anyway, if you accept a donation for this project, I'd be happy to chip in. Just let me know.

[stevahnes]

Thanks for understanding! No" I'll definitely try to fix it ASAP knowing that others' work depends on it. I am doing this for fun for now so I am happy you found a good use for it! :)

[thewinger]

Hi Just wanted to let know that I also am having this issue.

In my case I'm losing borders and radius of instances inside of a variant-instance. Just it helps pinpoint the issue.

[stevahnes]

Thank you @thewinger! I'll do my best to figure this tricky bug. Your information definitely helps! Will keep working on it!

[stevahnes]

Hi All, I am planning a dedicated session to look into this bug this coming Wednesday; will post my findings here :) Thanks again for your patience and for providing as much detail as possible!

[stevahnes]

Hi @RukmaPratista and @thewinger, I have just released PageClone 2.2.5. Please take a look and see if it solves your issue. I think Rukma's should be solved as I understood and managed to replicate the issue :)

[thewinger]

In my case now it brakes but in a different case. This is the original screen

The first time I used the plugin this was the result, borders disappeared

This is the new result, borders stay but resizing was messed up

[stevahnes]

@thewinger can you outline to me what the node structure is? (E.g. instance --> frame --> Rectangle). A screenshot will be great if you're okay 🙂

Essentially the clone function doesn't clone everything so i need to know what's safe to copy manually and what isn't.

[thewinger]

In some cases it's modifying the padding numbers of the autolayout

And other is also modifying the resizing, apart from the padding

[stevahnes]

Ah okay. I left out some autolayout properties. Let me try adding them tomorrow and see if it fixes it 😊

[stevahnes]

@thewinger I just release 2.2.6. I tested it with my company's mockups that contains auto-layout and it works fine :) Please let me know if it doesn't!

[RukmaPratista]

Hi @stevahnes , thanks for working on the issues. I've tried your latest update. I have 2 issues:

1. The plugin took forever to complete and I had to terminate it prematurely. I don't think the frames are too complex, as you can see from my screenshots.

2. It added a frame or element that isn't part of my design (or part of my design but misplaced, I'm not sure)

Before: https://cln.sh/firzeq

After: https://cln.sh/7bHzej

[stevahnes]

Hi @RukmaPratista, for (2) when you terminate the plugin prematurely it stops the cloning. Hence the misplaced item, which was probably still being processed and about to be placed in the right frame. If you see the cloned frame, you will find that some of the instances are still linked to the main component.

For (1), the plugin takes long because when we detach the instance, we literally recreate the component, and then copy the individual attributes to the new clone. I have yet to find a way to do this faster, apologies! However, as long as no error is thrown, the plugin runs fine :) Figma will throw an error if something is wrong.

[thewinger]

@stevahnes I just tried it out and can confirm that the result is the one expected and the plugin was fast. Thank you!

[stevahnes]

@thewinger great happy to hear that! :) It might get laggy when the frames has a lot of sub-frames and components/instances. But as long as there's no error thrown it should work fine :) Figma will throw error if something is wrong (it will pop-up as a banner below).

[stevahnes]

A note for both @thewinger and @RukmaPratista, if the plugin takes too long to run, I think Figma may throw a timeout. In that case, consider cloning the frames in batches. You can select to clone to an existing page instead of creating a new one, so cloning in batches is possible.

[RukmaPratista]

Hi @stevahnes, I made a video to show you. At first, I only chose 4 frames from total 6 frames which are quite similar in terms of complexity. I had to terminate this first attempt because it feels like forever compared to the second attempt. In the second attempt, I only chose 2 frames and it was really fast. I was expecting that the first attempt would only take twice as much time as my second attempt.

The video duration for the first attempt is only 2:35 because I was reluctant to upload a big video file. But actually, it took a much longer time than that (and I had to end it prematurely as well).

First attempt: https://cln.sh/wWvXOq Second attempt: https://cln.sh/FVIzsu

[stevahnes]

Hi @RukmaPratista thanks! The first video shows that something broke (the plugin shouldn't zoom into the page before the clone is completed). Are you okay with doing the following:

1. Open console (in Figma we can do that, it's in the menu)
2. Run the plugin for scenario 1 again
3. Screenshot the error thrown in the console?

I'll try to find a resource on mine that'll trigger the same error as well. Thanks!

[RukmaPratista]

Here you go:

[stevahnes]

Ahhhh! Okay I thought I checked for all of these! Sorry I did it this morning before work, might've missed something.. I'll check and release another version tonight. Apologies!

[stevahnes]

Hi @RukmaPratista, published 2.2.7... i didn't know that Stars, Polygons, etc can have mixed cornerRadius too. I've done the check in the code. The error should be fixed. Please let me know!

[RukmaPratista]

Hi @stevahnes, the problem still persists. However, it seems the error code is different.

[stevahnes]

Hi @RukmaPratista looks like a small typo on my end but decided to do a strict number type check nonetheless. 2.2.8 is released! I hope it fixes it this time :)

[RukmaPratista]

Hahaha, this bug still persists… https://cln.sh/qCl3eU

[stevahnes]

@RukmaPratista no way!

I think it's something on the Annotation Frame. Do you mind showing what's inside that frame/component? I thought I'd handled anywhere cornerRadius pops up :(

I can see that you have mixed radius for this particular component/frame (bottom left is 0 and the others are some value). Just need to ensure it's handled :)

I'd like to reconstruct that frame in my Figma if that's okay with you.

You can email the screenshot to me at stevanus.satria@gmail.com if you prefer.

[stevahnes]

Hi @RukmaPratista, I went ahead and tried all shapes that can have the corner radius property, and I went to ensure they are all not uniform (e.g. top left 10 and bottom right 20).

And they clone just fine:

Will really need to know your file structure so I can try to reproduce the issue :) Thank you!

[RukmaPratista]

I think it's something on the Annotation Frame. Do you mind showing what's inside that frame/component? I thought I'd handled anywhere cornerRadius pops up :(

I can see that you have mixed radius for this particular component/frame (bottom left is 0 and the others are some value). Just need to ensure it's handled :)

I don't think that was the case. As you can see from my previous 2 screen-captured videos, both first and second attempts tried to clone Annotation frames. The only differences between those frames are their contents: text, icon, and color.

However, I have good news. Your plugin worked flawlessly this morning! HOORAY! I'm not sure why, haha. I don't change my design or frames and I even selected all 6 frames from my testing page.

It still feels slow for pages with lots of frames though. Some attempts to clone those pages need me to terminate the process prematurely as well. I hope you can improve it somehow. Also, if there's any way to clone the prototype settings, that would be awesome.

Anyway, thank you for your support @stevahnes, really really appreciate it. 👍👍👍 My offer still intact, if you're opening sponsorship to develop this plugin, please let me know. Don't expect too much, haha, but I hope I can be helpful in some ways.

[stevahnes]

@RukmaPratista you just made my day and maybe week! Glad that it works now 😄 I will ask some of the other Plugin Creators on feedback to speed up the cloning process. Let's see! Will also try to take a look at the prototype settings feature.

I will close this ticket for now ya. If anything else comes up, please do not hesitate to open another ticket. @thewinger same goes to you!

Thank you for the offer as well. If I do end up setting up some preferred way to get sponsorship, I'll let you know? Haha... But I am just happy the Plugin helps the wider Figma community. Thank you again, and good day!

[RukmaPratista]

Thank you for the offer as well. If I do end up setting up some preferred way to get sponsorship, I'll let you know? Haha... But I am just happy the Plugin helps the wider Figma community. Thank you again, and good day!

Yes, feel free to let me know, @stevahnes