Motion Design with Figma: Animations, Motion Graphics, UX/UI

Explore common misconceptions about motion design, including the idea that motion tells stories and that motion is only an afterthought, when transitions guide user interactions in UX.

Align motion with usability by meeting expectations and reducing gaps between perception and experience. Ensure consistency across user flow and scenes, linking continuity with spatial, aesthetic, and hierarchical attributes throughout.

Motion explains UI transitions, aligning with UX content and user mental models. Employ skeuomorphic behavior, rules, and interactional cues to connect objects with expectations.

Explore microinteractions, contained product moments for single use cases, that make user experiences smooth and convey brand tone. See examples like alarms, notifications, and Facebook reactions.

Explore Dan Stafford's four essential parts of a microinteraction—trigger, rules, feedback, and loops and modes—and learn how these elements shape effective motion design in user interfaces.

Identify which elements qualify as microinteractions by examining moving elements and feedback triggers, illustrated with examples like scroll bars, interactive buttons, pulling to refresh, swiping, and notifications.

Discover how microinteractions shape user experiences by providing feedback, preventing errors, and guiding actions across tasks like signing up, swiping, and pulling to refresh.

Review how motion design streamlines user interactions, supports usability, and builds mental models, while clarifying misconceptions and outlining micro-interactions with triggers, rules, feedback, modes, and loops.

Choose your path in motion design with Figma: beginners follow an introduction to Figma before diving into motion design, while experienced designers skip ahead to motion design content.

Discover Figma’s design and collaboration workflow, from prototyping and sharing to components and design systems, and learn to get started for free at figma.com.

Access Figma from desktop or browser, install the app via downloads, log in, and start a new design file with a user-friendly interface.

Figma in the browser, search and manage your account with themes, settings, and desktop app options, and organize files by drafts, projects, and teams while tracking activity and notifications.

Create and import design files, duplicate and rename them, and manage your workspace with favorites and deletions while navigating the canvas, left and right sidebars, and the toolbar.

Explore the Figma toolbar, mastering menu options, file operations, editing and view controls, object and text formatting, boolean and vector tools, plugins, libraries, preferences, shortcuts, and collaboration features for prototyping.

Explore the left sidebar in figma, with frames, shapes, groups, and components, plus nesting, renaming, lock/hide, and the assets panel for reusable master components, propagating changes to instances.

Explore the Figma right sidebar to master alignment, sizing, constraints, auto layout, layer styles, text settings, effects, export options, and prototyping flows within a device.

Compare groups, frames, and sections as containers in Figma. Frames provide device-sized scaffolds with own properties and auto layout, while sections label regions for collaboration, handoff, and layout grids.

Explore basic shapes in Figma, including rectangles, ellipses, lines, and arrows, and learn boolean operations: union, subtract, intersect, and exclude, for creating custom vector shapes and logos.

Learn to import images into figma with the Unsplash plugin, drag and drop, or desktop import, then crop, reposition, scale, rotate, and apply fill, fit, borders, and exposure controls.

Learn to design with text in Figma by creating text layers, adjusting fonts, size, line height, letter spacing, paragraph spacing, alignment, lists, and truncating with ellipses.

Explore how constraints steer how layers resize within frames in Figma, using horizontal and vertical constraints to control left, right, top, and bottom behavior across devices.

Explore auto layout in Figma by examining a card with nested auto layout frames, fill and hug behaviors, and responsive padding, gap, and auto spacing for scalable design.

Access inspiration, design systems, plugins, and icon kits via the Explore community section. Open a file in Figma to add it to drafts and start working.

Explore the Figma community and boost your workflow with plugins like Unsplash. Learn to search, bookmark, install, and open plugins in new files to accelerate design tasks.

Share frames or selections by link, set who can view or edit, and collaborate in real time with cursors, comments, and threaded replies to communicate flows.

Learn to build a responsive landing page in Figma with auto layout, logo shapes, and navigation and buttons. Use Unsplash, Lorem ipsum, and Material Design icon plugins, plus end-of-lesson assignment.

Explore Figma basics by creating a quick logo with shapes: use the shape tool, form an arc, tilt the start, fix the ratio, and apply color with the eyedropper.

Create responsive auto layout buttons in Figma by building a primary button with 44px height and 24px padding, plus a secondary stroke button and a text button with an icon.

Build a responsive navigation in Figma by nesting a logo and nav items in an autolayout frame, and set 40 px left, right, 20 px top, bottom padding.

Design a responsive text frame on MacBook Air with a black background and white headline deploy to the cloud with confidence, using fill text and auto layout for resizing.

Explore imagery and gradients in Figma by applying a background image to a frame with the Unsplash plugin, layering fills, and building a gradient from dark bottom to light top.

Arrange assets into button, content, and banner frames, apply left-right center constraints, and use auto layout with 640 px max width to create a responsive navigation and text button layout.

Create a responsive landing page in Figma, including a logo, buttons, and navigation, using Autolayout for a flexible layout, and share your work on Discord for feedback.

Explore smart animate basics in Figma to craft parallax, messages, overlays, and an interactive button using built-in properties and assets.

Explore smart animate in Figma by animating scale, position, opacity, rotation, and fill across frames. Keep identical layer names to drive seamless transitions and mix multiple properties in prototypes.

Explore Smart Animate basics in prototyping, from swapping elements and navigating between frames to customizing easing, durations, and spring settings for natural, bouncy transitions.

Master rapid parallax effects by duplicating frames, using smart animate on position and opacity, and adjusting after delay to create layered motion in prototypes.

Design and prototype a new message micro interaction in Figma by building three screens, animating a red notification with after delay spring motion and a subtle bounce.

Create overlays in your frames to build hover tooltips and reveal information without a modal. Use auto layout, 300ms ease-out hover interactions, and a simple overlay setup in prototypes.

Create an interactive button with default and hover states using variants and components; prototype with smart animate and auto layout, and embed an interactive form with checkboxes across frames.

Design and prototype an interactive button in Figma by building a multi-state component with hover and pressed variants, applying color changes, movement, and a bouncy spring animation.

Build interactive icons and prototypes in figma, recreating category transitions and micro-interactions. Leverage the photo inspiration resource and plugins like material design icons and unsplash to craft attractive screens.

Explore how to build category transitions in a Figma prototype by linking three home screens, using smart animate, fade effects, and drag navigation between matching layers.

Create interactive icon buttons in Figma by implementing micro-interactions with outline and filled icons, a circular 32×32 background, and state variants for pressed and loved.

Assemble interactive icons into a frame, then test micro-interactions in prototype mode to simulate liking, navigating, and adding favorites with auto spacing and padding.

Create a punchy screen transition prototype in Figma by masking an image to reveal a main image with parallax, using staggered, named layers and a 300 ms after-delay animation.

Learn to create a simple horizontal scroll in Figma by setting a gallery container to horizontal overflow and fill container, prototype the flow, and preview the scrolling motion.

Discover hijacked horizontal scrolling by building a multi-page prototype in Figma, using on-drag actions to move between photos with gentle smart animation.

Complete the assignment by creating interactive components for a photo inspiration mobile app, exploring navigation state transitions, like and save actions, and gallery flows across prototypes.

Explore easing to align UI motion with user expectations, compare it to linear motion, and see how natural acceleration and deceleration create continuity and naturalism in interface animations.

Offset and delay define relationships and hierarchies among moving UI elements, signaling related yet distinct functionality and creating a staggered, one after another motion that reveals multiple interaction options.

Explore how parenting links properties between a parent and child UI element, creates hierarchy, and enables multiple elements to react together as the slider and numbers move.

Learn how transformation creates a smooth narrative flow by turning one UI element into another, such as a download or play button evolving into a progress bar or audio icon.

Value change creates a dynamic narrative by updating numerical or graphic representations in digital interfaces, from banking apps to calendars. See how changing data signals interactivity and sustains user engagement.

Explore how masking reveals and conceals parts of a UI element, creating continuity and progressing through interactions, like a card turning into a profile avatar and expanding to next page.

Overlay simulates depth in 2D UI by hiding and revealing elements along the x and y axes to establish a z-axis hierarchy, creating foreground/background distinctions and guiding spatial orientation.

Learn cloning as a motion behavior where a UI element splits into others to highlight important information and reveal options, with a clear origin linking to on-screen elements.

Explore obscuration as a design technique that spatially orients users by revealing a hint of the next screen while requiring interaction, such as menus or passcodes overlaying content.

Explore parallax to create spatial hierarchy as users scroll. Interactive elements move faster in the foreground, while non-interactive content recedes to emphasize immediacy and ambient content.

Explore dimensionality to link UI element sides and enable seamless screen transitions. Learn origami dimensionality, floating dimensionality, and object dimensionality, including foldable, flippable, and depth-rich interactions.

Preserve continuity and spatial narrative by using dolly and zoom to navigate UI elements, moving the point of view closer or farther or zooming to reveal details.

Create a suite of motion design patterns in Figma, including navigation, scrolling, paging, dragging, micro-interactions, and delight animations, and duplicate these resources at the top.

Build a navigation system in Figma using auto layout components and icons. Duplicate and arrange assets, create a navigation frame named nav items, and set up transitions.

Build a simple navigation prototype in Figma by creating icon variants with default and active states, organizing as components with auto layout and smart animate.

Build advanced navigation transitions by creating multiple icon states, including an active state, with a five-step animation sequence and prototype flow for a complex home navigation.

Design a heart navigation interaction in Figma by duplicating hearts, aligning, clipping content, and linking scale and timing to create a sequence of animations for home, cart, and settings.

Create a cart interactive component and bring navigation to life by animating cart with variants, keyframes, delays, and rotations alongside home and heart icons in Figma.

Create a complex settings navigation by duplicating assets, setting animation sequences, and linking rotated components with on-click triggers and delays, guiding spins through home, heart, cart, and settings.

Explore building interactive navigation with icons and custom spring animation in Figma, using auto layout, variants, and component states to prototype a multi-tab UI.

Create a landing page prototype in Figma using auto layout, a gradient overlay, and parallax layers with the CN tower over Toronto lettering; duplicate assets and stagger content delivery.

Create anchor links to enable scrolling navigation on a landing page, using on-click actions to jump to sections and back to the top with a gentle 2000 animation.

Build simple parallax animations in Figma by duplicating assets, staggering content, and syncing layered movements to create a two-page prototype with timed reveals.

Extend an extended parallax in a Figma prototype by duplicating scenes, setting a 800–1500 ms delay, adjusting overlays and headings, and creating an intro for a landing page.

Create pagination using carousel dots in Figma, building default, hover, and active states with interactive components and smart animate. Set up a carousel prototype and reset component states for navigation.

Build a reusable pagination control in Figma using left and right arrows, hover and pressed states, a disabled state, and a text page indicator.

Learn to build a draggable listing card in Figma by duplicating assets, creating three image states, and configuring a carousel that drags to push between images.

Learn to implement app scrolling with overflow and fixed elements in Figma, using 375 px device widths, sticky headers, and prototyping to create seamless drag and scroll effects.

Learn to build a drag-and-drop interaction in Figma by creating four frames and using smart animate for drag transitions, hover effects, and a drop shadow between in-progress and done.

Master microinteractions in Figma by building a simple file uploader with states, a loader animation from 0 to 100, and a background reveal using smart animate.

Explore microinteractions for an uploader success animation, extending a simple upload to reveal a loader, a check mark, and a complete message with subtle bounce.

Explore how to build a cancel upload microinteraction in a Figma prototype. Add a loading indicator and background loader, with a dissolve transition to show cancellation.

Learn to design and prototype a two-state like button in Figma, including default, hover, and pressed states, a liked state, color and drop shadow tweaks, and toggle flow with timing.

Create a like button with a bouncy microinteraction in Figma by animating the icon through states, delays, and a custom spring transition, then test with prototypes.

Explore motion design in Figma by crafting a confetti pop that delivers delight, using the confetti generator, parallax, smart animate, and easing to create engaging moments.

Explore building a delightful checklist animation in figma, using interactive components and variants for type and completed state, where a shrinking line transitions into a check and a strike-through label.

Design and animate an add to cart button in Figma, building hover and click states, a component set, and a prototype where the button tilts and flies off the page.

Drive discovery to decide when to use motion in design. Use stakeholder interviews, personas, usability tests, and journey mapping to align motion with user needs and provide clear feedback.

Design and storyboard step for motion design: start with sketches, create storyboards with key states and annotations to visualize flows, gather early feedback, and select concepts to prototype and test.

Prototype your design in Figma to bring ideas into motion quickly, testing low to high fidelity interactions. Use prototyping to reveal ideas to users, reducing time and effort for refinements.

Outline the testing stage in motion design: schedule tests with representative users, run tasks, collect and review feedback against discovery challenges, and iterate to improve the user experience.

Learn quick motion tips to animate between states with continuity, shared elements, and staggered deliveries; use context, feedback, and deliberate timing to guide attention and delight users.

Learn to build an interactive National Geographic carousel in Figma, create image transitions and a 3d effect, and use plugins like Material Design Icons and Unsplash for navigation and imagery.

Create the National Geographic carousel in Figma using assets and components, defining active and current states with a loader and progress animation, and test with smart animate at 6000 milliseconds.

Prototype a simple carousel in the motion design workflow with auto-playing transitions, 6000 ms delays, 300 ease out, and reset the component state for a smooth dissolve.

Learn to build a complex parallax and 3d image carousel prototype in figma. Create reusable image components, frame-based start and end states, and smooth smart animate transitions.

Create a full page carousel prototype with interactive transitions, including 3D image variations and size rotation, then share on discord.

Learn to build toggle components and an interactive temperature slider for a smart home app in Figma, prototype with color, and complete an end-of-lesson assignment using icons and imagery plugins.

Design and prototype a toggle card in Figma for a smart home app, implementing on/off states, color changes, and responsive layouts to showcase motion design in ux/ui.

Design a draggable temperature slider in Figma, with a gradient fill and frosted glass background, supporting five states from cool to hot and on-drag prototyping.

Use auto layout toggle cards to assemble a simple one-page prototype with ready-to-go interactive components, illustrating a living room setup and user flow.

Design a simple temperature control prototype in Figma using sliders, drag interactions, and toggle on/off, demonstrating heat and cool states across four screens.

Prototype a color temperature control in figma using a slider, background color changes, and duplicate sections to visualize heating and cooling with color blending and blur.

Learn to prototype a navigation transition in a smart home app by animating background blur, pushing content, and using an overlay panel opened with a drag gesture.

Create and extend complex interactive components by building a toggle card and a drag-driven slider, exploring additional controls within the app, and sharing your work in the Discord community.