{"id":65298,"date":"2026-06-26T08:37:28","date_gmt":"2026-06-25T23:37:28","guid":{"rendered":"https:\/\/designcompass.org\/?p=65298"},"modified":"2026-06-26T08:37:32","modified_gmt":"2026-06-25T23:37:32","slug":"figma-motion-config-2026","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2026\/06\/26\/figma-motion-config-2026\/","title":{"rendered":"Figma Motion Revealed"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Figma unveiled Figma Motion at Config 2026. It is a feature that allows you to create animations, screen transitions, and 3D transforms within Figma Design. Previously, you had to use the Prototype feature or separate motion tools, but now you can handle movements more directly within the Figma Canvas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The biggest change is the Timeline. A motion timeline including keyframes and presets has been added to Figma Design. Users can overlay movement on existing designs or create animations from scratch. You can also explain the desired movement to the Figma Agent to generate a starting point, and then modify it directly on the timeline. \u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Figma Motion also supports 3D transforms. You can rotate frames, vectors, and text around the z-axis and view a real-time preview while dragging. The results remain editable. You can export to CSS or link with MCP, allowing you to seamlessly integrate spatial motion created in your design with your code. &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The output formats are also wide-ranging. Figma Motion can export in CSS, JSON, React, MP4, WebM, Animated SVG, and GIF formats. You can create and share everything from short micro-interactions to product introduction motions within Figma. &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For users, the workflow changes significantly. Designers can handle screen and motion designs within the same file. PMs and developers can verify actual transitions and responsiveness more quickly, instead of just viewing static screens. During the development delivery process, the burden of verbally explaining &quot;how it should move&quot; is also reduced.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Figma Motion is available as an open beta on all plans. It has been rolled out sequentially since June 24, 2026, and can be used by switching the toolbar toggle to Motion in design files where you have editing permissions. &nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1912 \/ 1080;\" width=\"1912\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2026\/06\/Figma-motion-4.mov\" playsinline><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1912 \/ 1080;\" width=\"1912\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2026\/06\/Figma-motion-1.mov\" playsinline><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1912 \/ 1080;\" width=\"1912\" autoplay controls loop muted src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2026\/06\/Figma-motion-2.mov\" playsinline><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>More and Sources<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.figma.com\/blog\/introducing-figma-motion\/\">https:\/\/www.figma.com\/blog\/introducing-figma-motion\/<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>Figma\uac00 Config 2026\uc5d0\uc11c Figma Motion\uc744 \uacf5\uac1c\ud588\uc2b5\ub2c8\ub2e4. Figma Design \uc548\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158, \ud654\uba74 \uc804\ud658, 3D \ud2b8\ub79c\uc2a4\ud3fc\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4. \uae30\uc874\uc5d0\ub294 \ud504\ub85c\ud1a0\ud0c0\uc785 \uae30\ub2a5\uc774\ub098 \ubcc4\ub3c4 \ubaa8\uc158 \ud234\uc744 \ud568\uaed8 \uc368\uc57c \ud588\uc9c0\ub9cc, \uc774\uc81c Figma \uce94\ubc84\uc2a4 \uc548\uc5d0\uc11c \uc6c0\uc9c1\uc784\uc744 \ub354 \uc9c1\uc811 \ub2e4\ub8f0 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac00\uc7a5 \ud070 \ubcc0\ud654\ub294 \ud0c0\uc784\ub77c\uc778\uc785\ub2c8\ub2e4. Figma Design\uc5d0 \ud0a4\ud504\ub808\uc784\uacfc \ud504\ub9ac\uc14b\uc774 \ud3ec\ud568\ub41c \ubaa8\uc158 \ud0c0\uc784\ub77c\uc778\uc774 \ucd94\uac00\ub410\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \uae30\uc874 \ub514\uc790\uc778 \uc704\uc5d0 \uc6c0\uc9c1\uc784\uc744 \uc785\ud788\uac70\ub098, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":65302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[4,621],"tags":[],"class_list":["post-65298","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-service"],"acf":[],"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2026\/06\/@figma-8.22.jpg","publishpress_future_action":{"enabled":false,"date":"2026-08-10 17:54:38","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/65298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=65298"}],"version-history":[{"count":1,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/65298\/revisions"}],"predecessor-version":[{"id":65303,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/65298\/revisions\/65303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/65302"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=65298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=65298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=65298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}