What is Adobe XD
Adobe XD is a powerful and highly efficient vector design tool used mainly by User Interface and User Experience designers, so in this blog I will show you how to prototype a simple onboarding screen in Adobe XD. This software was first introduced in 2015 by Adobe Incorporation; a well-known brand that produces design software and tools.
Adobe XD can be used to build responsive interfaces of apps, websites, and any other digital product for any device. It also has an interactive feature that allows you to prototype and create actions inside your design.
It is the best tool for UI design, wireframing, interactive design, prototyping, and high-fidelity designs. In this blog post, I will be explaining with screenshots how to create and Prototype Simple Onboarding Screen in Adobe XD.
Step One: Creating Artboard
- Open your Adobe XD File and create a new document.
- On the left-hand side of your Adobe XD, click on the “Artboard Tool” and select a mobile artboard
Step Two: Create Text
- Select the “Type Tool” on your Tools panel
2. Write your text, in this case, I will be using just “Hi”
- Go to you’re the right panel of your Adobe XD and fill the text with a black color
- Increase the text size by using the slider below the text and align the text to the center of your artboard
Step Three: Design Button
- Select the “Rectangle Tool” and draw a rectangle below your text
- Use the tiny circle inside the rectangle to give your shape curved edges
- Head over to the customization panel and change its color to black
- Duplicate the “ HI” text over the rectangle by holding the ALT Key and dragging the text (Right click and select “Bring to Front” to see the text)
- Edit text to “Get Started” and change color to white and then reduce the text size
Step Four: Creating New Screen
- Duplicate your artboard by holding the ALT Key and dragging the artboard to wherever you want it
- Delete “Hi” and “Get Started” text by just selecting and pressing the delete button on your keyboard
3. Increase the size of your rectangle to cover up the whole artboard and then change the rectangle color
- Drag your brand logo into the second artboard
5. Create a new text; “Welcome Olaniyi” and place it at the bottom center of your artboard
Step Five: Prototyping
- Switch from Design Mode to Prototype Mode on your Adobe XD
2. Select the rectangle button, and drag the wire to the second artboard
3. Go to prototype customization and use the details below
4. Now click on the play button to see what your interaction looks like
So that’s just how to use Adobe XD in creating and prototyping a simple onboarding screen in Adobe XD. If you didn’t understand this, you can watch a video on YouTube to help understand better
Are you interested in learning Adobe XD, watch our Adobe XD for Beginners Tutorial Playlist on YouTube