{"id":724,"date":"2020-12-11T15:39:46","date_gmt":"2020-12-11T14:39:46","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=724"},"modified":"2021-05-17T11:01:56","modified_gmt":"2021-05-17T09:01:56","slug":"sketch2react-pro-tips-december-2020","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/","title":{"rendered":"Sketch2React Pro Tips December 2020"},"content":{"rendered":"\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">Hey guys! I realized the other day that, since the very beginning of our adventure as Team Sketch2React, I have tweeted a lot of pro tips on our <a href=\"https:\/\/twitter.com\/Sketch2R\">account<\/a>. Sometimes in the past I have gathered these and published them on our Medium blog. But today I felt like trying out something new. I like new.<\/p>\r\n<p class=\"\">So here are two really great pro tips but in video form instead, with explanations that are way easier to talk about than just write.<\/p>\r\n<p class=\"\">Also it\u2019s really nice to complement these kind of video tips with, yes you guessed it &#8211; yet another blog article!<\/p>\r\n<h3 class=\"\">Watch this first<\/h3>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React Pro Tips - December 2020\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/5ZLDV4TvY4E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<h3 class=\"\">Totally related links<\/h3>\r\n<p class=\"\">They will make sense if you first watch above video?<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li><a href=\"https:\/\/animate.style\/\" target=\"_blank\" rel=\"noopener\">Animate CSS<\/a><\/li>\r\n<li><a href=\"https:\/\/www.figma.com\/community\/plugin\/912763956481263896\/Ruri-Ruri-%E2%80%93-Artwork-Generator%0A\" target=\"_blank\" rel=\"noopener\">Ruri Ruri Artwork Generator<\/a> for Figma<\/li>\r\n<li><a href=\"https:\/\/twitter.com\/Sketch2R\/status\/1337059823666475009?s=20\" target=\"_blank\" rel=\"noopener\">Tweet 1<\/a><\/li>\r\n<li><a href=\"https:\/\/twitter.com\/Sketch2R\/status\/1336956341592743936?s=20\" target=\"_blank\" rel=\"noopener\">Tweet 2<\/a><\/li>\r\n<\/ul>\r\n<h3 class=\"\">The simple CSS I use<\/h3>\r\n<div>\r\n<blockquote class=\"\">\r\n<div>.centerityo {<\/div>\r\n<div>display: grid;<\/div>\r\n<div>place-items: center;<\/div>\r\n<div>}<\/div>\r\n<\/blockquote>\r\n<div class=\"\">The class name I have chosen, <em>centerityo<\/em>, you can call whatever you want. I&#8217;m just a big fan of silly names for my snippets, sooooo yeah<\/div>\r\n<div><\/div>\r\n<div>\r\n<div class=\"row bg-editor-hr-wrap\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div class=\"\">\r\n<p>&nbsp;<\/p>\r\n<div class=\"bg-hr bg-hr-16\" style=\"padding: 8px 0px; color: #4422d7;\"><\/div>\r\n<p>&nbsp;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<h1 id=\"9de1\" class=\"jf jg fl au jh ji jj il jk jl jm ip jn jo jp jq jr js jt ju jv jw jx jy jz ka cs\" data-selectable-paragraph=\"\">Upcoming Sketch2React News<\/h1>\r\n<p id=\"50f8\" class=\"ig ih fl ii b ij kc il im in kd ip iq ir ke it iu iv kf ix iy iz kg jb jc jd fd cs\" data-selectable-paragraph=\"\">Two really cool new features that we will be adding to our design to code ecosystem soon are:<\/p>\r\n<h2 id=\"95b2\" class=\"ku jg fl au jh kv kw kx jk ky kz la jn lb lc ld jr le lf lg jv lh li lj jz lk cs\" data-selectable-paragraph=\"\">Mini code editor as a Sketch plugin for Sketch2React<\/h2>\r\n<p id=\"bdcb\" class=\"ig ih fl ii b ij kc il im in kd ip iq ir ke it iu iv kf ix iy iz kg jb jc jd fd cs\" data-selectable-paragraph=\"\">You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.<\/p>\r\n<p id=\"f2ed\" class=\"ig ih fl ii b ij ik il im in io ip iq ir is it iu iv iw ix iy iz ja jb jc jd fd cs\" data-selectable-paragraph=\"\">Still early in development but here\u2019s a work in progress screenshot.<\/p>\r\n<figure id=\"attachment_736\" aria-describedby=\"caption-attachment-736\" style=\"width: 1976px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-736\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72.jpeg\" alt=\"\" width=\"1976\" height=\"918\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72.jpeg 1976w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-300x139.jpeg 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-1024x476.jpeg 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-768x357.jpeg 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-1536x714.jpeg 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-250x116.jpeg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-550x256.jpeg 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-800x372.jpeg 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-387x180.jpeg 387w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-646x300.jpeg 646w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/24FBE8C1-8EA1-45A5-B792-01450AB38D72-1076x500.jpeg 1076w\" sizes=\"auto, (max-width: 1976px) 100vw, 1976px\" \/><figcaption id=\"caption-attachment-736\" class=\"wp-caption-text\">A very early look at our mini code editor<\/figcaption><\/figure>\r\n<\/div>\r\n<\/div>\r\n<div><\/div>\r\n<div>\r\n<h1 id=\"6931\" class=\"jf jg fl au jh ji jj il jk jl jm ip jn jo jp jq jr js jt ju jv jw jx jy jz ka cs\" data-selectable-paragraph=\"\">Export as Gatsby.js project<\/h1>\r\n<p id=\"3e04\" class=\"ig ih fl ii b ij kc il im in kd ip iq ir ke it iu iv kf ix iy iz kg jb jc jd fd cs\" data-selectable-paragraph=\"\">A feature that we actually toyed around with, mentally that is, a year ago. Then it got reignited when we got an email from one of our community friends. See what great things can happen when you reach out and just ask?<\/p>\r\n<p id=\"4e69\" class=\"ig ih fl ii b ij ik il im in io ip iq ir is it iu iv iw ix iy iz ja jb jc jd fd cs\" data-selectable-paragraph=\"\">The best thing about <a class=\"bx je\" href=\"https:\/\/www.gatsbyjs.com\/\" rel=\"noopener nofollow\">Gatsby<\/a> is that it comes with an awesome thing called <strong class=\"ii ln\">automatic routing<\/strong>. In plain English that means that, for React, you will no longer need to link between your exported pages after code export, you can do it straight from inside Sketch!<\/p>\r\n<p id=\"6e88\" class=\"ig ih fl ii b ij ik il im in io ip iq ir is it iu iv iw ix iy iz ja jb jc jd fd cs\" data-selectable-paragraph=\"\">Also Gatsby comes with a great SEO plugin that is really well liked in the development community. And you can add a ton of stuff after you have exported to code, Gatsby has like a trillion of plugins.<\/p>\r\n<br>That&#8217;s it, have a great weekend.<\/div>\r\n<\/div>\r\n<div><\/div>\r\n<div><\/div>\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<div><\/div>\r\n<div><em>Your friends, Team Sketch2React<\/em><\/div>\r\n<\/div>\r\n<div><\/div>\r\n<div><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Hey guys! I realized the other day that, since the very beginning of our adventure as Team Sketch2React, I have tweeted a lot of pro tips on our account. Sometimes in the past I have gathered these and published them on our Medium blog. But today I felt like trying out something new. I like&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Sketch2React Pro Tips December 2020<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":728,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","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":[168],"tags":[177,43,55,191],"class_list":["post-724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneous","tag-css-animation","tag-prototyping","tag-sketch2react","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sketch2React Pro Tips December 2020 | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"Mini code editor as a Sketch plugin for Sketch2React ??\u200d?You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.\" \/>\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-pro-tips-december-2020\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sketch2React Pro Tips December 2020 - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Mini code editor as a Sketch plugin for Sketch2React ??\u200d?You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-11T14:39:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-17T09:01:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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-pro-tips-december-2020\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Sketch2React Pro Tips December 2020\",\"datePublished\":\"2020-12-11T14:39:46+00:00\",\"dateModified\":\"2021-05-17T09:01:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\"},\"wordCount\":422,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png\",\"keywords\":[\"CSS animation\",\"Prototyping\",\"Sketch2react\",\"Tutorials\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\",\"name\":\"Sketch2React Pro Tips December 2020 - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png\",\"datePublished\":\"2020-12-11T14:39:46+00:00\",\"dateModified\":\"2021-05-17T09:01:56+00:00\",\"description\":\"Mini code editor as a Sketch plugin for Sketch2React ??\u200d?You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sketch2React Pro Tips December 2020\"}]},{\"@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":"Sketch2React Pro Tips December 2020 | Sketch2React Blog","description":"Mini code editor as a Sketch plugin for Sketch2React ??\u200d?You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.","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-pro-tips-december-2020\/","og_locale":"en_US","og_type":"article","og_title":"Sketch2React Pro Tips December 2020 - Sketch2React Blog","og_description":"Mini code editor as a Sketch plugin for Sketch2React ??\u200d?You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.","og_url":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/","og_site_name":"Sketch2React Blog","article_published_time":"2020-12-11T14:39:46+00:00","article_modified_time":"2021-05-17T09:01:56+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png","type":"image\/png"}],"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-pro-tips-december-2020\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Sketch2React Pro Tips December 2020","datePublished":"2020-12-11T14:39:46+00:00","dateModified":"2021-05-17T09:01:56+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/"},"wordCount":422,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png","keywords":["CSS animation","Prototyping","Sketch2react","Tutorials"],"articleSection":["Miscellaneous"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/","url":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/","name":"Sketch2React Pro Tips December 2020 - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png","datePublished":"2020-12-11T14:39:46+00:00","dateModified":"2021-05-17T09:01:56+00:00","description":"Mini code editor as a Sketch plugin for Sketch2React ??\u200d?You will be able to add code snippets directly inside Sketch making things way faster and more accessible. No need to use an external code editor anymore when adding things like custom CSS, javascript, React code etc.","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/12\/s2r-protips-dec2020.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-pro-tips-december-2020\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Sketch2React Pro Tips December 2020"}]},{"@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\/724","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=724"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/724\/revisions"}],"predecessor-version":[{"id":949,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/724\/revisions\/949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/728"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}