Learn how to discover, install, and remove plugins in XD to extend its functionalities. Some useful plugins include ways to feed designs with JSON, real APIs, CSVs, as well as ways to modify the canvas or export renditions to the file system.
- [Instructor] As one of the first product managers for XD, I remember the early days of trying to identify and solve all the challenges that UX designers have. And there are a lot. So, as a product team, as a whole team, we agreed to solve 80% of the problem with core features in XD and then for the other 20%, more specific, very detailed tasks, how 'bout designers could use plugins? So that's what we did. And then for the last two years, we worked on a plugin infrastructure so that plugin developers can extend the functionality of XD to solve the 20% of tasks.
So, let's see how designers can find plugins. So, they can go here under Plugins, Discover Plugins. You can see all the plugins that are available here, you can search, you can remove plugins that are already installed, you can install new ones. Here, you can see all the plugins you have installed. And then, as a plugin developer, if you're interested in learning more about how to extend the functionality of XD, how to develop plugins for XD, we announced a Fund for Design.
So, plugin developers that are interested in extending XD and connecting with Creative Cloud, there's a $10 million fund here where you can apply, and then develop plugin, get funded, and then extend the functionality. It's pretty interesting. So now, let's see a couple plugins that can power up your design process. The first one that I like to show is one that helps you populate text with lowering Ipsum text. So, let's say I have this area text and I want to populate with some text, I don't want to copy and paste.
I can go here, Fill With Placeholder Text, and I choose my preset there and then OK. As soon as I'm done, I get that text populated right here. The second plugin that I want to show is this called CopyCat. And this plugin will read websites. So, let's go here, CopyCat. Let's say I want to go to the Adobe website. And this will read the website and will extract colors, character styles, and images if you have images so you can start working right away.
And as you know, with artboard selected, you can open the Assets panel and then import that color set and then you can start working right away. Pretty cool plugin. And all the font names are here and some images as well. The other plugin that I want to show is around designing with data. So, let's say you have a Google spreadsheet that has some movie titles, audience scores, and links to images, right? How cool would that be if I could bring this information into my design? So, here I have that public URL that I just showed you.
I have a couple of elements and each element is trying to map the same column name that you have in the spreadsheet. For example, this is called Thumbnail, as you can see here. This is called Movie Title and this is called Audience Score. It's right there, Thumbnail, Audience Score, and Movie Title. Now, if I run the plugin with this element selected, I can go here, Plugins, Google Sheets for XD.
And this one, specifically, can also load local CSV documents. Pretty interesting. Let's use the public one here. So, I just paste that link here, click on Continue. It will try to map all the options here. So, my XD element with that name with that column there in the spreadsheet. And then if I hit Apply, it will download and it will bring that information into your designs. Pretty fast, pretty useful. And the last plugin that I want to show is this called Data Populater.
So, let me switch to another document. And this is a little bit more than that because you can define variables in your document. For example, I have this API and I can copy this just to show you what that is. This is returning a JSON file that has a lot of objects with the key there and then the value, right? So, it's last name, for example, it's this one. And then it can use the variable names, the node names there with curly braces to define pieces of your design.
So, with this element selected, I can go to Plugins, Data Populator, I'll use a public URL. Then I'll copy this, it's already there. It's now loading that JSON and now I can see it's showing me the values that it's bringing so I can get a sense of the names that I need to use in my design. And then as soon as I hit Populate, it's gonna start to pull information with pictures and values there from that JSON file.
Pretty interesting. So, that's just a glimpse of everything you can do with plugins in XD. I'm sure you'll find a lot more plugins and if you do, please share with us on Twitter using hashtag #AdobeXD. Awesome, so that concludes our course.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins