{"id":53,"date":"2018-11-15T16:01:46","date_gmt":"2018-11-15T15:01:46","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/11\/15\/how-to-use-sketch2react-for-quick-responsive-prototyping\/"},"modified":"2020-06-18T07:27:01","modified_gmt":"2020-06-18T07:27:01","slug":"how-to-use-sketch2react-for-quick-responsive-prototyping","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/","title":{"rendered":"How to use Sketch2React for Quick Responsive Prototyping"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg\"><br \/>\n<\/figure>\n<p><a href=\"https:\/\/link.medium.com\/LAZPea6SLW\">https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n<h3>How to use Sketch2React for Quick Responsive Prototyping<\/h3>\n<p>A great way to get started learning our framework is to use it for what we call <strong>Quick Responsive Prototyping<\/strong>. You could also call it Lofi HTML5 (and soon Lofi React??).<\/p>\n<p>What we mean by lofi is that you cut corners, do it really quick and focus on just the essentials. You still get the Bootstrap grid in all its responsive glory. <strong><em>You\u2019ll actually learn extremely important skills that you\u2019ll never loose.<\/em><\/strong><\/p>\n<h3>Ask these questions<\/h3>\n<h4>What is the purpose of your prototype?<\/h4>\n<p>If any of these facts are true, give it a go building it with our framework:<\/p>\n<ul>\n<li>You need to try out\/show your devs real code responsive flows<\/li>\n<li>You want to build and set up the grid yourself\u200a\u2014\u200ahey we are designers aka control freaks for a reason hell yeah! \u270c\ufe0f?<\/li>\n<li>You want to use your own servers and connect to a service like Hotjar or\/and Google Analytics. <strong>Important note:<\/strong> Remember, even if most things are just text and images (while Quick Prototyping) you still can connect to these services and get real user data feedback\u200a\u2014\u200ahow awesome is that?<\/li>\n<li>You want to build one prototype that works on all screen sizes, one that is responsive<\/li>\n<\/ul>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"476\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/0*JUaUxHfEgVw7mmqx.gif\"><figcaption class=\"wp-caption-text\">Our desktop app is finally out! <a href=\"https:\/\/medium.com\/sketch2react\/welcome-to-our-sketch2react-code-app-9fb10463396d\" target=\"_blank\" rel=\"noopener noreferrer\">Read more\u00a0here\u2026<\/a><\/figcaption><\/figure>\n<h3>The essentials are<\/h3>\n<ul>\n<li>\n<strong>Learning and understanding<\/strong> how the Bootstrap grid works from inside of Sketch<\/li>\n<li>You need to switch your brain to <em>developer mode<\/em>\n<\/li>\n<li>How to <strong>place content<\/strong> inside whatever grid setup you need for your design<\/li>\n<li>We just released <a href=\"https:\/\/sketch2react.io\/resources\/GridsDemo.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>9 Free Grids<\/strong><\/a>. Use them to mix and match and create endless combos of responsive mobile friendly layouts<\/li>\n<\/ul>\n<h3>What the heck does \u201ddeveloper mode\u201d\u00a0mean?<\/h3>\n<p>It means that you need to scan your artboards in Sketch with that super excellent brains of yours. That same brain needs to <strong>divide what you have designed into rows, columns and containers.<\/strong> <em>At first this feel really odd<\/em>. But once you get the hold of understanding this, you will never ever forget it. It\u2019s way easier than learning how to ride a bike. Remember how you struggled with that when you where a kid? ?I do!<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*niJIZP1tPN0UNDAmuW2O5A.jpeg\"><figcaption class=\"wp-caption-text\">Your journey begins now\u00a0friend!<\/figcaption><\/figure>\n<h3>Start like\u00a0this<\/h3>\n<ul>\n<li>What needs to be interactive and what can be static?<\/li>\n<li>To begin, focus on these two components only<\/li>\n<\/ul>\n<p>{<a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/develop\/components#text\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>text<\/strong><\/a>}<\/p>\n<p>{<a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/develop\/components\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>image<\/strong><\/a>}<strong> <\/strong>or\/and {<a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/develop\/components#image-fixed\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>image-fixed<\/strong><\/a>}<\/p>\n<ul>\n<li>Learn how the grid needs to be setup by studying our <a href=\"https:\/\/sketch2react.io\/resources\/GridsDemo.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>9 Free Grids\u00a0.sketchfile<\/strong><\/a>\n<\/li>\n<\/ul>\n<h3>Images as buttons\u00a0??<\/h3>\n<p>One really neat trick: convert each <strong>{image}<\/strong> that you need linking to other artboard\/pages to a <strong>{button-primary}. <\/strong>Since you can have an infinite number of styled buttons feel free to make one for each required image.<\/p>\n<p>You can also have image hover effects since this technically is a button\u200a\u2014\u200ahow cool is that?<\/p>\n<h3>Sketch2React\u200a\u2014\u200aImages as Links\u00a0Tutorial<\/h3>\n<p>Here\u2019s the tutorial I promised in this very article a couple days ago. ? ?<\/p>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Images as Links with Hover Effects Tutorial\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/U0tsqeKCgmw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3>If you prefer written tutorials<\/h3>\n<p><a href=\"https:\/\/link.medium.com\/LAZPea6SLW\">https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n<h3>?Our Desktop Code App is here (and it\u2019s\u00a0free!)<\/h3>\n<p>Our free desktop app does many amazing things that you will enjoy while developing from within Sketch with our framework. Treat Sketch as your developing platform and our app as your default <strong>code previewer<\/strong>. It\u2019s here that all the magic you setup inside of Sketch gets transformed into workable code.<\/p>\n<h4><a href=\"https:\/\/medium.com\/sketch2react\/welcome-to-our-sketch2react-code-app-9fb10463396d\" target=\"_blank\" rel=\"noopener noreferrer\">Read more\u00a0here<\/a><\/h4>\n<h3>Works with Sketch\u2019s built in Prototype Tool<\/h3>\n<p>Another awesome thing is that our framework works perfectly fine with the built in prototype tool inside of Sketch. If you use our buttons or our nav elements all the links will work in code and in your prototype. Pretty neat and you can use the fine Sketch Cloud to gather client feedback plus exporting each Artboard to HTML5\u200a\u2014\u200aa pretty damn fine combo right there. ??<\/p>\n<h3>More learning resources<\/h3>\n<p><a href=\"https:\/\/www.pluralsight.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pluralsight<\/a> has an amazing course called <strong>Bootstrap 4 for the developer<\/strong> by Mario Macari. I highly recommend it if your a designer that wants to learn Bootstrap. Lot of things in our framework will make sense after this course if you have zero code background. <strong>Focus<\/strong> on the parts where he explains the grid, containers, columns and rows.<\/p>\n<h3>Important Note<\/h3>\n<p>You actually need <strong><em>zero code knowledge<\/em><\/strong> to use our framework. But that\u2019s is not because this is <em>Design with no code<\/em>, a paraphrase that you hear a lot in relation to software that claims to do magic with zero effort.<\/p>\n<p><strong>We force you<\/strong> to learn a few very good lessons that will elevate you as a designer and that is a very good thing. You will thank us later, we promise ??\u2764\ufe0f<\/p>\n<h3>Not onboard yet? Sign up to our free Beta Program cadet! ?\u00a0?\u200d?<\/h3>\n<p><a href=\"https:\/\/link.medium.com\/LAZPea6SLW\">https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n<h3>Tutorials and news about our framework<\/h3>\n<p><a href=\"https:\/\/link.medium.com\/LAZPea6SLW\">https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to use Sketch2React for Quick Responsive Prototyping A great way to get started learning our framework is to use it for what we call Quick Responsive Prototyping. You could also call it Lofi HTML5 (and soon Lofi React??). What we mean by lofi is that you cut corners, do it really quick and focus&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to use Sketch2React for Quick Responsive Prototyping<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[29,6,43,80,18],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-design","tag-html","tag-prototyping","tag-prototyping-tools","tag-sketch-app"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Sketch2React for Quick Responsive Prototyping | Sketch2React Blog<\/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:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Sketch2React for Quick Responsive Prototyping - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"How to use Sketch2React for Quick Responsive Prototyping A great way to get started learning our framework is to use it for what we call Quick Responsive Prototyping. You could also call it Lofi HTML5 (and soon Lofi React??). What we mean by lofi is that you cut corners, do it really quick and focus&hellip;&nbsp;Read More &raquo;How to use Sketch2React for Quick Responsive Prototyping\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-15T15:01:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\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:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to use Sketch2React for Quick Responsive Prototyping\",\"datePublished\":\"2018-11-15T15:01:46+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\"},\"wordCount\":824,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg\",\"keywords\":[\"Design\",\"HTML\",\"Prototyping\",\"Prototyping Tools\",\"Sketch App\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\",\"name\":\"How to use Sketch2React for Quick Responsive Prototyping - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg\",\"datePublished\":\"2018-11-15T15:01:46+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Sketch2React for Quick Responsive Prototyping\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Sketch2React for Quick Responsive Prototyping | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/","og_locale":"en_US","og_type":"article","og_title":"How to use Sketch2React for Quick Responsive Prototyping - Sketch2React Blog","og_description":"How to use Sketch2React for Quick Responsive Prototyping A great way to get started learning our framework is to use it for what we call Quick Responsive Prototyping. You could also call it Lofi HTML5 (and soon Lofi React??). What we mean by lofi is that you cut corners, do it really quick and focus&hellip;&nbsp;Read More &raquo;How to use Sketch2React for Quick Responsive Prototyping","og_url":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-11-15T15:01:46+00:00","article_modified_time":"2020-06-18T07:27:01+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to use Sketch2React for Quick Responsive Prototyping","datePublished":"2018-11-15T15:01:46+00:00","dateModified":"2020-06-18T07:27:01+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/"},"wordCount":824,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg","keywords":["Design","HTML","Prototyping","Prototyping Tools","Sketch App"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/","url":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/","name":"How to use Sketch2React for Quick Responsive Prototyping - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg","datePublished":"2018-11-15T15:01:46+00:00","dateModified":"2020-06-18T07:27:01+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/0*sspZgpSr0bsARBI1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-use-sketch2react-for-quick-responsive-prototyping\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Sketch2React for Quick Responsive Prototyping"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}