Onboarding Screens [UI design and Prototype] - Adobe XD Tutorial

[@pixafzal4719]

Simple, Clean and up to the point, More content in less time, great tutorial !!

[@MaximusTrollerYT]

I'm really struggling to understand how it works the transition of the circle. I understand the same name and hidden, but I cannot make it work.

[@IzeeSmith]

Very helpful

[@ilavbarhefaizah4078]

Where can i get the status bar on figma

[@graysondyerads]

Thank you for this

[@JerrinJames]

You are welcome

[@koyenasaha3846]

On the 3rd screen, the button is not coming up from below. It just fades in, while maintaining it's original position in the 1st screen (inside the frame).

[@JerrinJames]

In order to do that, make sure the buttons on the second and third artboard have the same Layer/group name and are inside the same group as the previous artboard. Copying and pasting the button group might rename the group as an increment from the previous artbaord, so check that.

[@redcreate6485]

Great work. Thx u

[@JerrinJames]

Thanks :)

[@bousselhamkh]

Nice tutorial thank you!

[@JerrinJames]

You are welcome 😊

[@maskman4821]

awesome tutorial !!!

[@JerrinJames]

Thank you

[@sabinalimbu4953]

Hey to make the slider dots(3 dots above start testing) move from one to another (can visibly seen dots moving forward when slider changes). Mine motuon isn't s3en, simply dots appear.

[@JerrinJames]

This is because the name of the moving dot ( layer name, for eg Ellipse 15) isn't same in all art-boards. in order to animate using Auto-animate, the layer names must be the same across all art boards. So try renaming the ellipse to same name in all the three art-boards, then try previewing auto-animate transition.

[@sabinalimbu4953]

@@JerrinJames Thanks done. Very useful. Looking forward to learn from your tutorials.

[@JerrinJames]

Glad it helped 😊

[@nathanasaro9753]

How did you change your art board to rounded corners? At the beginning of the video you showed the finished design with rounded corners. Although throughout the rest of the video your whole design have squared corners.

[@JerrinJames]

Did you mean before the intro? It was done to just represt the result and I used after effects for it. You can basiaclly use any similar video editing software. I have even made a video explaining how to do that, attaching the link here. Hope this helps. kzbin.info/www/bejne/hJ2ocmB5pZ10l6c

[@aishamanoo1356]

how did you resize circle to go out of artboard automatically my is just getting bigger in size

[@JerrinJames]

I already had that circle hidden behind the button from the previous artboard.

[@Manzaniatico]

Amazing

[@JerrinJames]

Thanks

[@codingright]

Great video! Thank you.

[@JerrinJames]

Glad you liked it!

[@juniorappinventor8167]

which plugin use for status bar

[@JerrinJames]

I haven't used any plugins in particular.

[@kcrcks]

Thanks

[@jayabhabhi325]

From where u get that vector assets..??

[@JerrinJames]

Its from a website called UnDraw, there is also a free plugin for it in Adobe XD.

[@jayabhabhi325]

@@JerrinJames can u tell me that plugin name..

[@rahulrajeev9]

Awesome!!

[@JerrinJames]

Thank you :)

[@Gusgitgud]

Thanks !!

[@JerrinJames]

You're welcome!

[@tharunishaan3306]

I'm having trouble getting the assets and also I couldn't get the UI kits when I'm pressing on getting UI kits and downloading for xd but it's in a .dmg file and I couldn't find anywhere while trying to import please help me

[@JerrinJames]

Those are for Mac, not for Windows. You have to specifically select the files for Windows. XD UI kits are supported in both Mac and Windows

[@tharunishaan3306]

Jerrin James tha sk for the clarification. where do I find the kits for windows ??

[@JerrinJames]

@@tharunishaan3306 docs.microsoft.com/en-us/windows/uwp/design/downloads/ You can download the UI kit for XD from the following link.

[@akashjacob8936]

That's very helpful 😊

[@JerrinJames]

Thank you 😁

[@szayel]

Awesome Can we export this design as a mobile application without using code with this method?

[@JerrinJames]

I'm afraid it's not possible. There are plugins with which we can convert this design into code. Adobe XD files are just design files. We cannot create a mobile application with that.

[@szayel]

@@JerrinJames Which plugin i need ? This method only using for demo, i think

[@aishamanoo1356]

@@szayel web export(plugin) for web design code and xd to flutter(plugin) for application code or just watch the tutorial from the channel name punit chawla

[@JerrinJames]

Web Export and XD to Flutter Plugin works. If you are interested I can made a tutorial on those.

[@aishamanoo1356]

@@JerrinJames yeah sure make tutorial on this

[@arasucg]

Thanks. I tried the dragging option for carousal, but unable to revers transition from the 3rd to 2nd. How to achieve?

[@JerrinJames]

That's a cool idea, making use of the drag transition in XD. You might have made the elements for all 3 screens into one single group and dragged them. This would work from dragging from 1 to 2, 2 to 3 and 3 back to 1. If you display some elements from the previous or next screen every artboard and set that element inside the group as a trigger, then you can swipe back from 3 to 2. If you have make the connections accordingly.

[@hozmrimed7655]

شكراااا

[@JerrinJames]

مرحبا بك

[@lichardryth]

I cannot listen to tutorials with these robot voices :/

[@renatoalencar4451]

This robotic voice is awful

[@JerrinJames]

Yeah, it is. Planning to shift to my original voice soon.

[@renatoalencar4451]

@@JerrinJames That would be awesome.