Maria Miliaki - Adobe XD - Το απόλυτο εργαλείο  UX/UI Design

24.11.20 | by Maria 4 Min Read

Adobe XD - Το απόλυτο εργαλείο UX/UI Design


Adobe XD is the ultimate all-in-one UX/UI design tool that allows you to build prototypes for web and app design or even quick and stylish still wireframes. You can start working with a library of existing UI Kits or create your own from scratch and choose from different screen sizes like desktop, tablet or mobile. Forget Photoshop! Here is the tool that gives you everything you need to design and share your prototype among your partners and clients.

Combining features commonly found in Photoshop and Illustrator, Adobe XD recognizes all shapes as vectors, giving you the ability to edit and even design shapes without having to run Illustrator. You can work with masks, gradients and pretty much everything you would do in Photoshop and Illustrator (except editing images). Measuring, aligning, scaling according to Responsive Resize is so much easier with Adobe XD. With add-ons, you can quickly browse and insert icons and photographs from popular license-free photo libraries and that really is a time saver.

A big plus of Adobe XD is the Repeat Grid feature, where you design a pattern and then repeat it as many times you want. You can repeat any combination of texts, images and elements and then edit them separately. Components are another great feature. Once you define a combination of the above or a single item as a Component, it will keep updating throughout the whole design each time you make a change to the original Component, meaning you keep all your Artboards up to date.

Web-safe Character styles and colors are all listed in Assets so once you make a change –for example when you modify a color value– it will be updated in real time across all instances in the document. This is a great way to manage color changes across multiple artboards. The same thing happens with Character Styles.

The Grid helps ensure your design is more controlled and correct. You can set the number of columns, gutter widths and margins. These are really useful when you are aligning design content or designing for different device sizes. You can easily and quickly adjust them based on your needs.

In Prototype Mode you can create nice, smooth transitions between artboards, realistic image and button hovers, dropdown menus, and pop ups, bringing your design even closer to completion. By selecting either Trigger [Tap, Drag, Keys & Gamepad and Voice], the type of Action [Transition, Auto-Animate, Overlay Scroll to, etc.] or Destination you get various ways to browse through Prototype Mode.

You can export all assets in PNG, SVG, PDF or JPG format and choose between Design, Web, iOS or Android Format. Another feature is selection of the scale factor when talking about Web, iOS or Android: You can export everything in 1x, 2x or 3x resolution.

All of the above and many more features like “Fix Position when scrolling” with which you create “sticky” elements, helps everyone understand the feeling of your design and bring to life what you have in mind.

Last but most important the Share Section gives you the possibilities listed below. You can choose any one of the five presets to create a public or private link for an XD document.

Design Review: This allows you to gather feedback on your design and prototype from your team or even clients. They can leave comments and view hotspot hints and navigation controls.
Development: This is for sharing your design specs with developers so they can have information about anything placed in the artboards like sizes, colors, character styles etc. Comments, hotspot hints and navigation controls are allowed.
Presentation: Optimize your design for presenting it to stakeholders in full screen mode. No comments are allowed here.
User Testing: Invite your users to test your design. No comments, no hotspot hints and no navigation controls are allowed here.
Custom: Customize the viewing experience of your design plus a Full Screen Mode

Contact us if you want to learn more!