{"id":46602,"date":"2025-02-19T14:41:41","date_gmt":"2025-02-19T19:41:41","guid":{"rendered":"https:\/\/inside.wooster.edu\/technology\/?p=46602"},"modified":"2025-04-07T16:40:54","modified_gmt":"2025-04-07T20:40:54","slug":"animated-character-design-with-figma-lottiefiles","status":"publish","type":"post","link":"https:\/\/inside.wooster.edu\/technology\/animated-character-design-with-figma-lottiefiles\/","title":{"rendered":"Character Design Animation with Figma &amp; LottieFiles\u00a0"},"content":{"rendered":"\n<p>Register for the workshop here: <a href=\"https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/\">https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/<\/a><\/p>\n\n\n\n<p>Download <strong>Workshop File<\/strong> here: <a href=\"https:\/\/www.figma.com\/design\/I92JwShkrsUWVhweUkXOTv\/Figma---Framer-Portfolio-Workshop-%5BYour-Name%5D-(Copy)?node-id=4005-288&amp;t=wmLngxrS1meJe7n4-1\">https:\/\/www.figma.com\/design\/I92JwShkrsUWVhweUkXOTv\/Figma&#8212;Framer-Portfolio-Workshop-%5BYour-Name%5D-(Copy)?node-id=4005-288&amp;t=wmLngxrS1meJe7n4-1<\/a><\/p>\n\n\n\n<h2 id=\"overview\" class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p><strong>Date:<\/strong> Monday, March 03, 2025<br><strong>Time:<\/strong> 5:00 PM \u2013 6:30 PM<br><strong>Location:<\/strong> online via <a href=\"https:\/\/events.teams.microsoft.com\/event\/50257773-5b14-4ebd-a7bc-e449325c108c@9ef017d9-7f05-4225-9838-f92cff57b7ab\">Microsoft Teams <\/a>or College of Wooster&#8217;s CoRE cube (1st floor)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"256\" src=\"https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Agenda-post-header-1024x256.png\" alt=\"\" class=\"wp-image-46694\" srcset=\"https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Agenda-post-header-1024x256.png 1024w, https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Agenda-post-header-750x188.png 750w, https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Agenda-post-header-768x192.png 768w, https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Agenda-post-header-1536x384.png 1536w, https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Agenda-post-header-2048x512.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 id=\"agenda\" class=\"wp-block-heading\">Agenda<\/h2>\n\n\n\n<p><strong>5:00 PM \u2013 5:10 PM<\/strong><br><strong>Welcome and Introductions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Overview of the session\u2019s goal: Animated character design with Figma &amp; LottieFiles<\/li>\n\n\n\n<li>Brief introductions from attendees (if applicable)<\/li>\n\n\n\n<li>Introduction to the presenters<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><strong>5:10 PM \u2013 5:30 PM<\/strong><br><strong>Introduction to Figma for Animation Design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Overview of Figma&#8217;s interface and key features<\/li>\n\n\n\n<li>How to create and design characters in Figma<\/li>\n\n\n\n<li>Demonstration of designing a simple animated character in Figma<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><strong>5:30 PM \u2013 5:50 PM<\/strong><br><strong>Introduction to LottieFiles for Animation Export &amp; Integration<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is LottieFiles and how it works with Figma<\/li>\n\n\n\n<li>Exporting animations from Figma to LottieFiles<\/li>\n\n\n\n<li>Importing and implementing Lottie animations in web and mobile projects<\/li>\n\n\n\n<li>Demonstration of exporting a character animation to LottieFiles<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><strong>5:50 PM \u2013 6:10 PM<\/strong><br><strong>Hands-On Activity: Create Your Own Animated Character<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Participants design a simple character in Figma<\/li>\n\n\n\n<li>Animate a basic movement or action using Figma&#8217;s features<\/li>\n\n\n\n<li>Export the animation to LottieFiles<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><strong>6:10 PM \u2013 6:20 PM<\/strong><br><strong>Showcase &amp; Q&amp;A<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Attendees can showcase their animated characters<\/li>\n\n\n\n<li>Open the floor for questions and troubleshooting<\/li>\n\n\n\n<li>Sharing additional tips and tricks for both Figma and LottieFiles<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<p><strong>6:20 PM \u2013 6:30 PM<\/strong><br><strong>Wrap-Up and Next Steps<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recap key takeaways from the workshop<\/li>\n\n\n\n<li>Additional resources for learning Figma and LottieFiles<\/li>\n\n\n\n<li>Final questions and closing remarks<\/li>\n\n\n\n<li>Information about any follow-up resources or sessions<\/li>\n<\/ul>\n\n\n\n<p>Register for the workshop here: <a href=\"https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/\">https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/<\/a><\/p>\n\n\n\n<p>Download <strong>Workshop File<\/strong> here: [link tbu]<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>See you soon! ~<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Register for the workshop here: https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/ Download Workshop File here: https:\/\/www.figma.com\/design\/I92JwShkrsUWVhweUkXOTv\/Figma&#8212;Framer-Portfolio-Workshop-%5BYour-Name%5D-(Copy)?node-id=4005-288&amp;t=wmLngxrS1meJe7n4-1 Overview Date: Monday, March 03, 2025Time: 5:00 PM \u2013 6:30 PMLocation: online via Microsoft Teams or College of Wooster&#8217;s CoRE cube (1st floor) Agenda 5:00 PM \u2013 5:10 PMWelcome and Introductions 5:10 PM \u2013 5:30 PMIntroduction to Figma for Animation Design 5:30 PM \u2013 [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":46689,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"categories":[101,50,66],"tags":[],"coauthors":[409],"class_list":["post-46602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3d-design","category-student-workshops","category-workshops"],"acf":[],"gutentor_comment":0,"featured_image_urls":{"full":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image.png",1920,1080,false],"thumbnail":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-150x150.png",150,150,true],"medium":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-750x422.png",750,422,true],"medium_large":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-768x432.png",768,432,true],"large":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-1024x576.png",1024,576,true],"1536x1536":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-1536x864.png",1536,864,true],"2048x2048":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image.png",1920,1080,false]},"post_excerpt_stackable":"<p>Register for the workshop here: https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/ Download Workshop File here: https:\/\/www.figma.com\/design\/I92JwShkrsUWVhweUkXOTv\/Figma&#8212;Framer-Portfolio-Workshop-%5BYour-Name%5D-(Copy)?node-id=4005-288&amp;t=wmLngxrS1meJe7n4-1 Overview Date: Monday, March 03, 2025Time: 5:00 PM \u2013 6:30 PMLocation: online via Microsoft Teams or College of Wooster&#8217;s CoRE cube (1st floor) Agenda 5:00 PM \u2013 5:10 PMWelcome and Introductions Overview of the session\u2019s goal: Animated character design with Figma &amp; LottieFiles Brief introductions from attendees (if applicable) Introduction to the presenters 5:10 PM \u2013 5:30 PMIntroduction to Figma for Animation Design Overview of Figma&#8217;s interface and key features How to create and design characters in Figma Demonstration of designing a simple animated character in Figma 5:30 PM&hellip;<\/p>\n","category_list":"<a href=\"https:\/\/inside.wooster.edu\/technology\/category\/technologies\/digital-media\/3d-design\/\" rel=\"category tag\">3D Design<\/a>, <a href=\"https:\/\/inside.wooster.edu\/technology\/category\/workshops\/student-workshops\/\" rel=\"category tag\">Student Workshops<\/a>, <a href=\"https:\/\/inside.wooster.edu\/technology\/category\/workshops\/\" rel=\"category tag\">Workshops<\/a>","author_info":{"name":"Minh Phan","url":"https:\/\/inside.wooster.edu\/technology\/author\/mphan24wooster-edu\/"},"comments_num":"0 comments","uagb_featured_image_src":{"full":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image.png",1920,1080,false],"thumbnail":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-150x150.png",150,150,true],"medium":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-750x422.png",750,422,true],"medium_large":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-768x432.png",768,432,true],"large":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-1024x576.png",1024,576,true],"1536x1536":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image-1536x864.png",1536,864,true],"2048x2048":["https:\/\/inside.wooster.edu\/technology\/wp-content\/uploads\/sites\/83\/2025\/02\/Featured-Image.png",1920,1080,false]},"uagb_author_info":{"display_name":"Minh Phan","author_link":"https:\/\/inside.wooster.edu\/technology\/author\/mphan24wooster-edu\/"},"uagb_comment_info":0,"uagb_excerpt":"Register for the workshop here: https:\/\/inside.wooster.edu\/technology\/events\/figma-lottie\/ Download Workshop File here: https:\/\/www.figma.com\/design\/I92JwShkrsUWVhweUkXOTv\/Figma&#8212;Framer-Portfolio-Workshop-%5BYour-Name%5D-(Copy)?node-id=4005-288&amp;t=wmLngxrS1meJe7n4-1 Overview Date: Monday, March 03, 2025Time: 5:00 PM \u2013 6:30 PMLocation: online via Microsoft Teams or College of Wooster&#8217;s CoRE cube (1st floor) Agenda 5:00 PM \u2013 5:10 PMWelcome and Introductions 5:10 PM \u2013 5:30 PMIntroduction to Figma for Animation Design 5:30 PM \u2013&hellip;","_links":{"self":[{"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/posts\/46602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/comments?post=46602"}],"version-history":[{"count":9,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/posts\/46602\/revisions"}],"predecessor-version":[{"id":46708,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/posts\/46602\/revisions\/46708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/media\/46689"}],"wp:attachment":[{"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/media?parent=46602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/categories?post=46602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/tags?post=46602"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/inside.wooster.edu\/technology\/wp-json\/wp\/v2\/coauthors?post=46602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}