Highlighted

5 free plugins in XD to overcome your designer's block

Adobe Employee ,
Sep 04, 2020

Copy link to clipboard

Copied

Plugins make up an important part of the XD ecoystem. In this article, we have handpicked 5 plugins for wireframes, images, avatars, icons, and export that will help you quickly get started with your projects. 

 

Wireframer - 181 wireframes for mobile screens

As the name suggests, this plugin provides you with a set of wireframes for mobile apps that you can modify based on your requirements. The 181 wireframes encompass most popular screens used in mobile applications.

If you are stuck for inspiration and need a place to get started with protoyping a mobile app, I highly recommend Wireframer. 

 

WireFramer.gif

 

 

Photosplash 2 - 500,00 copyright free images!

Photosplash2 is packed with 50,000 copyright free images that you can easily apply to selected objects in XD.

  1. Select the objects into which you want to place the images
  2. Search for images in the Photosplash2 plugin
  3. Click Apply.

 

Photosplash2.gif

 

 

UI Faces - Literally, thousands of avatars!

Thousands of avatars aggregated from various sources that you can sort by age, gender, emotion, and so on, and apply to your selection.

Quick tip: Check the license for each avatar before you use it in a project.

 

UI faces.gif

 

 

 

 

 

 

 

 

 

 

 

Icons for Design -5000+ no attributions required icons!

Search (using phrases such as arrow, menu, and so on) and place icons within XD. Most of the frequently used icons in applications are covered. 

 

icons 4 design.gif

 

 

Web Export - Export your designs as HTML/CSS

While you can export CSS using the "Share for development" workflow, WebExport provides you with additional functionalities that allow you to export, edit, and share your code with developers. We are pretty sure that this plugin will continue to evolve with the app, bringing to it more capabilities that are in sync with the XD feature set.

 

Web Export.gif

 

 

 

 

 

 

 

 

 

 

Share your favorite plugins!

We would love to hear your opinion about these plug-ins as also request you to share your favorites with us adding a note about why they are worthy of your love. It would also help other users make the right decisions. 

 

Cheers,

Atul_Saini

 

PS: The Maaztr Academy has created an amazing tutorial based on the plugins mentioned above, feel free to take a look. 

https://www.youtube.com/watch?v=yWb2DzasDcc

Design in Adobe XD like a pro with these Plugins - Updated In this video, we are going to discuss 5 Free Adobe XD plugins to boost your creativity. These plu...
TOPICS
How to

Views

949

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

5 free plugins in XD to overcome your designer's block

Adobe Employee ,
Sep 04, 2020

Copy link to clipboard

Copied

Plugins make up an important part of the XD ecoystem. In this article, we have handpicked 5 plugins for wireframes, images, avatars, icons, and export that will help you quickly get started with your projects. 

 

Wireframer - 181 wireframes for mobile screens

As the name suggests, this plugin provides you with a set of wireframes for mobile apps that you can modify based on your requirements. The 181 wireframes encompass most popular screens used in mobile applications.

If you are stuck for inspiration and need a place to get started with protoyping a mobile app, I highly recommend Wireframer. 

 

WireFramer.gif

 

 

Photosplash 2 - 500,00 copyright free images!

Photosplash2 is packed with 50,000 copyright free images that you can easily apply to selected objects in XD.

  1. Select the objects into which you want to place the images
  2. Search for images in the Photosplash2 plugin
  3. Click Apply.

 

Photosplash2.gif

 

 

UI Faces - Literally, thousands of avatars!

Thousands of avatars aggregated from various sources that you can sort by age, gender, emotion, and so on, and apply to your selection.

Quick tip: Check the license for each avatar before you use it in a project.

 

UI faces.gif

 

 

 

 

 

 

 

 

 

 

 

Icons for Design -5000+ no attributions required icons!

Search (using phrases such as arrow, menu, and so on) and place icons within XD. Most of the frequently used icons in applications are covered. 

 

icons 4 design.gif

 

 

Web Export - Export your designs as HTML/CSS

While you can export CSS using the "Share for development" workflow, WebExport provides you with additional functionalities that allow you to export, edit, and share your code with developers. We are pretty sure that this plugin will continue to evolve with the app, bringing to it more capabilities that are in sync with the XD feature set.

 

Web Export.gif

 

 

 

 

 

 

 

 

 

 

Share your favorite plugins!

We would love to hear your opinion about these plug-ins as also request you to share your favorites with us adding a note about why they are worthy of your love. It would also help other users make the right decisions. 

 

Cheers,

Atul_Saini

 

PS: The Maaztr Academy has created an amazing tutorial based on the plugins mentioned above, feel free to take a look. 

https://www.youtube.com/watch?v=yWb2DzasDcc

Design in Adobe XD like a pro with these Plugins - Updated In this video, we are going to discuss 5 Free Adobe XD plugins to boost your creativity. These plu...
TOPICS
How to

Views

950

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 04, 2020 3
New Here ,
Sep 22, 2020

Copy link to clipboard

Copied

I want to know pls!

After finishing designs, how do I make it accessible for users online or how do I launch it?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2020 0
Community Beginner ,
Sep 22, 2020

Copy link to clipboard

Copied

Hey Isaac5FDE!

 

If your question is how can you share it in a link form for design review, presenting, for developers etc..

This is how you could do...

 

step 1. In order to make your prototype accessible for users online you need to go to 'Share' section of your top menu. And share a link from here to make it accessible. see below the share tab in pic-

 

Share tab on top menuShare tab on top menu

 

 

 

 

step 2 - Now on right hand side there's a panel - 'Link Setting' - as seen below. You need to Rename the link incase you want to or leave as it is. The 'link name' is usually the given file name. You can click on 'down arrow' to choose new link and give new name. 

link settings panellink settings panelchoosing new linkchoosing new link

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 3 - You need to decide if this link you are sharing is for Design review, presentation or for Dev team to access design assets and css. Once you decide click on 'view setting' (see pic below)and change the setting as per your preference whether sharing for presentation or with dev team. Note that first you can custom set things like - comments, assets, show hot spots etc. and then choose for Dev, design review or presentation that ways your link will have your preferred settings.

choosing type of link you want to sharechoosing type of link you want to share

custom set different features of linkcustom set different features of link

 

 

 

 

 

step 4 - setting link access. You can directly invite people and let them share or view the link.(see pic below). Or you can just choose 'Anyone with link' and copy the link from below and share it! 

setting link accesssetting link access adding people to share or view linkadding people to share or view link

 

Hope this is what you were looking for. 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 22, 2020 2
Community Beginner ,
Sep 25, 2020

Copy link to clipboard

Copied

Thank you for the wonderful article on Adobe XD plugins. It is really helpful. 

My favourite top 4 plugins in Adobe XD are,

  • Quick Mockup
  • Vectorize
  • Repetor
  • ContentGenerator

 

I have made an explaination video on those too, check and share you thoughts. 

https://youtu.be/FTUebOAP9Ic

 

Today's video is all about my favourite Adobe XD Plugins in 2020. I use those plugins in every / most of projects. Please note that these are my favourite on...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 1
Adobe Community Professional ,
Sep 27, 2020

Copy link to clipboard

Copied

I like/use Personas, Mimic, Notes and Annotations.

 

ps: soon there will be a plugin for XD that allows animations, interactions + production ready code.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 2
Community Beginner ,
Sep 27, 2020

Copy link to clipboard

Copied

Animations? Looking forward 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2020 1
New Here ,
Sep 28, 2020

Copy link to clipboard

Copied

These are pretty good plugins to save time. For those who want to see them in more detailed description check out this video link

 

https://www.youtube.com/watch?v=yWb2DzasDcc

 

I hope you guys find this helpful. Let me know if you have some questions. 

 

Again thanks to the author for sharing such great content for us

Stay safe.

Bye

Design in Adobe XD like a pro with these Plugins - Updated In this video, we are going to discuss 5 Free Adobe XD plugins to boost your creativity. These plu...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 1
Adobe Employee ,
Sep 28, 2020

Copy link to clipboard

Copied

Hi there,  

 

Thank you for creating this amazing tutorial, its going to be a great help for the viewers. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 28, 2020 0