{"id":102,"date":"2018-10-02T10:15:35","date_gmt":"2018-10-02T08:15:35","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/10\/02\/how-to-add-haiku-animations-to-sketch2react\/"},"modified":"2020-06-18T07:39:42","modified_gmt":"2020-06-18T07:39:42","slug":"how-to-add-haiku-animations-to-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/","title":{"rendered":"How to add Haiku animations to Sketch2React"},"content":{"rendered":"<p>? Wooo-peeeee-dooo!<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg\"><br \/>\n<\/figure>\n<blockquote><p>Turns out September has been quite busy for us\u200a\u2014\u200athank a long vacay over the summer for that \u2600\ufe0f Builds up the hunger for innovation ?\u200d?<\/p><\/blockquote>\n<p>We released another small but really important update\u200a\u2014\u200a<strong>0.56<\/strong> which brings you the ability to embed <a href=\"https:\/\/www.haiku.ai\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Haiku animations<\/strong><\/a> directly into Sketch via our framework.<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"480\" data-height=\"480\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*oT5VQEP3Wg2WaUqyyv-djg.gif\"><br \/>\n<\/figure>\n<h4>What is\u00a0Haiku?<\/h4>\n<p>Haiku aims to be many things but for us Haiku means <strong>motion<\/strong>. That can be interactive. Depends on your needs really. But just to be able to embed this into Sketch2React inside of Sketch is mind blowing enough!<\/p>\n<p><a href=\"https:\/\/tenor.com\/X76v.gif\">https:\/\/tenor.com\/X76v.gif<\/a><\/p>\n<h3>How to<\/h3>\n<p><a href=\"https:\/\/www.dropbox.com\/s\/e8fawpos927t9cp\/Haiku%20demo.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download the new demo file<\/a> and try it out for yourselves. Here\u2019s a bunch of great <a href=\"https:\/\/share.haiku.ai\/\" target=\"_blank\" rel=\"noopener noreferrer\">open source animations<\/a> you can play around with.<\/p>\n<p>Or you can <a href=\"https:\/\/share.haiku.ai\/u\/Sketch2React\/SuperHero\" target=\"_blank\" rel=\"noopener noreferrer\">this one by us<\/a>, a very basic animation that has come click-enabled interactivity.<\/p>\n<h3>Basic tutorial<\/h3>\n<ul>\n<li>Find you some cool example animations <a href=\"https:\/\/share.haiku.ai\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>\n<\/li>\n<li>Press the <strong>Embedd Options <\/strong>button<\/li>\n<li>Go to <strong>HTML Embed<\/strong>\n<\/li>\n<\/ul>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1163\" data-height=\"1091\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*6Jr9JxQ4AQM8GRVV2LeEdA.gif\"><figcaption class=\"wp-caption-text\">This is where you find all relevant\u00a0code<\/figcaption><\/figure>\n<ul>\n<li>Open up our demo doc<\/li>\n<li>Go to the new <em>Haiku-animation<\/em> component. It\u2019s a symbol with overrides.<\/li>\n<\/ul>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1406\" data-height=\"1074\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*adOSQ3IjzNQEzlGaLcb58g.png\"><figcaption class=\"wp-caption-text\">Here\u2019s where all the magic needs to be\u00a0inserted<\/figcaption><\/figure>\n<h3>? Let\u2019s look at the overrides<\/h3>\n<p><strong>{attribute.haikuSettings}<\/strong><\/p>\n<p>By default the only value here is {loop.true} but we added <strong>{loop:true, contextMenu: \u2018disabled\u2019}<\/strong> which disables a very annoying banner that is always included in all Haiku animations by default.<\/p>\n<p><strong>{attribute.animationSourceUrl}<\/strong><\/p>\n<p>This is where the animation lives on Haikus servers. And this is where you fetch that code:<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1163\" data-height=\"1091\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*QxZe1FaMpEpnq4s41WcXvQ.gif\"><figcaption class=\"wp-caption-text\">Copy this code into our Haiku symbol inside of\u00a0Sketch<\/figcaption><\/figure>\n<p><strong>Important! <\/strong>Every time you update your animation from within Haiku and re-upload everything in this code snippet changes and needs to be updated inside of Sketch.<\/p>\n<p><strong>{attribute.id}<\/strong><\/p>\n<p>You find it here (check below) and in this case it\u2019s <em>mount-Sketch2React-SuperHero. <\/em>Copy+paste that into our symbol in Sketch.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1163\" data-height=\"1091\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*Jp0xyvyeYsJFiwYmc6ej1g.gif\"><figcaption class=\"wp-caption-text\">Copy this code into our Haiku symbol inside of\u00a0Sketch<\/figcaption><\/figure>\n<p><strong>{attribute.haikuCoreUrl}<\/strong><\/p>\n<p>This is the Haiku Core (<em>sounds important!<\/em> ?) and this one updates from time to time, be sure to check this one if your animation suddenly stops working. Even more important to check it if you\u2019re using animations you haven\u2019t created yourselves.<\/p>\n<h3>Your done!<\/h3>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"723\" data-height=\"1061\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*UfdBpe0JV6K24a2x33QRag.gif\"><figcaption class=\"wp-caption-text\">Boom-shaka-lack<\/figcaption><\/figure>\n<p>Great work! By now you probably are very excited on how to combine Haiku with Sketch2React. Here\u2019s a great resource for learning the app:<\/p>\n<p><a href=\"https:\/\/www.haiku.ai\/learn\/\">https:\/\/www.haiku.ai\/learn\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>? Wooo-peeeee-dooo! Turns out September has been quite busy for us\u200a\u2014\u200athank a long vacay over the summer for that \u2600\ufe0f Builds up the hunger for innovation ?\u200d? We released another small but really important update\u200a\u2014\u200a0.56 which brings you the ability to embed Haiku animations directly into Sketch via our framework. What is\u00a0Haiku? Haiku aims to&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to add Haiku animations to Sketch2React<\/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":[4,91,62,10],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-animation","tag-components","tag-haiku","tag-sketch"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add Haiku animations to Sketch2React | 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-add-haiku-animations-to-sketch2react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add Haiku animations to Sketch2React - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"? Wooo-peeeee-dooo! Turns out September has been quite busy for us\u200a\u2014\u200athank a long vacay over the summer for that \u2600\ufe0f Builds up the hunger for innovation ?\u200d? We released another small but really important update\u200a\u2014\u200a0.56 which brings you the ability to embed Haiku animations directly into Sketch via our framework. What is\u00a0Haiku? Haiku aims to&hellip;&nbsp;Read More &raquo;How to add Haiku animations to Sketch2React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-02T08:15:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:39:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.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\/how-to-add-haiku-animations-to-sketch2react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to add Haiku animations to Sketch2React\",\"datePublished\":\"2018-10-02T08:15:35+00:00\",\"dateModified\":\"2020-06-18T07:39:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\"},\"wordCount\":410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg\",\"keywords\":[\"Animation\",\"Components\",\"Haiku\",\"Sketch\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\",\"name\":\"How to add Haiku animations to Sketch2React - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg\",\"datePublished\":\"2018-10-02T08:15:35+00:00\",\"dateModified\":\"2020-06-18T07:39:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add Haiku animations to Sketch2React\"}]},{\"@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 add Haiku animations to Sketch2React | 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-add-haiku-animations-to-sketch2react\/","og_locale":"en_US","og_type":"article","og_title":"How to add Haiku animations to Sketch2React - Sketch2React Blog","og_description":"? Wooo-peeeee-dooo! Turns out September has been quite busy for us\u200a\u2014\u200athank a long vacay over the summer for that \u2600\ufe0f Builds up the hunger for innovation ?\u200d? We released another small but really important update\u200a\u2014\u200a0.56 which brings you the ability to embed Haiku animations directly into Sketch via our framework. What is\u00a0Haiku? Haiku aims to&hellip;&nbsp;Read More &raquo;How to add Haiku animations to Sketch2React","og_url":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-10-02T08:15:35+00:00","article_modified_time":"2020-06-18T07:39:42+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.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\/how-to-add-haiku-animations-to-sketch2react\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to add Haiku animations to Sketch2React","datePublished":"2018-10-02T08:15:35+00:00","dateModified":"2020-06-18T07:39:42+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/"},"wordCount":410,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg","keywords":["Animation","Components","Haiku","Sketch"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/","url":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/","name":"How to add Haiku animations to Sketch2React - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg","datePublished":"2018-10-02T08:15:35+00:00","dateModified":"2020-06-18T07:39:42+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*kmH-zzlo57QLzp8GqdZuBw.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-add-haiku-animations-to-sketch2react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add Haiku animations to Sketch2React"}]},{"@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\/102","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=102"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/102\/revisions\/346"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}