{"id":1614,"date":"2021-10-11T18:01:43","date_gmt":"2021-10-11T16:01:43","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1614"},"modified":"2021-10-17T22:26:41","modified_gmt":"2021-10-17T20:26:41","slug":"we-added-a-new-component-and-guess-what","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/","title":{"rendered":"We added a new component \u2014 and guess what?"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n
\r\n

It\u2019s wonderful and will change how you work with Sketch2React.<\/p>\r\n<\/blockquote>\r\n

Bold words yes but let me explain a bit of background. Without context, this will just be empty words taking up space on the inter webs.<\/p>\r\n

If you have followed me for a while, you will know that I love animation and motion design. One of the very first things that got me super excited back in early 2019 was when we added support for CSS plugins. What custom CSS excited me most?<\/p>\r\n

The true force of being able to animate elements in my designs inside Sketch with the amazing Animate.css library<\/a>. It blew my mind right open<\/a>.<\/p>\r\n

\"\"<\/a>
To be able to add a ready made animation library to separate components blew my mind<\/figcaption><\/figure>\r\n

I\u2019ve always pushed for animation within our framework. That\u2019s why we added Lottie and Haiku support very early on.<\/p>\r\n

What bugged me for a long time<\/h2>\r\n

I\u2019m a big fan of both Lottie<\/a> and Haiku but one thing that I\u2019m an even greater fan of is smarter workflows. I usually make simple animations using Keyshape<\/a>. The strength of Keyshape is that it\u2019s a super lightweight vector-based app that outputs code by default.<\/p>\r\n

No need for plugins or third-party libraries.<\/p>\r\n

What do I want to do in Sketch2React? The same.<\/p>\r\n

Enter {image-external}<\/h2>\r\n

This is a 100% true story. While talking with Fredrik over Slack about a week ago, he casually adds:<\/p>\r\n

\u201dHey Juan, by the way, I actually added a new component<\/strong> to Sketch2React. It\u2019s called {image-external}<\/strong> and it lets you host images and GIFs from your server. Actually, I added it a while ago, just forgot to tell you about it\u201d \u2026<\/p>\r\n

Whhaaaaaaaaaat?!!!!<\/em><\/p>\r\n

After I had come down from the shock of Fredrik forgetting to tell me about this, I quickly thought:<\/p>\r\n

\u201dHmm, if it works with images and GIFs, what about animated SVGs?\u201d<\/p>\r\n

Drum roll. <\/em><\/p>\r\n

Yes, it does, and here\u2019s living proof.<\/p>\r\n

https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/animation-external.mp4<\/a><\/video><\/div>\r\n

Why I\u2019m excited<\/h2>\r\n

For me, creating an animation in Keyshape, exporting it as SVG CSS and then just uploading it to an FTP server is way easier, quicker and more enjoyable than the alternatives.<\/p>\r\n

Don\u2019t get me wrong, I really love the Lottie format, but this workflow is cleaner. This way I know it will work in from the get go without the need to install anything else.<\/p>\r\n

It even works inside buttons<\/h2>\r\n
\"\"<\/a>
Animated buttons I say why not?<\/figcaption><\/figure>\r\n

While putting together a simple demo<\/a> for you guys, the thought of also having small animated elements inside e.g a button became something I really needed to explore.<\/p>\r\n

Why not, I say. Let\u2019s push this as far as we can imagen with the things we have. Modus Operandi Team Sketch2React.<\/p>\r\n

A few failures later and it worked fine. You can just grab my findings and components from the free demo above, we hope it will bring you much joy.<\/p>\r\n

Important side note<\/h2>\r\n

You need our latest Sketch2React stable version<\/a> for this to work, but we will add it to our free demo in a near future. Stay tuned folks.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\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\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
<\/div>\r\n<\/div>\r\n<\/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

That\u2019s it for this time, we hope you will have as much fun with {image-external} as we do.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"

It\u2019s wonderful and will change how you work with Sketch2React. Bold words yes but let me explain a bit of background. Without context, this will just be empty words taking up space on the inter webs. If you have followed me for a while, you will know that I love animation and motion design. One… Read More »We added a new component \u2014 and guess what?<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1626,"comment_status":"open","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":70,"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":[199,91,201,200,55],"class_list":["post-1614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-miscellaneous","tag-animations","tag-components","tag-gif","tag-images","tag-sketch2react"],"yoast_head":"\nWe added a new component \u2014 and guess what? | 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\/we-added-a-new-component-and-guess-what\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"We added a new component \u2014 and guess what? - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"It\u2019s wonderful and will change how you work with Sketch2React. Bold words yes but let me explain a bit of background. Without context, this will just be empty words taking up space on the inter webs. If you have followed me for a while, you will know that I love animation and motion design. One… Read More »We added a new component \u2014 and guess what?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-11T16:01:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-17T20:26:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3840\" \/>\n\t<meta property=\"og:image:height\" content=\"2160\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"We added a new component \u2014 and guess what?\",\"datePublished\":\"2021-10-11T16:01:43+00:00\",\"dateModified\":\"2021-10-17T20:26:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/\"},\"wordCount\":575,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png\",\"keywords\":[\"Animations\",\"Components\",\"GIF\",\"Images\",\"Sketch2react\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/\",\"name\":\"We added a new component \u2014 and guess what? - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png\",\"datePublished\":\"2021-10-11T16:01:43+00:00\",\"dateModified\":\"2021-10-17T20:26:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png\",\"width\":3840,\"height\":2160},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"We added a new component \u2014 and guess what?\"}]},{\"@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":"We added a new component \u2014 and guess what? | 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\/we-added-a-new-component-and-guess-what\/","og_locale":"en_US","og_type":"article","og_title":"We added a new component \u2014 and guess what? - Sketch2React Blog","og_description":"It\u2019s wonderful and will change how you work with Sketch2React. Bold words yes but let me explain a bit of background. Without context, this will just be empty words taking up space on the inter webs. If you have followed me for a while, you will know that I love animation and motion design. One… Read More »We added a new component \u2014 and guess what?","og_url":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-10-11T16:01:43+00:00","article_modified_time":"2021-10-17T20:26:41+00:00","og_image":[{"width":3840,"height":2160,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"We added a new component \u2014 and guess what?","datePublished":"2021-10-11T16:01:43+00:00","dateModified":"2021-10-17T20:26:41+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/"},"wordCount":575,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png","keywords":["Animations","Components","GIF","Images","Sketch2react"],"articleSection":["Miscellaneous"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/","url":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/","name":"We added a new component \u2014 and guess what? - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png","datePublished":"2021-10-11T16:01:43+00:00","dateModified":"2021-10-17T20:26:41+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/image-external@2x.png","width":3840,"height":2160},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/we-added-a-new-component-and-guess-what\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"We added a new component \u2014 and guess what?"}]},{"@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\/1614","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=1614"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1614\/revisions"}],"predecessor-version":[{"id":1641,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1614\/revisions\/1641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1626"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}