{"id":8743,"date":"2020-11-12T10:00:08","date_gmt":"2020-11-12T10:00:08","guid":{"rendered":"http:\/\/www.xdguru.com\/?page_id=8743"},"modified":"2020-11-12T10:05:32","modified_gmt":"2020-11-12T10:05:32","slug":"overlays","status":"publish","type":"page","link":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/","title":{"rendered":"Overlays"},"content":{"rendered":"

Overlays\u00a0<\/b><\/h1>\n

In Adobe XD, overlay<\/strong> actions allow you to place content from one artboard on top of another artboard making it really easy to simulate effects such as drop-down menus, slide-up keyboards, and more.<\/span><\/p>\n

 <\/p>\n

1.<\/b>\u00a0We\u2019ll use this design to exemplify a pretty simple slide-up keyboard animation. In Prototype<\/strong> mode, wire the object from the main artboard to the artboard that you want to overlay.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

2.<\/b>\u00a0In the Property<\/strong> inspector, set Tap<\/strong> as the trigger for this example.\u00a0<\/span><\/p>\n

Select Overlay<\/strong> for the action and your overlay will show up in the center of the main artboard. You can change the position of the overlay manually using the green round button, or by selecting one of the Animations<\/strong> settings. Selecting Slide Up<\/strong> will move your Overlay at the bottom of the main artboard.<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

Click the Play<\/strong> button to preview your prototype and the keyboard will slide up from the bottom of the screen when you click that search box.\u00a0<\/span><\/p>\n

Clicking again, the keyboard will slide down.<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Overlays\u00a0 In Adobe XD, overlay actions allow you to place content from one artboard on top of another artboard making […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":907,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"\nAdobe XD Overlays - How to use overlays in prototype mode - XDGuru<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adobe XD Overlays - How to use overlays in prototype mode - XDGuru\" \/>\n<meta property=\"og:description\" content=\"Overlays\u00a0 In Adobe XD, overlay actions allow you to place content from one artboard on top of another artboard making […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/\" \/>\n<meta property=\"og:site_name\" content=\"XDGuru.com\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T10:05:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/Overlays1-300x169.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.xdguru.com\/#website\",\"url\":\"https:\/\/www.xdguru.com\/\",\"name\":\"XDGuru.com\",\"description\":\"Adobe XD tutorials and UI\/UX design tips\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.xdguru.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#primaryimage\",\"url\":\"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/Overlays1-300x169.jpg\",\"contentUrl\":\"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/Overlays1-300x169.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#webpage\",\"url\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/\",\"name\":\"Adobe XD Overlays - How to use overlays in prototype mode - XDGuru\",\"isPartOf\":{\"@id\":\"https:\/\/www.xdguru.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#primaryimage\"},\"datePublished\":\"2020-11-12T10:00:08+00:00\",\"dateModified\":\"2020-11-12T10:05:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.xdguru.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide – Main\",\"item\":\"https:\/\/www.xdguru.com\/adobe-xd-guide\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Overlays\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adobe XD Overlays - How to use overlays in prototype mode - XDGuru","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/","og_locale":"en_US","og_type":"article","og_title":"Adobe XD Overlays - How to use overlays in prototype mode - XDGuru","og_description":"Overlays\u00a0 In Adobe XD, overlay actions allow you to place content from one artboard on top of another artboard making […]","og_url":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/","og_site_name":"XDGuru.com","article_modified_time":"2020-11-12T10:05:32+00:00","og_image":[{"url":"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/Overlays1-300x169.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.xdguru.com\/#website","url":"https:\/\/www.xdguru.com\/","name":"XDGuru.com","description":"Adobe XD tutorials and UI\/UX design tips","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.xdguru.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#primaryimage","url":"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/Overlays1-300x169.jpg","contentUrl":"http:\/\/www.xdguru.com\/wp-content\/uploads\/2020\/08\/Overlays1-300x169.jpg"},{"@type":"WebPage","@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#webpage","url":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/","name":"Adobe XD Overlays - How to use overlays in prototype mode - XDGuru","isPartOf":{"@id":"https:\/\/www.xdguru.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#primaryimage"},"datePublished":"2020-11-12T10:00:08+00:00","dateModified":"2020-11-12T10:05:32+00:00","breadcrumb":{"@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.xdguru.com\/adobe-xd-guide\/overlays\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.xdguru.com\/"},{"@type":"ListItem","position":2,"name":"Guide – Main","item":"https:\/\/www.xdguru.com\/adobe-xd-guide\/"},{"@type":"ListItem","position":3,"name":"Overlays"}]}]}},"_links":{"self":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages\/8743"}],"collection":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/comments?post=8743"}],"version-history":[{"count":0,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages\/8743\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/pages\/907"}],"wp:attachment":[{"href":"https:\/\/www.xdguru.com\/wp-json\/wp\/v2\/media?parent=8743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}