Understand the most effective way to make icons in Adobe XD.
- [Voiceover] Creating icons is more than…just creating graphics and I want to show you…the specifics of creating an icon really fast in Adobe XD.…So, let's say, for instance, I need a Search icon.…I'll drag out a circle, or an ellipse.…I'll turn off the fill.…I'll give it a white border,…and just start to make it look like a magnifying glass,…using, also, the line tool, dragging that out,…and making sure it's the same color and width as well.…
So this really is my icon in this case.…And typically, you might make this…like any size that you want.…I actually would want it a little smaller,…kind of like that, but you need to make sure…you have it large enough for you to actually press on it…with your finger.…So even though this is a prototype,…we need to make sure the hit area, as it's known,…is large enough.…And how you do that is just use a rectangle…and draw out that rectangle about 47 pixels square.…
And I'll turn off that fill so we can see it.…So this is the size that I want the icon to be.…So from there I can center it, visually that is,…
Learn how to lay out a screen design with graphics and text and import vector and raster images. See how easy it is to create complex screen designs, complete with repeated lists and grids that are as simple to change as they are to create. This goes for any mobile screen type: iOS or Android, tablet or smartphone. Once the design is done, author Paul Trani shows how to add interactions and transitions to see how the app will "work" from one screen to the next. The end result is a full-featured prototype that can be shared with designers, developers, and clients, and broken down and exported as assets for use in development.
- Creating your first Adobe XD project
- Working with graphics and text in Adobe XD
- Importing assets
- Building additional screens for different display sizes and platforms
- Creating UI elements
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Publishing and sharing a prototype
- Exporting artboards and assets