{"id":180203,"date":"2021-11-22T10:23:39","date_gmt":"2021-11-22T09:23:39","guid":{"rendered":"http:\/\/sftarticles.wpenginepowered.com\/en\/?p=180203"},"modified":"2025-07-01T21:00:50","modified_gmt":"2025-07-02T04:00:50","slug":"what-is-adobe-xd-how-to-use-it","status":"publish","type":"post","link":"https:\/\/cms-articles.softonic.io\/en\/what-is-adobe-xd-how-to-use-it\/","title":{"rendered":"What is Adobe XD and how to use it"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/adobe-xd.en.softonic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe XD<\/a> is a sophisticated design tool that allows teams to easily interact and work together from planning all the way to the final product. It\u2019s a vector-based UX (user experience) platform that enables teams to create and share designs. It has cross-platform compatibility with other <strong>Adobe Creative Cloud<\/strong> apps like Photoshop, InDesign, and Illustrator. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Previously known as Adobe Experience Design CC<\/strong>, it was first announced as Project Comet in October 2015 at the Adobe Max conference. It was officially launched with the name we know<strong> <\/strong>in October 2017. Let&#8217;s look at <strong>how to use Adobe XD<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Adobe XD used for?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adobe XD is intended for developers and designers who want to work in vector format because it allows them to scale their design up without losing resolution or detail. It\u2019s also invaluable for teams that want to collaborate on creating their designs. They can work together effortlessly using Adobe XD because they can link their artboards, share their work, including links to specifications and designs, and give and get feedback to and from other team members without exiting the program.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-1024x576.jpg\" alt=\"What is Adobe XD and how to use it \" class=\"wp-image-180206\" srcset=\"https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-1024x576.jpg 1024w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-300x169.jpg 300w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-768x433.jpg 768w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-800x450.jpg 800w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-664x374.jpg 664w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-238x134.jpg 238w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-436x246.jpg 436w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-370x208.jpg 370w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-304x170.jpg 304w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1-150x84.jpg 150w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-1.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What can you design in Adobe XD?<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Websites:<\/strong> You can use stacks, padding, navigation patterns, scrolling, and a repeat grid to bring life to any websites you design on Adobe XD.<\/li><li><strong>Apps:<\/strong> With features like responsive resizing, set artboard sizes for standard devices, and auto-animate and drag triggers, Adobe XD makes creating great app experiences easy.<\/li><li><strong>Games: <\/strong>You can import art and test game elements in Adobe XD using a Bluetooth game controller and gamepad triggers. Then have users interact with the controller before you write any code.<\/li><li><strong>Marketing campaigns:<\/strong> Designing a marketing campaign is a breeze in Adobe XD. Import elements from Photoshop and Illustrator and design any campaign you can come up with.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How does Adobe XD work?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using Adobe XD allows designers to create prototypes that look like the finished product. Designers can communicate their vision while contacting their team and getting feedback during every facet of the project from inception to delivery. <strong>Adobe XD <\/strong>has features that save time and workflows that free designers to concentrate on creating. Designers and their teams worldwide are using Adobe XD for everything from wireframing to handing over the finished product.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-1024x576.jpg\" alt=\"What is Adobe XD and how to use it \" class=\"wp-image-180207\" srcset=\"https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-1024x576.jpg 1024w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-300x169.jpg 300w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-768x433.jpg 768w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-800x450.jpg 800w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-664x374.jpg 664w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-238x134.jpg 238w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-436x246.jpg 436w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-370x208.jpg 370w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-304x170.jpg 304w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2-150x84.jpg 150w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-2.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tweaking designs and layouts<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can finish your <strong>intensive tasks faster<\/strong> with AdobeXD. You can make buttons, build cards, add hover and toggle, create interactions, exchange and resize content, and make different versions of components to try out and instantly send your changes to different designs. Choose from a wide variety of fonts. Create voice commands, add animations to create motion effects and scrolls, and access areas of your designs by clicking. Build interactive carousels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Adding innovations<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Exchange graphics and colors<\/strong>. Store creative assets from Illustrator, Photoshop, and more and save them to the cloud. Access your files from anywhere at any time. Link components to documents. Use shared character styles and colors. Access shared logos. Add music and effects to your designs to make them pop. Work easily with Paper, Slack, Jira, Dropbox, Teams, Microsoft, Zeplin, and others. Use more than 200 plugins. Automate your tasks. Connect to XD tools.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Live Preview<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A big help with prototyping in XD is the live preview. If you <strong>change your designs<\/strong> or transitions Adobe XD immediately previews them in a separate window. If you don\u2019t have the device you\u2019re designing for, you can use the preview window to see your changes on your pc. If you\u2019re using a smartphone or tablet to design on, you can plug it into your pc and get a live preview.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Repeat Grid<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Repeating content like a <strong>carousel of cards<\/strong>, a photo gallery, or a list of contact numbers, can take time to maintain. A Repeat Grid makes it easy. You can automate repeating content so that an object or group of objects can be repeated vertically and horizontally. You can override text and imagery to update your content by dragging new images and text files onto the Repeat Grid.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Voice prototyping<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Adobe XD is the first <strong>experience design platform<\/strong> to offer voice interaction. You can use voice commands and get speech and audio playback. You can design voice assistants, applications accessible by voice commands, and more. If you\u2019re building a skill or workflow for Alexa or Google Assistant, you can preview it directly on a compatible device.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How much is Adobe XD?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The price of Adobe XD depends on whether you\u2019re going to pay for the whole Adobe Creative Cloud apps package or purchase Adobe XD separately. As a single app, it costs US$9.99 a month. If you want to use other Adobe apps too, the package costs US$52.99 a month. There\u2019s a <strong>free trial option<\/strong> with limited capabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to add fonts to Adobe XD<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use the Creative Cloud desktop app. Run it by <strong>tapping its icon<\/strong> on the taskbar in Windows and the menu bar in macOS. Click the Fonts icon. In the fonts window, click on Browse Fonts. You\u2019ll go to fonts.adobe.com. Look for the font you want. Click the View Family button. You\u2019ll go to another page. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click the Activate Fonts drop-down icon. Activate the font family, weights, or styles. To access the fonts, open the Creative Cloud desktop app and go to the font list. You\u2019ll see them in the Active fonts list.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-1024x576.jpg\" alt=\"What is Adobe XD and how to use it \" class=\"wp-image-180208\" srcset=\"https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-1024x576.jpg 1024w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-300x169.jpg 300w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-768x433.jpg 768w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-800x450.jpg 800w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-664x374.jpg 664w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-238x134.jpg 238w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-436x246.jpg 436w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-370x208.jpg 370w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-304x170.jpg 304w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3-150x84.jpg 150w, https:\/\/articles-img.sftcdn.net\/auto-mapping-folder\/sites\/3\/2021\/11\/What-is-Adobe-XD-and-how-to-use-it-3.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<div class=\"sc-card-starred-link\">\r\n  <div class=\"sc-card-starred-link__body\">\r\n    <div class=\"sc-card-starred-link__row clearfix\">\r\n      <div class=\"sc-card-starred-link__col-logo\">\r\n        <img decoding=\"async\" class=\"sc-card-starred-link__img\" src=\"https:\/\/articles-img.sftcdn.net\/f_auto,t_article_cover_l\/auto-mapping-folder\/sites\/3\/2021\/11\/How-to-crop-image-in-adobe-xd-2.jpg\" width=\"100px\" height=\"100px\">\r\n      <\/div>\r\n      <div class=\"sc-card-starred-link__col-title\">\r\n        <p class=\"sc-card-starred-link__title\">How to Crop Image in Adobe XD<\/p>\r\n        <a class=\"sc-card-starred-link__button\" href=\"https:\/\/adobe-xd.en.softonic.com\/articles\/how-to-crop-image-adobe-xd\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">READ MORE<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <a class=\"sc-card-starred-link__link\" href=\"https:\/\/adobe-xd.en.softonic.com\/articles\/how-to-crop-image-adobe-xd\" target=\"_blank\" rel=\"noopener noreferrer sponsored\"><\/a>\r\n  <\/div>\r\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fantastic collaboration tool<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re a designer or part of a design team that wants a sophisticated tool that will do everything you need to easily as well as give you access to other Adobe products, you can\u2019t go wrong with Adobe XD. You\u2019ll work in vector format and collaborate fully with other team members without any difficulties, which will make any task you undertake go smoothly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adobe XD is a sophisticated design tool that allows teams to easily interact and work together from planning all the way to the final product. It\u2019s a vector-based UX (user experience) platform that enables teams to create and share designs. It has cross-platform compatibility with other Adobe Creative Cloud apps like Photoshop, InDesign, and Illustrator. &hellip; <a href=\"https:\/\/cms-articles.softonic.io\/en\/what-is-adobe-xd-how-to-use-it\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;What is Adobe XD and how to use it&#8221;<\/span><\/a><\/p>\n","protected":false},"author":9205,"featured_media":180204,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpcf-pageviews":1},"categories":[2518,2441],"tags":[3195],"usertag":[],"vertical":[],"content-category":[],"class_list":["post-180203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","category-how-to","tag-app-subdomain-redirectionadobe-xd"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts\/180203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/users\/9205"}],"replies":[{"embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/comments?post=180203"}],"version-history":[{"count":1,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts\/180203\/revisions"}],"predecessor-version":[{"id":324568,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/posts\/180203\/revisions\/324568"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/media\/180204"}],"wp:attachment":[{"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/media?parent=180203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/categories?post=180203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/tags?post=180203"},{"taxonomy":"usertag","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/usertag?post=180203"},{"taxonomy":"vertical","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/vertical?post=180203"},{"taxonomy":"content-category","embeddable":true,"href":"https:\/\/cms-articles.softonic.io\/en\/wp-json\/wp\/v2\/content-category?post=180203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}