Adobe Xd Basics Tutorial #3 - The Welcome Screen in Xd

Net Ninja · Beginner ·🛠️ AI Tools & Apps ·4y ago

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 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

Related Reads

📰
Building Video Recommendation Graphs With Apache AGE and Cypher
Learn to build video recommendation graphs using Apache AGE and Cypher, replacing complex SQL self-joins
Dev.to · ahmet gedik
📰
DeepSeek V4 API Pricing Explained: Pro vs Flash, and How to Call Both With One Key
Learn how to optimize DeepSeek V4 API usage by understanding Pro vs Flash pricing and using a single key for both variants
Dev.to AI
📰
What the VPA Recommender Is Actually Computing (And Why It Disagrees With You)
Understand what the VPA recommender computes and why it may disagree with you, to improve your usage and configuration of VPA
Dev.to · Prasad MK
📰
AI Watermark Remover: How EzMaker AI Turns Messy Images into Usable Assets
Learn how EzMaker AI removes watermarks from images, enabling businesses to reuse and repurpose visual assets efficiently
Dev.to · Lily Chen
Up next
How to Create the Viral Screen Peel Effect
Alicia Lyttle
Watch →