{"id":32532,"date":"2021-12-01T01:03:46","date_gmt":"2021-12-01T09:03:46","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=32532"},"modified":"2023-08-13T02:31:50","modified_gmt":"2023-08-13T09:31:50","slug":"auto-layout-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/","title":{"rendered":"How Does Auto Layout Work in UXPin?"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header-1024x512.png\" alt=\"AutoLayout blog header\" class=\"wp-image-32533\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Design faster with our feature \u2013 Auto Layout. Align all the components the way you want within seconds and speed up your design workflow.\u00a0<\/p>\n\n\n\n<p>At UXPin, our goal has always been to simplify design process and make sure designers have enough time to focus on meaningful work. Auto Layout removes the pain of manual resizing and makes your work more intuitive. Try Auto Layout for free. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for UXPin&#8217;s trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-challenges-of-designing-without-auto-layout\">Challenges of designing without Auto Layout&nbsp;<\/h2>\n\n\n\n<p>However, we want it to be true, designing isn\u2019t only creative and fun work. You have to adapt to the constraints of your UI\/UX tool. As designs are static by nature, without the proper technology, you can\u2019t expect them to behave like a coded product.&nbsp;<\/p>\n\n\n\n<p>This means every element you draw only visualizes how it\u2019s supposed to look and work. For example, when you design a simple button, first you draw a rectangle and then add text. The moment you want to expand your text, you need to adjust the length of the rectangle as well. It shows how designers need to think about every relation between all the UI elements.&nbsp;<\/p>\n\n\n\n<p>The disconnect between components translates into more repetitive work \u2013 constantly resizing multiple elements, adjusting them separately so that they can create a coherent whole. It takes too much time to do everything manually. On top of that, you have to keep the changes consistent in all elements, and let\u2019s be honest \u2013 it\u2019s easy to forget about setting the right paddings and gaps, especially when adding new elements to your design.&nbsp;<\/p>\n\n\n\n<p>That\u2019s when Auto Layout can remove all those bottlenecks.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/t.co\/rXr0hFKg94\">https:\/\/t.co\/rXr0hFKg94<\/a> \ud83c\udd95 Take care of your responsive and consistent design with our new Auto Layout feature! \ud83d\udd25Sign up and take it for a test ride. <a href=\"https:\/\/t.co\/Hox6bwhZY9\">pic.twitter.com\/Hox6bwhZY9<\/a><\/p>&mdash; UXPin (@uxpin) <a href=\"https:\/\/twitter.com\/uxpin\/status\/1457717654316322817?ref_src=twsrc%5Etfw\">November 8, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How Auto Layout works<\/h2>\n\n\n\n<p>Auto Layout gives you the freedom to focus on what matters and remove all the repetitive and manual work. We made sure that your UI won\u2019t be constrained by the laws of static design but can benefit from the code-approach that we like so much. Thanks to <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Flexbox<\/a> \u2013 CSS Flexible Box Layout, you can apply Auto Layout to groups as well as components to make chosen elements depend on one another\u2019s position.&nbsp;<\/p>\n\n\n\n<p>Auto Layout removes all the hassle and will take you just a few seconds to adjust the components the way you want. Let\u2019s take for example a simple button \u2013 whatever you need to change in the text, the rest of the elements will adapt to the new text length. It\u2019s only one of many cases when Auto Layout speeds up your work. If you design repeated elements like a menu and want to swap the items\u2019 places, or add an expanded\/collapsed view, our new feature will save you a ton of work.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-video\"><video height=\"650\" style=\"aspect-ratio: 650 \/ 650;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/autolayout-1.mp4\"><\/video><\/figure>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Get started<\/h3>\n\n\n\n<p>Drop elements to the canvas, select the group or pick a component from your library. Add Auto Layout in the properties panel and your design will behave in a flexbox-like manner. You can also add Auto Layout components to a Design System.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\"><\/div><\/div>\n\n\n\n<p>Align all the elements within a few clicks &#8211; Auto Layout can help you:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Group scattered elements and wrap them how you want<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"650\" style=\"aspect-ratio: 650 \/ 650;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/autolayout-3.mp4\"><\/video><\/figure>\n\n\n\n<p>Just by wrapping the elements, you can align them right away and adjust how many lines they should take by controlling their width or height. Say goodbye to moving the separate boxes around.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lay out and distribute elements<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"650\" style=\"aspect-ratio: 650 \/ 650;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/ezgif.com-gif-maker.mp4\"><\/video><\/figure>\n\n\n\n<p>If you want to distribute your components in relation to each other, just set the vertical or horizontal direction and choose how they should be laid out (start, center, end, or stretch).&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Keep consistency<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"650\" style=\"aspect-ratio: 650 \/ 650;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/autolayout-5.mp4\"><\/video><\/figure>\n\n\n\n<p>With Auto Layout maintaining consistency among gaps, paddings, borders, and radiuses is easy. When you apply the wanted value, all the elements with Auto Layout will align accordingly.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Resizing<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-video\"><video height=\"390\" style=\"aspect-ratio: 650 \/ 390;\" width=\"650\" controls src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/12\/autolayout-8.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Resizing comes in handy when you want to change one chosen element in the Auto Layout group. You can still maintain all the properties set for the group and play around with one element by changing the width, height, or filling out the main group.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">TL;TR<\/h2>\n\n\n\n<p>Auto Layout automates some of the manual work that you have to do when tweaking, aligning, and resizing elements. Groups of items can now align intuitively to work as a whole. Check all the functionalities <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/auto-layout\/\" target=\"_blank\" rel=\"noreferrer noopener\">in our documentation<\/a>. Need help? Ask <a href=\"https:\/\/community.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">our community<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a trial<\/a> and align all your components in one click.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Design faster with our feature \u2013 Auto Layout. Align all the components the way you want within seconds and speed up your design workflow.\u00a0 At UXPin, our goal has always been to simplify design process and make sure designers have enough time to focus on meaningful work. Auto Layout removes the pain of manual resizing<\/p>\n","protected":false},"author":3,"featured_media":32533,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,334,19],"tags":[],"class_list":["post-32532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-features","category-uxpin"],"yoast_title":"","yoast_metadesc":"Explore UXPin's Auto Layout and learn what it is about. Find out how it can speed your design.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How Does Auto Layout Work in UXPin? | UXPin<\/title>\n<meta name=\"description\" content=\"Explore UXPin&#039;s Auto Layout and learn what it is about. Find out how it can speed your design.\" \/>\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.uxpin.com\/studio\/blog\/auto-layout-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Does Auto Layout Work in UXPin?\" \/>\n<meta property=\"og:description\" content=\"Explore UXPin&#039;s Auto Layout and learn what it is about. Find out how it can speed your design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-01T09:03:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-13T09:31:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"How Does Auto Layout Work in UXPin?\",\"datePublished\":\"2021-12-01T09:03:46+00:00\",\"dateModified\":\"2023-08-13T09:31:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/\"},\"wordCount\":742,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/AutoLayout_blog_header.png\",\"articleSection\":[\"Blog\",\"Features\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/\",\"name\":\"How Does Auto Layout Work in UXPin? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/AutoLayout_blog_header.png\",\"datePublished\":\"2021-12-01T09:03:46+00:00\",\"dateModified\":\"2023-08-13T09:31:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Explore UXPin's Auto Layout and learn what it is about. Find out how it can speed your design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/AutoLayout_blog_header.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/AutoLayout_blog_header.png\",\"width\":1200,\"height\":600,\"caption\":\"AutoLayout blog header\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/auto-layout-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Does Auto Layout Work in UXPin?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How Does Auto Layout Work in UXPin? | UXPin","description":"Explore UXPin's Auto Layout and learn what it is about. Find out how it can speed your design.","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.uxpin.com\/studio\/blog\/auto-layout-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"How Does Auto Layout Work in UXPin?","og_description":"Explore UXPin's Auto Layout and learn what it is about. Find out how it can speed your design.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2021-12-01T09:03:46+00:00","article_modified_time":"2023-08-13T09:31:50+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"How Does Auto Layout Work in UXPin?","datePublished":"2021-12-01T09:03:46+00:00","dateModified":"2023-08-13T09:31:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/"},"wordCount":742,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png","articleSection":["Blog","Features","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/","name":"How Does Auto Layout Work in UXPin? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png","datePublished":"2021-12-01T09:03:46+00:00","dateModified":"2023-08-13T09:31:50+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Explore UXPin's Auto Layout and learn what it is about. Find out how it can speed your design.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/11\/AutoLayout_blog_header.png","width":1200,"height":600,"caption":"AutoLayout blog header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/auto-layout-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How Does Auto Layout Work in UXPin?"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=32532"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32532\/revisions"}],"predecessor-version":[{"id":49277,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/32532\/revisions\/49277"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/32533"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=32532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=32532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=32532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}