Adobe Max: Fun, New Toys in Adobe XD

UX UI design web banner design

ADOBE MAX: FUN, NEW TOYS IN ADOBE XD

by Evan-Zane Green

One of 2020’s only good highlights was that Adobe Max was open to everyone, as opposed to previous years when it was you had to pay to go to the event. That means that all of our favourite Adobe products got some awesome upgrades. I am going to introduce you to some of my personal favourites from the ones that were released for Adobe XD, as well as some of the ones that were discussed at the conference, and show you how they can be used for your next design project. So, without further ado, let’s see what goodies Adobe has given us for Adobe XD.

This is most likely self-explanatory but I will say it anyways: If you haven’t upgraded your Adobe software, you should. Otherwise you will miss out and, trust me, you don’t want to. That being said, let’s get into the list of the most interesting updates that came out of Adobe Max:

3D Transforms

One of Adobe XD’s newest and, in my opinion, one of the most intriguing, is the ability to take two-dimensional elements and move, rotate and scale them in three-dimensional space. With this new update, designers can do things like make menus that move in 3D space depending on its position on the screen. Doing things like this can help to guide the eye of the user to the most important part of the menu (or the page as a whole). This update allows timed animations to work in three-dimensions as well as two-dimensions. Not to mention the fact that since “augmented reality and virtual reality are becoming the norm” (Shorten), this opens up a new realm of possibilities.

3D Transform Eg

Sharing Design Libraries

Design libraries are now easier than ever to create and share. In the libraries panel in Adobe XD you can add colours, character styles and components to your library and, when you are done, you can share it with whoever is working on the project. This is great because no matter how many people are working on a project you will always be able to keep consistent design guidelines. Even when changes are made, each person can choose whether to accept them or not. “Every member of your team plays a different role” (Shorten) so now you can determine how much control each member needs to have over the library. It helps to keep every aspect of the project streamlined no matter how large the team, or the scope of the project, gets.

Shared Libraries Eg

Adobe XD Plugin for Visual Studio Code

Visual Studio Code now has an Adobe XD plugin. Design is a team sport and your team isn’t just made up of other designers. This plugin makes it easier to communicate with developers. By sharing their Adobe XD libraries, designers allow developers to use this plugin to find out details about the design that will be needed for the developers to bring the design to reality. Developers can find out how a specific object is meant to look and convert that to whatever coding language they need from within Visual Studio Code.

Nested Components

In this new update you can add components to other components to make a more robust design. An easier way to think about it is like a document, inside of a folder, inside of a file cabinet, each element builds on top of the other. Imagine a component that gives you the title of an ebook and its author (well you don’t have to imagine it, an image is below this paragraph). Now combine that with a heart icon component so that you can favourite the book and a download icon component so that you can read it offline. It makes for a larger component that can hold everything and allows for the smaller component to do more without interfering with the other elements.

Nested Components Eg

Padding

This one is a little bit of a cheat. It was released before Adobe Max. However, it was discussed there and I love it. Padding is the space between elements. Adding padding, while combined with the stacks feature in Adobe XD, allows you to maintain an object’s spacing with other objects no matter how much the size of the objects change. This would be perfect if you are creating menu items and you want to maintain the spacing between them whether or not the food description is two sentences or five sentences long.

Padding Eg

Again these are just my favourite updates but there are many other interesting things that Adobe XD now allows you to do. Some honourable mentions are:
Supporting Components States in Design Specs – Developers can now see the various states that a component has and look for their design specifications so that they can create the code for them.
Collaborate Together in Real Time – Let everyone in your team collaborate on the same project at the same time and sync the changes with the cloud.
This is just the tip of the iceberg though. Read through all of Adobe XD’s newest features on Adobe’s website.

Sources

  • Shorten, Andrew. October 2020 Release of Adobe XD: Get to Final Faster with 3D Transforms, Creative Cloud Libraries, Visual Studio Code, and More. 20 Oct. 2020, blog.adobe.com/en/2020/10/20/xd-october-2020-update-3d-transforms-libraries-panel-more.html.
  • Unknown. “Auto-Height Text Container.” Video.tv.adobe.com, video.tv.adobe.com/v/41290t1/?captions=eng.
UX UI design web banner design

ADOBE MAX: FUN, NEW TOYS IN ADOBE XD

by Evan-Zane Green

One of 2020’s only good highlights was that Adobe Max was open to everyone, as opposed to previous years when it was you had to pay to go to the event. That means that all of our favourite Adobe products got some awesome upgrades. I am going to introduce you to some of my personal favourites from the ones that were released for Adobe XD, as well as some of the ones that were discussed at the conference, and show you how they can be used for your next design project. So, without further ado, let’s see what goodies Adobe has given us for Adobe XD.

This is most likely self-explanatory but I will say it anyways: If you haven’t upgraded your Adobe software, you should. Otherwise you will miss out and, trust me, you don’t want to. That being said, let’s get into the list of the most interesting updates that came out of Adobe Max:

3D Transforms

One of Adobe XD’s newest and, in my opinion, one of the most intriguing, is the ability to take two-dimensional elements and move, rotate and scale them in three-dimensional space. With this new update, designers can do things like make menus that move in 3D space depending on its position on the screen. Doing things like this can help to guide the eye of the user to the most important part of the menu (or the page as a whole). This update allows timed animations to work in three-dimensions as well as two-dimensions. Not to mention the fact that since “augmented reality and virtual reality are becoming the norm” (Shorten), this opens up a new realm of possibilities.

3D Transform Eg

Sharing Design Libraries

Design libraries are now easier than ever to create and share. In the libraries panel in Adobe XD you can add colours, character styles and components to your library and, when you are done, you can share it with whoever is working on the project. This is great because no matter how many people are working on a project you will always be able to keep consistent design guidelines. Even when changes are made, each person can choose whether to accept them or not. “Every member of your team plays a different role” (Shorten) so now you can determine how much control each member needs to have over the library. It helps to keep every aspect of the project streamlined no matter how large the team, or the scope of the project, gets.

Shared Libraries Eg

Adobe XD Plugin for Visual Studio Code

Visual Studio Code now has an Adobe XD plugin. Design is a team sport and your team isn’t just made up of other designers. This plugin makes it easier to communicate with developers. By sharing their Adobe XD libraries, designers allow developers to use this plugin to find out details about the design that will be needed for the developers to bring the design to reality. Developers can find out how a specific object is meant to look and convert that to whatever coding language they need from within Visual Studio Code.

Nested Components

In this new update you can add components to other components to make a more robust design. An easier way to think about it is like a document, inside of a folder, inside of a file cabinet, each element builds on top of the other. Imagine a component that gives you the title of an ebook and its author (well you don’t have to imagine it, an image is below this paragraph). Now combine that with a heart icon component so that you can favourite the book and a download icon component so that you can read it offline. It makes for a larger component that can hold everything and allows for the smaller component to do more without interfering with the other elements.

Nested Components Eg

Padding

This one is a little bit of a cheat. It was released before Adobe Max. However, it was discussed there and I love it. Padding is the space between elements. Adding padding, while combined with the stacks feature in Adobe XD, allows you to maintain an object’s spacing with other objects no matter how much the size of the objects change. This would be perfect if you are creating menu items and you want to maintain the spacing between them whether or not the food description is two sentences or five sentences long.

Padding Eg

Again these are just my favourite updates but there are many other interesting things that Adobe XD now allows you to do. Some honourable mentions are:
Supporting Components States in Design Specs – Developers can now see the various states that a component has and look for their design specifications so that they can create the code for them.
Collaborate Together in Real Time – Let everyone in your team collaborate on the same project at the same time and sync the changes with the cloud.
This is just the tip of the iceberg though. Read through all of Adobe XD’s newest features on Adobe’s website.

Sources

  • Shorten, Andrew. October 2020 Release of Adobe XD: Get to Final Faster with 3D Transforms, Creative Cloud Libraries, Visual Studio Code, and More. 20 Oct. 2020, blog.adobe.com/en/2020/10/20/xd-october-2020-update-3d-transforms-libraries-panel-more.html.
  • Unknown. “Auto-Height Text Container.” Video.tv.adobe.com, video.tv.adobe.com/v/41290t1/?captions=eng.
UX UI design web banner design

ADOBE MAX: FUN, NEW TOYS IN ADOBE XD

by Evan-Zane Green

One of 2020’s only good highlights was that Adobe Max was open to everyone, as opposed to previous years when it was you had to pay to go to the event. That means that all of our favourite Adobe products got some awesome upgrades. I am going to introduce you to some of my personal favourites from the ones that were released for Adobe XD, as well as some of the ones that were discussed at the conference, and show you how they can be used for your next design project. So, without further ado, let’s see what goodies Adobe has given us for Adobe XD.

This is most likely self-explanatory but I will say it anyways: If you haven’t upgraded your Adobe software, you should. Otherwise you will miss out and, trust me, you don’t want to. That being said, let’s get into the list of the most interesting updates that came out of Adobe Max:

3D Transforms

One of Adobe XD’s newest and, in my opinion, one of the most intriguing, is the ability to take two-dimensional elements and move, rotate and scale them in three-dimensional space. With this new update, designers can do things like make menus that move in 3D space depending on its position on the screen. Doing things like this can help to guide the eye of the user to the most important part of the menu (or the page as a whole). This update allows timed animations to work in three-dimensions as well as two-dimensions. Not to mention the fact that since “augmented reality and virtual reality are becoming the norm” (Shorten), this opens up a new realm of possibilities.

3D Transform Eg

Sharing Design Libraries

Design libraries are now easier than ever to create and share. In the libraries panel in Adobe XD you can add colours, character styles and components to your library and, when you are done, you can share it with whoever is working on the project. This is great because no matter how many people are working on a project you will always be able to keep consistent design guidelines. Even when changes are made, each person can choose whether to accept them or not. “Every member of your team plays a different role” (Shorten) so now you can determine how much control each member needs to have over the library. It helps to keep every aspect of the project streamlined no matter how large the team, or the scope of the project, gets.

Shared Libraries Eg

Adobe XD Plugin for Visual Studio Code

Visual Studio Code now has an Adobe XD plugin. Design is a team sport and your team isn’t just made up of other designers. This plugin makes it easier to communicate with developers. By sharing their Adobe XD libraries, designers allow developers to use this plugin to find out details about the design that will be needed for the developers to bring the design to reality. Developers can find out how a specific object is meant to look and convert that to whatever coding language they need from within Visual Studio Code.

Nested Components

In this new update you can add components to other components to make a more robust design. An easier way to think about it is like a document, inside of a folder, inside of a file cabinet, each element builds on top of the other. Imagine a component that gives you the title of an ebook and its author (well you don’t have to imagine it, an image is below this paragraph). Now combine that with a heart icon component so that you can favourite the book and a download icon component so that you can read it offline. It makes for a larger component that can hold everything and allows for the smaller component to do more without interfering with the other elements.

Nested Components Eg

Padding

This one is a little bit of a cheat. It was released before Adobe Max. However, it was discussed there and I love it. Padding is the space between elements. Adding padding, while combined with the stacks feature in Adobe XD, allows you to maintain an object’s spacing with other objects no matter how much the size of the objects change. This would be perfect if you are creating menu items and you want to maintain the spacing between them whether or not the food description is two sentences or five sentences long.

Padding Eg

Again these are just my favourite updates but there are many other interesting things that Adobe XD now allows you to do. Some honourable mentions are:
Supporting Components States in Design Specs – Developers can now see the various states that a component has and look for their design specifications so that they can create the code for them.
Collaborate Together in Real Time – Let everyone in your team collaborate on the same project at the same time and sync the changes with the cloud.
This is just the tip of the iceberg though. Read through all of Adobe XD’s newest features on Adobe’s website.

Sources

  • Shorten, Andrew. October 2020 Release of Adobe XD: Get to Final Faster with 3D Transforms, Creative Cloud Libraries, Visual Studio Code, and More. 20 Oct. 2020, blog.adobe.com/en/2020/10/20/xd-october-2020-update-3d-transforms-libraries-panel-more.html.
  • Unknown. “Auto-Height Text Container.” Video.tv.adobe.com, video.tv.adobe.com/v/41290t1/?captions=eng.
UX UI design web banner design

ADOBE MAX: FUN, NEW TOYS IN ADOBE XD

by Evan-Zane Green

One of 2020’s only good highlights was that Adobe Max was open to everyone, as opposed to previous years when it was you had to pay to go to the event. That means that all of our favourite Adobe products got some awesome upgrades. I am going to introduce you to some of my personal favourites from the ones that were released for Adobe XD, as well as some of the ones that were discussed at the conference, and show you how they can be used for your next design project. So, without further ado, let’s see what goodies Adobe has given us for Adobe XD.

This is most likely self-explanatory but I will say it anyways: If you haven’t upgraded your Adobe software, you should. Otherwise you will miss out and, trust me, you don’t want to. That being said, let’s get into the list of the most interesting updates that came out of Adobe Max:

3D Transforms

One of Adobe XD’s newest and, in my opinion, one of the most intriguing, is the ability to take two-dimensional elements and move, rotate and scale them in three-dimensional space. With this new update, designers can do things like make menus that move in 3D space depending on its position on the screen. Doing things like this can help to guide the eye of the user to the most important part of the menu (or the page as a whole). This update allows timed animations to work in three-dimensions as well as two-dimensions. Not to mention the fact that since “augmented reality and virtual reality are becoming the norm” (Shorten), this opens up a new realm of possibilities.

3D Transform Eg

Sharing Design Libraries

Design libraries are now easier than ever to create and share. In the libraries panel in Adobe XD you can add colours, character styles and components to your library and, when you are done, you can share it with whoever is working on the project. This is great because no matter how many people are working on a project you will always be able to keep consistent design guidelines. Even when changes are made, each person can choose whether to accept them or not. “Every member of your team plays a different role” (Shorten) so now you can determine how much control each member needs to have over the library. It helps to keep every aspect of the project streamlined no matter how large the team, or the scope of the project, gets.

Shared Libraries Eg

Adobe XD Plugin for Visual Studio Code

Visual Studio Code now has an Adobe XD plugin. Design is a team sport and your team isn’t just made up of other designers. This plugin makes it easier to communicate with developers. By sharing their Adobe XD libraries, designers allow developers to use this plugin to find out details about the design that will be needed for the developers to bring the design to reality. Developers can find out how a specific object is meant to look and convert that to whatever coding language they need from within Visual Studio Code.

Nested Components

In this new update you can add components to other components to make a more robust design. An easier way to think about it is like a document, inside of a folder, inside of a file cabinet, each element builds on top of the other. Imagine a component that gives you the title of an ebook and its author (well you don’t have to imagine it, an image is below this paragraph). Now combine that with a heart icon component so that you can favourite the book and a download icon component so that you can read it offline. It makes for a larger component that can hold everything and allows for the smaller component to do more without interfering with the other elements.

Nested Components Eg

Padding

This one is a little bit of a cheat. It was released before Adobe Max. However, it was discussed there and I love it. Padding is the space between elements. Adding padding, while combined with the stacks feature in Adobe XD, allows you to maintain an object’s spacing with other objects no matter how much the size of the objects change. This would be perfect if you are creating menu items and you want to maintain the spacing between them whether or not the food description is two sentences or five sentences long.

Padding Eg

Again these are just my favourite updates but there are many other interesting things that Adobe XD now allows you to do. Some honourable mentions are:
Supporting Components States in Design Specs – Developers can now see the various states that a component has and look for their design specifications so that they can create the code for them.
Collaborate Together in Real Time – Let everyone in your team collaborate on the same project at the same time and sync the changes with the cloud.
This is just the tip of the iceberg though. Read through all of Adobe XD’s newest features on Adobe’s website.

Sources

  • Shorten, Andrew. October 2020 Release of Adobe XD: Get to Final Faster with 3D Transforms, Creative Cloud Libraries, Visual Studio Code, and More. 20 Oct. 2020, blog.adobe.com/en/2020/10/20/xd-october-2020-update-3d-transforms-libraries-panel-more.html.
  • Unknown. “Auto-Height Text Container.” Video.tv.adobe.com, video.tv.adobe.com/v/41290t1/?captions=eng.