{"id":86,"date":"2018-06-16T10:26:38","date_gmt":"2018-06-16T08:26:38","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/06\/16\/sketch2react-how-it-works\/"},"modified":"2020-11-29T17:25:55","modified_gmt":"2020-11-29T16:25:55","slug":"sketch2react-how-it-works","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/","title":{"rendered":"Sketch2React \u2014 How it works"},"content":{"rendered":"
\n


\n<\/figure>\n

Sometimes you have very little time to explain a lot of complex stuff. It\u2019s then that you need these type of articles.<\/p><\/blockquote>\n

https:\/\/medium.com\/sketch2react\/support-sketch2react-on-patreon-b76ef1f21356<\/a><\/p>\n

? What better way to show how Sketch2React<\/a> works than using the awesome GIF technology? Are you ready to give your\u00a0.sketchfiles super powers? ?<\/strong><\/p>\n

Btw these are heavily compressed for faster loading times. ?Okey let\u2019s start, you are very busy we know ?<\/p>\n

\n


\n<\/figure>\n

? Step 1\u200a\u2014\u200aUse our\u00a0plugin<\/h3>\n

First design your stuff. Then you use our plugin to create folders containing things like rows, columns, paddings and margins.<\/p>\n

?Important! The page<\/strong> (in Sketch<\/em>) needs to be named Start here<\/em><\/strong> and the first artboard <\/strong>needs to be named Start<\/em><\/strong> or our previewer app will not read your\u00a0.sketchfile correctly.<\/p>\n

\n


\n<\/figure>\n

? Step 2\u200a\u2014\u200aMoving and naming\u00a0stuff<\/h3>\n

This step is the most important one. It\u2019s now that you begin giving your Sketch design file the super power of Bootstrap 4<\/strong> and React<\/strong> without even leaving the document. You are enhancing your design with real code components and a amazing responsive grid <\/strong>(we love you Bootstrap 4).<\/p>\n

When you are happy with how things look you will need to start moving them inside the proper folder and applying correct naming of layers. Check our Components<\/strong><\/a> or Cheat Sheet<\/strong><\/a>. And please study our demo files, they releveal things that can be hard to explain with words. Or even GIFs ??<\/p>\n

\n


\n<\/figure>\n

? Step 3\u200a\u2014\u200aDrag and drop to our magical Previewer App<\/h3>\n

??\u200d?Now comes the really fun part<\/em><\/strong>, dragging and dropping your\u00a0.sketchfile onto our magical Previewer App. If you have done your homework of Step 2<\/em><\/strong>, you will see your design file beautifully rendered and fully responsive based on what you have set up.<\/p>\n

\n


\n<\/figure>\n

\u2708\ufe0f Step 4\u200a\u2014\u200aExport as\u00a0HTML<\/h3>\n

If you are ready to take your prototype even further you can export each artboard page as separate HTML files. Or maybe you just want to put it on your own server and test it on different devices.<\/p>\n

\n


\n<\/figure>\n

? Step 5\u200a\u2014\u200aOpen your HTML\u00a0files<\/h3>\n

You can use the excellent Solis for previewing your exported HTML files or you can just drag+drop them onto any browser. And you can use excellent web editors like RapidWeaver to easily upload them to your own websites. Or even just use Transmit and drag+drop the\u00a0.html files, just remember to rename the first one index.html or it will not work properly if you send your client a link to say https:\/\/mysupercompany.io\/latestprototype\/<\/p>\n

Excellent work!<\/strong> We hope you now have a better understanding of how Sketch2React works, as always if in confusion just go to our website were we have stuff to read and stuff to watch.<\/p>\n

\n

Alpha 0.55 is out and has (among other things) real form fields that you can customize the look of directly inside of Sketch. Yes it\u2019s\u00a0true!<\/figcaption><\/figure>\n
\n


\n<\/figure>\n

All the best, <\/em>Sketch2React<\/em><\/a> Team, Fredrik & Juan<\/em><\/p>\n

https:\/\/medium.com\/sketch2react\/support-sketch2react-on-patreon-b76ef1f21356<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes you have very little time to explain a lot of complex stuff. It\u2019s then that you need these type of articles. ? What better way to show how Sketch2React works than using the awesome GIF technology? Are you ready to give your\u00a0.sketchfiles super powers? ? Btw these are heavily compressed for faster loading times.… Read More »Sketch2React \u2014 How it works<\/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":[56,57,53,54,9],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-handoff","tag-quickstart","tag-sketch-to-html","tag-sketch-to-react","tag-tutorial"],"yoast_head":"\nSketch2React \u2014 How it works | 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\/sketch2react-how-it-works\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sketch2React \u2014 How it works - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Sometimes you have very little time to explain a lot of complex stuff. It\u2019s then that you need these type of articles. ? What better way to show how Sketch2React works than using the awesome GIF technology? Are you ready to give your\u00a0.sketchfiles super powers? ? Btw these are heavily compressed for faster loading times.… Read More »Sketch2React \u2014 How it works\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-16T08:26:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-29T16:25:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Sketch2React \u2014 How it works\",\"datePublished\":\"2018-06-16T08:26:38+00:00\",\"dateModified\":\"2020-11-29T16:25:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/\"},\"wordCount\":497,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg\",\"keywords\":[\"Handoff\",\"Quickstart\",\"Sketch To Html\",\"Sketch To React\",\"Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/\",\"name\":\"Sketch2React \u2014 How it works - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg\",\"datePublished\":\"2018-06-16T08:26:38+00:00\",\"dateModified\":\"2020-11-29T16:25:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sketch2React \u2014 How it works\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips & 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":"Sketch2React \u2014 How it works | 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\/sketch2react-how-it-works\/","og_locale":"en_US","og_type":"article","og_title":"Sketch2React \u2014 How it works - Sketch2React Blog","og_description":"Sometimes you have very little time to explain a lot of complex stuff. It\u2019s then that you need these type of articles. ? What better way to show how Sketch2React works than using the awesome GIF technology? Are you ready to give your\u00a0.sketchfiles super powers? ? Btw these are heavily compressed for faster loading times.… Read More »Sketch2React \u2014 How it works","og_url":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-06-16T08:26:38+00:00","article_modified_time":"2020-11-29T16:25:55+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Sketch2React \u2014 How it works","datePublished":"2018-06-16T08:26:38+00:00","dateModified":"2020-11-29T16:25:55+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/"},"wordCount":497,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg","keywords":["Handoff","Quickstart","Sketch To Html","Sketch To React","Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/","url":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/","name":"Sketch2React \u2014 How it works - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg","datePublished":"2018-06-16T08:26:38+00:00","dateModified":"2020-11-29T16:25:55+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*lUX-0xMBHDzG3widzhZgww.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-how-it-works\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Sketch2React \u2014 How it works"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips & 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\/86","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=86"}],"version-history":[{"count":4,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":690,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions\/690"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}