{"id":54624,"date":"2024-09-19T04:03:34","date_gmt":"2024-09-19T11:03:34","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=54624"},"modified":"2024-09-19T04:21:35","modified_gmt":"2024-09-19T11:21:35","slug":"responsive-design-frames","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/","title":{"rendered":"Responsive Design for UXPin Merge \u2013 What is Frames?"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Mail_800px-2.gif\" alt=\"Mail 800px (2)\" class=\"wp-image-54628\"\/><figcaption class=\"wp-element-caption\"><em>Frames by UXPin Merge: Change layout sizes without extra work<\/em>.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>We\u2019ve just launched a new feature that brings full responsiveness to UXPin Merge. With it, you can seamlessly switch between different layouts such as desktop, mobile, and other devices and your design stays responsive. The feature keeps your projects visually consistent, fully functional, and looking great on any device.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Frames?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/frames\/\">Frames is a versatile capability<\/a> that allows designers to assign code-backed components to specific presets, making it effortless to transition between different layouts like desktop and mobile.<\/p>\n\n\n\n<p>With this feature, you can preview how your designs behave across various devices directly in the Editor and Preview modes. This capability ensures that your designs are not only visually consistent but also functional across all screen sizes.<\/p>\n\n\n\n<p>Frames come equipped with a full set of interactions \u2014 such as Resize, Scroll, Load, Click, and Hover \u2014 allowing for dynamic and engaging user experiences. This feature mirrors the flexibility and interactivity you already have enjoyed when working in UXPin\u2019s Editor, now enhanced to support fully responsive design.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Do You Get with Frames?<\/h2>\n\n\n\n<p>Besides being a much-needed tool for creating truly responsive designs with minimal effort, Frames comes with a host of benefits:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Responsive Design<\/strong> \u2013<strong> <\/strong>Frames makes it easy to design layouts that adapt seamlessly to different devices. Whether you&#8217;re designing for desktop, mobile, or any other screen size, Frames ensures that your designs are fully responsive, providing a great user experience across all platforms.<\/li>\n\n\n\n<li><strong>Seamless Transitions<\/strong> \u2013 Easily switch between layouts such as desktop and mobile, ensuring that your design looks great on every device. With Frames, what you see in the Editor is what users will experience, reducing guesswork and revisions.<\/li>\n\n\n\n<li><strong>Real-Time Previews <\/strong>\u2013 Designers can see how their layouts respond to different presets without leaving the Editor. This feature enables you to make adjustments on the fly, ensuring that every element of your design is optimized for various screen sizes.<\/li>\n\n\n\n<li><strong>Consistency Across Projects:<\/strong> By using Frames to manage responsive components, you ensure a consistent look and feel across all your projects. This is particularly valuable for maintaining brand identity and user familiarity.<\/li>\n\n\n\n<li><strong>Support for Media Queries:<\/strong> Frames support dynamic resizing and styling through media queries, including those from design systems pushed to UXPin via merge-cli.<\/li>\n\n\n\n<li><strong>Isolate Components from the UXPin Interface:<\/strong> Placed in frames, code-backed components are isolated from the rest of the canvas. This prevents components with overlay properties from interfering with the design, ensuring a smoother workflow.<\/li>\n\n\n\n<li><strong>Artboard-Like Experience in UXPin<\/strong>: For those of you who don\u2019t use code-backed components, Frames is a useful feature that will make your design feel like a set of artboards, just like in vector-based design tools. Instead of clicking between pages, you can see your designs side by side.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Responsive Design Matters?<\/h2>\n\n\n\n<p>Responsive design is a crucial consideration at every stage of the design process, particularly during prototyping and the handoff to development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Accurate representation of the end product<\/h3>\n\n\n\n<p>During the prototyping stage, responsive design ensures that the prototype fully imitates how the end product will behave across different devices and screen sizes.<\/p>\n\n\n\n<p>By using Frames, designers can see exactly how the layout, content, and interactive elements will behave across devices, which helps you keep total control over the design look and feel.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enhanced user testing<\/h3>\n\n\n\n<p>Prototyping with responsive frames helps you evaluate how your users interact with the design on different screens. It ensures that your design is user-friendly regardless of the device used.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Streamlined collaboration across the organization<\/h3>\n\n\n\n<p>A responsive prototype provides a clear, unified vision of how the design should function across all devices, reducing ambiguity and aligning everyone involved in the project.<\/p>\n\n\n\n<p>It also facilitates more productive feedback and discussions, ensuring that all team members have a shared understanding of the design goals.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Smoother design handoff<\/h3>\n\n\n\n<p>When handing off the design to developers, a responsive prototype is invaluable. It provides developers with a comprehensive guide that includes all necessary breakpoints, layout adjustments, and interactive behaviors for different screen sizes.<\/p>\n\n\n\n<p>This detailed information helps developers implement the design accurately and efficiently, reducing the likelihood of misunderstandings or misinterpretations that could lead to delays or additional work.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design consistency<\/h3>\n\n\n\n<p>By integrating responsive design into your design process, you can ensure consistency across all devices from the outset. This consistency is crucial for maintaining brand identity and providing a uniform user experience.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Frames<\/h2>\n\n\n\n<p>You can change the frame&#8217;s dimension, change its properties, add actions and triggers. Let\u2019s see how or read about it in <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/frames\/\">our documentation<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating frames<\/h3>\n\n\n\n<p>There are a couple of ways of creating frames. Let\u2019s see them:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Click \u201cF\u201d on your keyboard: <\/strong>select components that you want to put in one frame and press \u201cF\u201d on your keyboard.<\/li>\n\n\n\n<li><strong>Use a shortcut in Top Bar<\/strong>: select components or layers and go to Top Bar. Click on the Icon named \u201cTurn into Frame\u201d.\u00a0<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcy6_WwUH_ky96XmmPuRybCYC1IHALFlLU4yw1FVmyKeoBa1ATioPvweNig6o067IjsuAvsuOSSwKAymZz7sbZ59z1cV9VyejnfMbZzX2oUEAzg5iHJ_K33nnKZ-vj60pepkYBb8tpK1sM1UkgxjB8bL8E?key=Oi6h00XO35EW_cqOci2fdA\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Switching dimensions<\/h3>\n\n\n\n<p>We can adjust the dimensions of our frame. A default frame is set to be 300 X 100 pixels, but we can easily change its size by dragging the frame\u2019s corners, or typing in a specific width (W) and height (H) values in the right panel.<\/p>\n\n\n\n<p>Enable \u201cResponsive Width\u201d to ensure your components automatically adjust to 100% of the frame width. See below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdK41-DYZV3kJ_RtoRdE49JoEfi0S3nnTAQCJ9mbgIdPvRZsg1aTYMjcFd6YRKHxzp6PQQLDaxC_0p-OZIWpryrR2161dAZtRXUnSdqPzMJYXeAXVXUzPTgDe1lJimaBcHZ07I9Xue6GiWG9aYJJ0WcZb-8?key=Oi6h00XO35EW_cqOci2fdA\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Naming frames<\/h3>\n\n\n\n<p>WIth size adjusted, let\u2019s change our frame\u2019s name. We can rename our frame from either the Layers panel or the Top bar. The frame\u2019s name will be reflected in the Layers panel, Top bar, and on the canvas.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Other properties<\/h3>\n\n\n\n<p>Besides changing the name, we can also adjust the look of our frame. We can add:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scrolling<\/strong>: To view components inside the frame that are outside the visible area, we can add vertical or horizontal scrolling.<\/li>\n\n\n\n<li><strong>Fill<\/strong>: This one&#8217;s for adding a solid color, gradient, or image to the frame.<\/li>\n\n\n\n<li><strong>Border<\/strong>: We can add a stroke to any frame that we have on the canvas.<\/li>\n\n\n\n<li><strong>Shadows<\/strong>: Use it to apply outer or inner shadows to the selected frame.<\/li>\n\n\n\n<li><strong>Blur<\/strong>: It works on the entire frame or its background.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding interactions&nbsp;<\/h3>\n\n\n\n<p>There are specific triggers and actions that are set just to Frames.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Frame triggers<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scroll<\/strong>: Triggers when the Frame Preview is scrolled to a specified height.<\/li>\n\n\n\n<li><strong>Frame Load<\/strong>: Triggers when the Frame is fully loaded.<\/li>\n\n\n\n<li><strong>Frame Resize<\/strong>: Triggers when the Frame\u2019s window preview is resized, either manually or by changing the Frame preset in the Top bar.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Frame actions<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Go to Frame<\/strong>: Use this action to link to other Frames within your canvas.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Preview and Share Frames<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfc-Ne4BeFix7VRyvMUXYN9OFAf6zU4bGs5FsMdYrN9-Q_XYaChyX_ox3Ci2tWufOVXEatXtr_Q7BGzqaimBpCRiKz4FirZa72-hmUXukd66-KbxgEu9pHyKNAmZVSqRu7m_3w_75Y0LditTGZ3GhxwS_1y?key=Oi6h00XO35EW_cqOci2fdA\" alt=\"\"\/><\/figure>\n\n\n\n<p>To see how your frames behave, you can preview individual Frames or the entire canvas, and share previews of specific frames (or the entire canvas) with others, just like you can when sharing a regular prototype.<\/p>\n\n\n\n<p>We added a \u201cPreview frame\u201d button in the Top bar of a Preview mode to help you view and share a specific frame. You can also use a keyboard shortcut \u201cCmd\u201d (or \u201cCtrl\u201d) + \u201cI\u201d to preview a frame you clicked on.<\/p>\n\n\n\n<p>To share a preview of the selected Frame, press \u201cCmd\u201d + \u201cShift\u201d + \u201cP\u201d or<strong> <\/strong>click the \u201cShare frame\u201d button. You\u2019ll see the Share modal. Copy the URL or QR code of the frame or share it via email.<\/p>\n\n\n\n<p>Note: Frames do not support comments. To add comments, you will need to do so outside of the Frame.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Start using Frames in UXPin<\/h2>\n\n\n\n<p>By using Frames, you&#8217;ll ensure that your designs are optimized for any device, reduce guesswork, and streamline your workflow. It allows you to assign code-backed components to specific presets, seamlessly transitioning between layouts like desktop and mobile. With Frames, you can preview how your designs will look across various devices directly in the Editor and Preview modes, ensuring visual consistency and functionality across all screen sizes.<\/p>\n\n\n\n<p>Frames also come equipped with a full set of interactions\u2014such as Resize, Scroll, Load, Click, and Hover\u2014making it easy to create dynamic and engaging user experiences. Whether you&#8217;re working with code-backed components or not, Frames enhances your design process by supporting responsive design, providing seamless transitions, and offering real-time previews to make adjustments quickly. It also helps maintain consistency across projects, isolates components from the canvas, and offers an artboard-like experience for organizing designs side by side, much like in vector-based tools.<\/p>\n\n\n\n<p>Frames are available for all UXPin\u2019s users,<a href=\"https:\/\/www.uxpin.com\/sign-up\"> sign up<\/a> here. Those of you who don\u2019t use code-backed components can use this feature like an artboard on the canvas and set some interactions to it. Merge users can truly benefit from full responsiveness and total control. If you\u2019re curious about designing with code-backed design, see how it fits into your design process. <a href=\"https:\/\/www.uxpin.com\/merge?utm_source=launch-campaign&amp;utm_medium=uxlink&amp;utm_campaign=blog_frames_09_24\">Request access<\/a> to UXPin Merge.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!<\/p>\n","protected":false},"author":193,"featured_media":54625,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-54624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Responsive Design with Frames | UXPin","yoast_metadesc":"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!","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>Responsive Design with Frames | UXPin<\/title>\n<meta name=\"description\" content=\"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!\" \/>\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\/responsive-design-frames\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Design for UXPin Merge \u2013 What is Frames?\" \/>\n<meta property=\"og:description\" content=\"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-19T11:03:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-19T11:21:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Frames_blogpost.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=\"Julia Prus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Julia Prus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\\\/responsive-design-frames\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/\"},\"author\":{\"name\":\"Julia Prus\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/9a51fc8593093438ecfa516b7b2ebe3e\"},\"headline\":\"Responsive Design for UXPin Merge \u2013 What is Frames?\",\"datePublished\":\"2024-09-19T11:03:34+00:00\",\"dateModified\":\"2024-09-19T11:21:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/\"},\"wordCount\":1459,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Frames_blogpost.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/\",\"name\":\"Responsive Design with Frames | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Frames_blogpost.png\",\"datePublished\":\"2024-09-19T11:03:34+00:00\",\"dateModified\":\"2024-09-19T11:21:35+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/9a51fc8593093438ecfa516b7b2ebe3e\"},\"description\":\"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Frames_blogpost.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Frames_blogpost.png\",\"width\":1200,\"height\":600,\"caption\":\"Frames blogpost\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-design-frames\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Design for UXPin Merge \u2013 What is Frames?\"}]},{\"@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\\\/9a51fc8593093438ecfa516b7b2ebe3e\",\"name\":\"Julia Prus\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/julia-prus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Design with Frames | UXPin","description":"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!","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\/responsive-design-frames\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Design for UXPin Merge \u2013 What is Frames?","og_description":"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-19T11:03:34+00:00","article_modified_time":"2024-09-19T11:21:35+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Frames_blogpost.png","type":"image\/png"}],"author":"Julia Prus","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Julia Prus","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/"},"author":{"name":"Julia Prus","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/9a51fc8593093438ecfa516b7b2ebe3e"},"headline":"Responsive Design for UXPin Merge \u2013 What is Frames?","datePublished":"2024-09-19T11:03:34+00:00","dateModified":"2024-09-19T11:21:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/"},"wordCount":1459,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Frames_blogpost.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/","name":"Responsive Design with Frames | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Frames_blogpost.png","datePublished":"2024-09-19T11:03:34+00:00","dateModified":"2024-09-19T11:21:35+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/9a51fc8593093438ecfa516b7b2ebe3e"},"description":"Try out Frames that allow you to preview and test how your prototype works on different devices and screen sizes \u2013 without any extra design work!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Frames_blogpost.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Frames_blogpost.png","width":1200,"height":600,"caption":"Frames blogpost"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-design-frames\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Responsive Design for UXPin Merge \u2013 What is Frames?"}]},{"@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\/9a51fc8593093438ecfa516b7b2ebe3e","name":"Julia Prus","url":"https:\/\/www.uxpin.com\/studio\/author\/julia-prus\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54624","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\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=54624"}],"version-history":[{"count":7,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54624\/revisions"}],"predecessor-version":[{"id":54637,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54624\/revisions\/54637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/54625"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=54624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=54624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=54624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}