How to make your screen mockups using Artboard Studio Mockups on Figma

[@michaelneftali8711]

Not what i was expecting. I thought I'd get an explanation on how you made the mockups on your thumbnail.

[@iamthecatalyst.987]

you can just drag and drop into the frame instead of adding text etc....try again and drag it so the name at the top enters the frame ....it will automatically appear in the new frame as with any artboard.

[@ivonaneubeck9966]

No, unless Figma improved by now, I was not able to drag and drop it by many attempts , which is why I made this video.

[@ogunniyidestiny5940]

This was so helpful. Artboard studio mock-up

[@marianaramos7427]

Thank you so much. I was having a really hard time figuring out how to do this and you helped me so much!!!

[@ivonaneubeck9966]

Amazing! I know, it was a pain for me too but happy we got it to work:)

[@dexfalt]

Thank you so much !

[@stevenmiles859]

Thank you so much! This was so helpful!

[@AlovuddinKambarov]

Thanks

[@mawusik.2901]

Super helpful, thank you!!

[@ivonaneubeck9966]

Happy this could help! :) You are very welcome !

[@ellistikalelproperties2403]

awesome

[@aransom04]

I don’t understand how you made it look like the template in your thumbnail though. Can you explain that part?

[@ivonaneubeck9966]

Hi Alyssa! Sure can! Once I got all those mobile screen mockups ready, I created a frame and manually arranged all of them so they look this way. It took me a little bit also, I used lines as a point of reference to make them look even. Unfortunately I don't know easier way to arrange the screens than that, hope this helps!

[@juliavera7768]

@@ivonaneubeck9966 Can you make a video explaining the process? It would be very helpful!

[@EngineerBilalMaqbool]

please clear sound and also edit the video after recording... it seems raw video and upload.

[@stefaniavega3222]

Rápido y súper útil!

[@therealsholz]

Thanks!👍🙏

[@ivonaneubeck9966]

You are welcome :)

[@iqrairshad2525]

I didn't understand how you fit the screen on the mockup screen

[@ivonaneubeck9966]

Hi! Sorry, I didn't realize I would even get any comments here - the process of fitting the screen on the mockup screen starts at 3 min in this video. Basically you have to put any item on the white screen in order for it to have the option of adding more items (in this case that would be the screen I designed). Once you add any item into the white screen frame, you will see the triangle icon next to this frame on the left layers panel meaning now you can add your designed screen in there.

[@DianaUdom]

do you need to have an account with artboard studio mock up before you can use them?

[@ivonaneubeck9966]

I can't remember setting up one. I just got it as plug in.

[@MeowfaceMusic]

1:16 But how are we supposed to know what the sizes are? Can we search for particular sizes?

[@ivonaneubeck9966]

I found a correct frame size by trial and error, I didn't find sizes being specified on that plugin. So just keep clicking on them until you find the one that matches the size of your prototype :)

[@MeowfaceMusic]

@@ivonaneubeck9966 Bummer. Artboard Studio scratched off list. Thanks for getting back : )

[@mayajamak]

just hit k and scale it.