Adobe Xd Basics Tutorial #3 - The Welcome Screen in Xd
Key Takeaways
Introduces Adobe Xd from scratch
Full Transcript
in this video i want to show you the start the screen of adobe xd how it looks and what it does so if you go back to here you can click open next to adobe xd and it's going to launch this which is called starter screen now start screen does many different things but basically what it does is it helps you navigate the ui quickly and it helps you understand and reach all of these things much quicker than if you didn't have this start to screen so starting from here we are home so this is your home screen you can see the plan you are on and i'm on a starter plan for this demonstration because i just want to show you that on free plan you can actually achieve majority of these things that they are located in the free plan in the paid plan sorry as well but you have some limitations and we're going to talk about them a little bit later next we have learn and this is just a learn tab from adobe xd team so you can click right there to access the tutorials and stuff like that and you can also do it by clicking on any one of these links so you can quickly jump and learn more about any one of these features next what we have is we have cloud documents now because xd is cloud-based app all of the documents which are located in your cloud and depending of which plan you have is it a free or a paid plan you will have a bigger or smaller storage in the cloud you can access them right there shared with you are cloud documents which are shared with you by your teammates clients developers whoever else and deleted are obviously the files you have deleted you can manage links because you have a single link to share on a starter plan on a free plan and you have unlimited sharing possibilities on the premium plan then you can simply manage links you can block visitors from accessing those links you can delete links you can update links you can manage them all right here as i said in the starter plan you have just one link to share and in a premium plan you have unlimited links then below that we have on your computer and you can click right here to open up photoshop or adobe illustrator files sketch files or xd files and we are going to talk about that in a separate lesson because i want to share the differences between those right here what we have are common artboard sizes so usually all of these are boards are used by majority of designers in the industry so right here on the left we have phone and tablet sizes if you click right here you can access all of the most common dimensions and as all of these devices are updated as new iphones for example come out or a new google pixel phones come out the adobe xd team is going to update them right here if they require update because sometimes these manufacturers don't update the sizes of their devices they're just using the same size for the future device they're going to launch next to that we have common web design sizes so we have 1920 we have 1366 and we have 1280 obviously there are some differences there but not that major you can choose any one of these and we're going to talk about that in the airport lesson a little bit later we have instagram story we have instagram posts so all of these are social media sizes if you're creating for social media and finally we have custom size so you can enter any kind of size you want in order to open it up and below that we have just some recent documents that we opened on this device if you didn't open anything recently then this is going to be blank until you open it as i said this is a starter plan but you can click right here to upgrade it to premium plan if you don't have it and for this demonstration i'm just going to click right here to open up this 1920x1080 size and in the next lesson we're going to talk about interface what all of this is and how to navigate your way around adobe xd so i'll see you there
Original Description
🐱👤 Subscribe to the Alex On Design YouTube channel: https://bit.ly/3hB6rsz
🐱👤 Alex On Design Website: https://bit.ly/3xE14yi
🐱👤 Envato Elements: https://bit.ly/3AYYepp
-------------- Net Ninja Links:
🐱💻 My Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/
🐱👤 Get access premium courses on Net Ninja Pro:
https://netninja.dev/
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
Related Reads
📰
📰
📰
📰
Building Video Recommendation Graphs With Apache AGE and Cypher
Dev.to · ahmet gedik
DeepSeek V4 API Pricing Explained: Pro vs Flash, and How to Call Both With One Key
Dev.to AI
What the VPA Recommender Is Actually Computing (And Why It Disagrees With You)
Dev.to · Prasad MK
AI Watermark Remover: How EzMaker AI Turns Messy Images into Usable Assets
Dev.to · Lily Chen
🎓
Tutor Explanation
DeepCamp AI