{"id":2141,"date":"2017-02-23T09:22:28","date_gmt":"2017-02-23T16:22:28","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/"},"modified":"2017-02-23T09:22:28","modified_gmt":"2017-02-23T16:22:28","slug":"create-a-responsive-dashboard-with-figma","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/","title":{"rendered":"Create a responsive dashboard with Figma"},"content":{"rendered":"<p>Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, <a href=\"http:\/\/cheap-viagra-pills.net\" style=\"text-decoration:none;color:#676c6c\">sales<\/a>  you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don&#8217;t have to install anything at all. And getting started is easy \u2013 you can import your previous layout designs from Sketch.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.creativebloq.com\/web-design\/best-website-builder-8133804\" target=\"_blank\">Choose a website builder: 16 top tools<\/a><\/li>\n<\/ul>\n<p>In Figma, you can create everything you need for your interface, from illustrated vector icons to custom layouts. Multiplayer editing could save much time for design teams, as it means all team members can work on the same layout at the same time. And these aren&#8217;t even all of its great features.<\/p>\n<p>In this tutorial I&#8217;ll show you how to get set up with\u00a0Figma, then walk through how to create a mobile app screen, step-by-step. In this case, we&#8217;ll be\u00a0designing the dashboard for a fictional statistics app. When you&#8217;re done, you&#8217;ll be able to create different interfaces in Figma and work on them with\u00a0your team in real time.<\/p>\n<h3>01. Sign up<\/h3>\n<p>First of all, you need to sign up at <a href=\"http:\/\/fse.futurelicensing.com\/feed\/fetch\/token\/9515d3343dd5ff1bc10919f58067886c\/www.figma.com\" target=\"_blank\">www.figma.com<\/a>. Decide if you want to use the tool in your browser or download the desktop app. To download the desktop version, go to the hamburger menu in the top left corner and click on &#8216;Get desktop app&#8217; .<\/p>\n<h3>02. Create an artboard and grid<\/h3>\n<p><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/9jaDynBkCHzfT9se4gDm7m.jpg\" target=\"_blank\"><\/p>\n<figure>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" name=\"\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/9jaDynBkCHzfT9se4gDm7m.jpg?w=900\" align=\"middle\" fullscreen=\"\"><\/p><figcaption>Add a baseline grid to help you position your elements harmoniously (click image to enlarge)<\/figcaption><\/figure>\n<p><\/a><\/p>\n<p>Hit <strong>A<\/strong> to create an artboard. You can choose one of the presets or create your own custom size. For this project, we&#8217;re going to use \u00a0Phone > iPhone 7 (375x667px)\u00a0. To create a grid, first select the artboard. Then on the right-hand sidebar find &#8216;Layout grid&#8217; and press &#8216;+&#8217;. Set up column count: 6, gutter: 16, margins: 8 and type: Stretch.\u00a0\u00a0<\/p>\n<h3>03. Draw a rectangle for the background<\/h3>\n<p>Let&#8217;s start with the background. Press <strong>R<\/strong> to bring up the Rectangle tool and draw a rectangle #5F98FA with no\u00a0borders. Set the dimensions to 375&#215;363 using the properties panel on the right hand side.\u00a0<\/p>\n<h3>04. Add a status bar<\/h3>\n<p><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/2iPncprxwbFYkhx3f7em7m.jpg\" target=\"_blank\"><\/p>\n<figure>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" name=\"\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/2iPncprxwbFYkhx3f7em7m.jpg?w=900\" align=\"middle\" fullscreen=\"\"><\/p><figcaption>Set the gradient for the status bar using the properties panel on the right on the screen. Here you can adjust the colour options to create a linear gradient (click image to enlarge)<\/figcaption><\/figure>\n<p><\/a><\/p>\n<p>Next we want to place a status bar at the top of the screen. Press <strong>R<\/strong> to set width: 375, height: 64, position (x:0; y:0). For our navigation bar let&#8217;s set the gradient fill using the property inspector panel on the right. Find the &#8216;Fill&#8217; option, press on the colour preview and select &#8216;Linear&#8217; from the\u00a0drop-down menu. The colour at\u00a0the top should be #77A6F7, and at the bottom #5A93F5 (opacity 100 per cent for both).\u00a0<\/p>\n<h3>05. Import an iOS status bar<\/h3>\n<p>Unfortunately, Figma doesn&#8217;t include iOS UI elements by default. However, there is a file called &#8216;Sample File&#8217;, which is an iOS app design, so we can borrow the status bar from that. Copy out the light status bar option, paste it into the current file and place it at (x: 0; y:0). Using the Text tool (<strong>T<\/strong>), click on your artboard to add a header to the navigation bar. I&#8217;ve gone for Avenir Heavy, 15px, #FFFFFF. Align the heading by horizontal centre, y: 33.\u00a0<\/p>\n<h3>06. Create a back icon<\/h3>\n<p>On the left of the navigation bar should be a &#8216;back&#8217; icon. I&#8217;m going to create this from scratch. Create a rectangle 14x14px, add 45-degree rotation, x:14; y:43. Duplicate this rectangle and place\u00a0it\u00a0at x:18; y:43. Select both rectangles and under the top menu go to Boolean groups > Subtract selection. After that, go back into Boolean groups > Flatten selection, or press <strong>cmd+E<\/strong>.<\/p>\n<h3>07. Finish the arrow icon<\/h3>\n<p>Our arrow icon is almost done. Now we just need to set the width and height to numeric values \u2013 in my case width: 12px; height: 20px. The final step is to set the fill colour to #FFFFFF.\u00a0<\/p>\n<h3>08. Create a graph<\/h3>\n<p>Now we are going to create a\u00a0graph. First, we will put in\u00a0some guidelines. Select the Rectangle tool (<strong>R<\/strong>) and set x:24 y:147; width: 1; height: 166; fill colour #B3DCFF and opacity 20%.\u00a0<\/p>\n<p>Duplicate this rectangle four times with 80px margins. On the bottom of each guideline, we need to add a date label using text layers (&#8216;Feb 2&#8217;, &#8216;Feb 9&#8217;, &#8216;Feb 16&#8217;, &#8216;Feb 23&#8217;, &#8216;Mar 1&#8217;). I have used Avenir Medium, at 11px, #C1D8FF.<\/p>\n<h3>09. Make the data line<\/h3>\n<p>Using the Pen tool (<strong>P<\/strong>) we need to create a vector to represent the data line. Click and drag to create a B\u00e9zier point. This shape should have a 4px stroke and\u00a0no fill, #FFFFFF.\u00a0<\/p>\n<p>Let&#8217;s add a drop shadow to help the line stand out: click the &#8216;+&#8217; on the Effects section and choose &#8216;Drop shadow&#8217;. Use following settings to make a smooth and elegant shadow: blur: 3px, y: 7px, #2951FF, opacity: 100%.<\/p>\n<h3>10. Add detail to the graph<\/h3>\n<figure>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" name=\"\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/G3AzTCa8gWdS3YXVmgCc7m.jpg?w=900\" align=\"middle\" fullscreen=\"\"><\/p><figcaption>Use the Text tool to add values to the places the guidelines intersect with the data line<\/figcaption><\/figure>\n<p>At the points where the guidelines intersect with the data line we are going to add circles. This time we&#8217;ll use the Ellipse tool (<strong>O<\/strong>), which you&#8217;ll find in the drop-down menu accompanying the Rectangle tool. Draw 8x8px circles on each intersection and set the fill colour to\u00a0#5F98FA. We need to add a stroke: click on the &#8216;+&#8217; button next to\u00a0the stroke section, set weight: 2px and align: Center.\u00a0<\/p>\n<h3>11. Final touches<\/h3>\n<p>To finish the graph section, we just need to add values to\u00a0our intersection points. With the Text tool (<strong>T<\/strong>) select Avenir Black, 11px, #1F4991.<\/p>\n<h3>12. Three informative boxes<\/h3>\n<p>Below the line graph we are\u00a0going to create three cells\u00a0that display more information. Using the Text tool (<strong>T<\/strong>) let&#8217;s create our first heading: &#8216;Estimated value of your shares&#8217;: x:16; y:391, Avenir Medium, 15px, #5D7EB6. To the right of the cell place the value &#8216;$1,115&#8217;, text style: Avenir Heavy, 22px, #5F98FA, text alignment: left,\u00a0x: 287; y: 387.\u00a0<\/p>\n<h3>13. Making a separator<\/h3>\n<p>Draw a rectangle that is 1px in height and spans the full width of the screen (#F5F5F5; x: 0; y: 435) \u2013 this will act as the separator between the cells. Select the heading, value and separator and create a group (<strong>cmd+G<\/strong>).<\/p>\n<h3>14. Adding headings<\/h3>\n<p><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/AsgarGQkFV2oomvvePQT7m.jpg\" target=\"_blank\"><\/p>\n<figure>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" name=\"\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/AsgarGQkFV2oomvvePQT7m.jpg?w=900\" align=\"middle\" fullscreen=\"\"><\/p><figcaption>Underneath the graph will be three cells showing key pieces of data (click image to enlarge)<\/figcaption><\/figure>\n<p><\/a><\/p>\n<p>Duplicate this group so you have three groups with 24px vertical distance between them. Change second heading to &#8216;Total members&#8217; and the third group heading to &#8216;Friends signed up&#8217; and\u00a0update the relevant values.\u00a0<\/p>\n<h3>15. Draw and align another rectangle<\/h3>\n<p>Now we&#8217;re going to add a call to action. Draw a rectangle below the last cell, width: 195; \u00a0height: 44, Y-axis distance from the\u00a0last\u00a0separator 21px.\u00a0<\/p>\n<p>Using the Align tools, line up the rectangle by horizontal centre. Then set the fill colour to #5F98FA and roundness to 22 (you&#8217;ll find this field\u00a0after &#8216;Rotation&#8217; in the Properties panel). After that add a drop shadow effect (colour: #ABDAFF; opacity: 100%; y: 5; blur:\u00a011).<\/p>\n<h3>16. Put some text on the button<\/h3>\n<p>Add text to the button using the Text tool (<strong>T<\/strong>): &#8216;Get more Shares!&#8217; Set this in Avenir Black, 15px, #FFFFFF. Align the text by the centre of the button. Finally, group all elements together and name them up properly.\u00a0<\/p>\n<h3>17. Make it responsive<\/h3>\n<p>Now we are going to adjust our layout so it&#8217;s responsive to different iPhones (320&#215;568, 375&#215;667 and 414&#215;736). To do this we have to use constraints, which you&#8217;ll find under the Properties menu on the right.\u00a0<\/p>\n<h3>18. Getting the layout right<\/h3>\n<p>If you select &#8216;Left&#8217; or &#8216;Right&#8217; on the horizontal drop-down, the group will pin to your chosen side of the screen, and will not stretch. If you select &#8216;Center&#8217;, the group or layer will stretch so it fills the width of the screen. We need to make the status bar float in place, so we want the &#8216;Right&#038;left&#8217; option (or hold down &#8216;cmd&#8217; and click the left and right bars on the diagram).\u00a0<\/p>\n<h3>19. Test it<\/h3>\n<p>Let&#8217;s try this out. With the status bar selected, hit the &#8216;Right&#038;Left&#8217; option. Select an artboard and, instead of iPhone 7, choose iPhone 7 Plus. It works properly even if you select the iPhone SE size.\u00a0<\/p>\n<h3>20. Check each layer<\/h3>\n<p>Let&#8217;s consider the rest of the layers. For the navigation bar background, we want to use &#8216;Right+Left&#8217;. For navigation bar title: &#8216;Center&#8217;. For back arrow icon, it&#8217;s best to use the &#8216;Left&#8217; option \u2013 this way the arrow will be pinned to left side of the screen.\u00a0<\/p>\n<h3>21. Set the line graph<\/h3>\n<p>Now let&#8217;s set the line graph. For the guidelines, dates and intersection circles, we want to use\u00a0&#8216;Center&#8217;. For the data line and background, we&#8217;ll use &#8216;Right&#038;Left&#8217;. In the extra data section we want to use &#8216;Left&#8217; for each title, &#8216;Right&#8217; for each value, and &#8216;Right&#038;Left&#8217; for the separator lines. For the CTA button group let&#8217;s set &#8216;Center&#8217;.\u00a0<\/p>\n<h3>22. Set the vertical constraints<\/h3>\n<p>The final step is to set the vertical constraints. The status bar, navigation bar, data line\u00a0and intersection circles and associated titles should be set to &#8216;Top&#8217;. The background of graph, dates and guidelines should be set to &#8216;Center&#8217;. Each group of extra data should be set to vertical &#8216;Center&#8217;, and the CTA button group should be\u00a0set to &#8216;Bottom&#8217;.<\/p>\n<h3>23. Make it work for each screen size<\/h3>\n<p>Let&#8217;s duplicate the artboard two times, and set one to the\u00a0size of an iPhone 7 Plus and the other to the size on an iPhone SE. On the Plus version, you&#8217;ll need to reduce the gap between the last cell of extra information and the CTA button by selecting the cells group and increasing its height from 195 to 225. On the SE version you&#8217;ll see that information cells overflow the CTA button, so we have to select the cells group and reduce its height to 150.<\/p>\n<h3>24. All done!<\/h3>\n<p>Hey, congrats! We have finished the whole app screen in Figma. For now just check everything is done, and you can sit back and feel like an expert.\u00a0<\/p>\n<p><em>This article was originally featured in <\/em><a href=\"https:\/\/www.myfavouritemagazines.co.uk\/design\/net-magazine-subscription\/\" target=\"_blank\"><em>net magazine<\/em><\/a><em> issue 288; <\/em><a href=\"https:\/\/www.myfavouritemagazines.co.uk\/design\/net-magazine-subscription\/\" target=\"_blank\"><em>buy it here.<\/em><\/a><\/p>\n<p><strong>Related articles:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.creativebloq.com\/inspiration\/new-behance-concept-looks-like-a-killer-app\" target=\"_blank\">New Behance concept looks like a killer app<\/a><\/li>\n<li><a href=\"http:\/\/www.creativebloq.com\/inspiration\/designing-for-social-impact\" target=\"_blank\">Designing for social impact<\/a><\/li>\n<li><a href=\"http:\/\/www.creativebloq.com\/features\/8-tips-to-ace-tech-jobs-interviews\" target=\"_blank\">8 tips to ace tech jobs interviews<\/a><\/li>\n<\/ul>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don&#8217;t have to install anything at&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-2141","post","type-post","status-publish","format-standard","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don&#039;t have to install anything at\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"taterboy\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Create a responsive dashboard with Figma | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don&#039;t have to install anything at\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2017-02-23T16:22:28+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2017-02-23T16:22:28+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Create a responsive dashboard with Figma | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don&#039;t have to install anything at\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#article\",\"name\":\"Create a responsive dashboard with Figma | Design for Immersive Technologies\",\"headline\":\"Create a responsive dashboard with Figma\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/tatermin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/9jaDynBkCHzfT9se4gDm7m.jpg?fit=%2C&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#articleImage\"},\"datePublished\":\"2017-02-23T09:22:28-07:00\",\"dateModified\":\"2017-02-23T09:22:28-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#listItem\",\"name\":\"Create a responsive dashboard with Figma\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#listItem\",\"position\":3,\"name\":\"Create a responsive dashboard with Figma\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/tatermin\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/tatermin\\\/\",\"name\":\"taterboy\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/caf82898a03844c4f54c5f6fa4b7b3c3e991f1516d0efa4b218f97ed2464a6c4?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"taterboy\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/\",\"name\":\"Create a responsive dashboard with Figma | Design for Immersive Technologies\",\"description\":\"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don't have to install anything at\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2017\\\/02\\\/create-a-responsive-dashboard-with-figma\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/tatermin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/tatermin\\\/#author\"},\"datePublished\":\"2017-02-23T09:22:28-07:00\",\"dateModified\":\"2017-02-23T09:22:28-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Create a responsive dashboard with Figma | Design for Immersive Technologies","description":"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don't have to install anything at","canonical_url":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#article","name":"Create a responsive dashboard with Figma | Design for Immersive Technologies","headline":"Create a responsive dashboard with Figma","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/tatermin\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2017\/02\/9jaDynBkCHzfT9se4gDm7m.jpg?fit=%2C&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#articleImage"},"datePublished":"2017-02-23T09:22:28-07:00","dateModified":"2017-02-23T09:22:28-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#listItem","name":"Create a responsive dashboard with Figma"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#listItem","position":3,"name":"Create a responsive dashboard with Figma","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/tatermin\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/tatermin\/","name":"taterboy","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/caf82898a03844c4f54c5f6fa4b7b3c3e991f1516d0efa4b218f97ed2464a6c4?s=96&d=mm&r=g","width":96,"height":96,"caption":"taterboy"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/","name":"Create a responsive dashboard with Figma | Design for Immersive Technologies","description":"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don't have to install anything at","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/tatermin\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/tatermin\/#author"},"datePublished":"2017-02-23T09:22:28-07:00","dateModified":"2017-02-23T09:22:28-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Create a responsive dashboard with Figma | Design for Immersive Technologies","og:description":"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don't have to install anything at","og:url":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/","article:published_time":"2017-02-23T16:22:28+00:00","article:modified_time":"2017-02-23T16:22:28+00:00","twitter:card":"summary","twitter:title":"Create a responsive dashboard with Figma | Design for Immersive Technologies","twitter:description":"Figma is a graphics tool for UI designers. It has a simple interface and enables you to collaborate on work with your teammates. If you want to work offline, sales you can choose to use the desktop app. Alternatively, Figma works on any operating system (hello, Windows), so you don't have to install anything at"},"aioseo_meta_data":{"post_id":"2141","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 16:33:40","updated":"2026-08-28 16:32:36","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCreate a responsive dashboard with Figma\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Create a responsive dashboard with Figma","link":"https:\/\/www.taterboy.com\/blog\/2017\/02\/create-a-responsive-dashboard-with-figma\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-yx","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/2141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=2141"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/2141\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=2141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=2141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=2141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}