{"id":441,"date":"2020-06-25T12:59:31","date_gmt":"2020-06-25T10:59:31","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=441"},"modified":"2021-05-17T11:03:53","modified_gmt":"2021-05-17T09:03:53","slug":"juans-best-keyshape-tips-tricks","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/","title":{"rendered":"Juans best Keyshape tips and tricks"},"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! Yesterday I had a presentation internally about <a href=\"https:\/\/www.keyshapeapp.com\">Keyshape<\/a>, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy ? ? \u2705<\/p>\r\n<p class=\"\">9 out of 10 times I use this marvellous animation app because it does so many things right:<\/p>\r\n<ul class=\"\" style=\"padding-bottom: 1em;\">\r\n<li>Easy to use interface that resembles a bit of Flash (in a good way ?)<\/li>\r\n<li>Amazing export options (CSS, Lottie, Android Vector Drawables, KeyshapeJS, MP4, GIF etc)<\/li>\r\n<li>The code output is clean and easy to implement in projects<\/li>\r\n<\/ul>\r\n<h1 class=\"\">Lottie import and export!<\/h1>\r\n<p class=\"\">Lottie is a hugely popular animation format that works about everywhere. Via the <a href=\"https:\/\/github.com\/Pixofield\/keyshape-lottie-format\">official Keyshape Lottie plugin<\/a> you add animation super powers to a very affordable app.<\/p>\r\n<h3 class=\"\">Many times when I need to animate something complex I usually do this:<\/h3>\r\n<ol class=\"\" style=\"padding-bottom: 1em;\">\r\n<li>Browse around <a href=\"https:\/\/lottiefiles.com\">Lottiefiles.com<\/a> to find an open source animation<\/li>\r\n<li>Download the Lottie JSON file and open it up inside Keyshape<\/li>\r\n<li>Change things like colors, timing etc<\/li>\r\n<li>Export the animation again to either Lottie or any other format that suits my current project needs<\/li>\r\n<li>If I export it again as Lottie I drag+drop it into <a href=\"https:\/\/lottiefiles.com\/preview\">Lottie Preview<\/a> for testing it out, distributing it further. All your animations that you add to preview and don\u2019t publish to Lottiefiles.com are by default private. But here\u2019s the neat thing, you can still share them with your developers. ? \u2764\ufe0f<\/li>\r\n<\/ol>\r\n<h1>Animate once, use everywhere<\/h1>\r\n<p class=\"\">Also, since I now have the animation inside Keyshape, it\u2019s a piece of cake exporting it or adapting it for several use case.<\/p>\r\n<p class=\"\">Some of you may now this, most of you won\u2019t: Keyshape is actually responsible for me doing video tutorials in the first place. When I started using it in 2017 there where the total amount of 0 video tutorials about Keyshape. I felt a strong need to start showing the world how awesome this little animation gem was. I still do!<\/p>\r\n<p class=\"\" style=\"padding: 0em 0em 1em;\">So without further notice, here are a couple of great tips I have gathered through my experience.<\/p>\r\n<p><div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Juan&#039;s Awesome Keyshape Tips (Vector based animation tool)\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/LM6lUXZ-0ts?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/p>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h1 class=\"\">Bonus beats<\/h1>\r\n<p class=\"\">As an added bonus, here&#8217;s Fredrik&#8217;s <a href=\"https:\/\/www.npmjs.com\/package\/react-keyshape\">NPM package<\/a> for easier use of Keyshape animations in React. Go team!<\/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\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","protected":false},"excerpt":{"rendered":"<p>Hey guys! Yesterday I had a presentation internally about Keyshape, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy ? ? \u2705 9 out of 10 times I use this marvellous animation app because it does so many things right: Easy to&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Juans best Keyshape tips and tricks<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":440,"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":[166],"tags":[4,44,69,191],"class_list":["post-441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-animation","tag-keyshape-app","tag-lottie","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Juans best Keyshape tips and tricks | 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\/juans-best-keyshape-tips-tricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Juans best Keyshape tips and tricks - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Hey guys! Yesterday I had a presentation internally about Keyshape, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy ? ? \u2705 9 out of 10 times I use this marvellous animation app because it does so many things right: Easy to&hellip;&nbsp;Read More &raquo;Juans best Keyshape tips and tricks\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-25T10:59:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-17T09:03:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg\" \/>\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\/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\/juans-best-keyshape-tips-tricks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Juans best Keyshape tips and tricks\",\"datePublished\":\"2020-06-25T10:59:31+00:00\",\"dateModified\":\"2021-05-17T09:03:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\"},\"wordCount\":368,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg\",\"keywords\":[\"Animation\",\"Keyshape App\",\"Lottie\",\"Tutorials\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\",\"name\":\"Juans best Keyshape tips and tricks - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg\",\"datePublished\":\"2020-06-25T10:59:31+00:00\",\"dateModified\":\"2021-05-17T09:03:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Juans best Keyshape tips and tricks\"}]},{\"@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":"Juans best Keyshape tips and tricks | 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\/juans-best-keyshape-tips-tricks\/","og_locale":"en_US","og_type":"article","og_title":"Juans best Keyshape tips and tricks - Sketch2React Blog","og_description":"Hey guys! Yesterday I had a presentation internally about Keyshape, my go-to tool for animating everything from icons to illustrations. Today I recorded an international version for all of you to enjoy ? ? \u2705 9 out of 10 times I use this marvellous animation app because it does so many things right: Easy to&hellip;&nbsp;Read More &raquo;Juans best Keyshape tips and tricks","og_url":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/","og_site_name":"Sketch2React Blog","article_published_time":"2020-06-25T10:59:31+00:00","article_modified_time":"2021-05-17T09:03:53+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg","type":"image\/jpeg"}],"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\/juans-best-keyshape-tips-tricks\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Juans best Keyshape tips and tricks","datePublished":"2020-06-25T10:59:31+00:00","dateModified":"2021-05-17T09:03:53+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/"},"wordCount":368,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg","keywords":["Animation","Keyshape App","Lottie","Tutorials"],"articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/","url":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/","name":"Juans best Keyshape tips and tricks - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg","datePublished":"2020-06-25T10:59:31+00:00","dateModified":"2021-05-17T09:03:53+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2020\/06\/JuansKeyshapeTips.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/juans-best-keyshape-tips-tricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Juans best Keyshape tips and tricks"}]},{"@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\/441","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=441"}],"version-history":[{"count":7,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/441\/revisions\/470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/440"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}