figmaAug 13, 2026

Try These 10 Skills—And Show Off Your Own | Figma Blog (opens in new tab)

Skills are plain-text Markdown instructions that help Figma’s agent apply a designer’s preferences, workflows, and judgment. The post argues that skills are useful not only for engineers but also for codifying creative approaches, such as easing curves, typography, image audits, and motion principles. Figma now lets users create, preview, edit, and iterate on skills directly in the product, with some also compatible with Figma’s MCP server. ## What Figma skills enable - Designers can create skills from: - A reference design frame - Specific instructions or guidelines - Repeated personal workflows - The agent can draft a skill, which users can preview and test in chat. - Skills can be refined by: - Editing instructions and formatting - Asking the agent for recommendations - Opening the Markdown editor for manual changes - Skills can capture individual design judgment and help teams reproduce a consistent point of view. - Some skills work with Figma’s MCP server and third-party agents. ## Examples of personal design skills - `/image-audit` checks whether images in a file can be exported and places a report on the canvas. - `/shader-starter` helps users write more effective shader prompts. - `/make-a-type-scale` creates a type scale from selected text and generates corresponding font variables. - `/ease-like-miggi` applies the author’s preferred easing curves to motion keyframes, allowing teammates to use the same motion style. ## `/xray-scan`: Create radiographic image effects Created by Adele Ix, this skill transforms a photo or description into a realistic X-ray image. - Produces two visual treatments: - Glowing white lines on black - Darker tones on white - Supports layered monochrome collages with glowing edges. - Is especially suited to combining multiple scans into a unified composition. ## `/find-animation-opportunities`: Identify missing motion Created by Emil Kowalski of Linear, this skill reviews a design and suggests where animation could improve the experience. - Identifies elements that should animate and areas that may be over-animated. - Recommends: - What should move - Where the motion should occur - Exact animation values - Suggestions can be implemented manually in Figma Motion or applied by the agent. - Works best when focused on one frame with contextual information, such as the target persona. - It can also be asked which elements should remain static. ## `/camera-pan-and-zoom`: Animate static compositions Created by Mallory Dean, this skill adds camera-like movement to a static design. - Builds a nested camera rig around selected content. - Supports pan, zoom, and roll animations. - Can create directed sequences, such as touring a grid of cards before zooming out to reveal the full composition. - The skill is intended to make static compositions feel more cinematic and dynamic. ## Practical takeaway Designers can use skills to turn personal techniques and repeatable creative decisions into reusable tools. Start with a focused workflow, test the generated skill in Figma, and refine its Markdown instructions until it reliably produces the desired result.

motion-designfigmadesign-systemsai-agent+2

figmaJul 27, 2026

Digital Tools, Human Expression: The Visual Identity Behind Config 2026 | Figma Blog (opens in new tab)

Config 2026’s visual identity used digital tools and AI to express human creativity rather than replace it. Figma’s Brand Studio built a system around evolution, fluidity, and harmony, combining expressive glyphs, imperfect textures, and structured compositions. The result connected AI-assisted making with craft, experimentation, and distinctly human irregularity across digital and physical conference spaces. ## A Visual System for Human–Machine Collaboration - The identity reflected three aspects of modern design: - **Evolution:** remixing and reinventing ideas into something new. - **Fluidity:** moving between design and code while starting from different points. - **Harmony:** using generative tools while maintaining human judgment. - The system combined: - Sketchy, generative, and crisp glyphs. - AI-prompted textures. - Structured, dynamic compositions. - The contrast between “wonky” results and programmatic digital processes represented how ideas can morph and multiply. - Particle glyphs suggested ideas spawning and generating, while clean rectangles represented more resolved concepts. - Glyphs were translated into 14-foot foam sculptures and installed around San Francisco’s Moscone Center. ## AI-Assisted Texture Generation - Figma’s Brand Studio created tools in Figma Make to codify three lo-fi visual effects: - Scribbly linework. - Blurred gradients. - Oval-shaped particles. - Images were processed through these tools to create compositions that felt surprising, hand-drawn, and imperfect. - A custom dithering tool applied a consistent pointillist treatment to hundreds of speaker portraits. - The textures balanced digital precision with human qualities such as irregularity, grain, and imperfection. - Animated versions of the textures appeared at the conference’s block party and on keynote screens. ## Designing Static and Motion Assets Together - The team developed motion and still graphics in parallel rather than treating animation as a final production step. - Motion influenced visual design, while design informed motion decisions. - Bringing glyphs to life helped the team discover new directions for the identity. - This iterative process reinforced Config’s theme of ideas evolving through experimentation and collaboration. Figma’s approach demonstrates how AI can support a strong visual identity when it is guided by human taste and craft. The practical lesson is to use generative tools to create possibilities, while preserving controlled imperfections and human judgment in the final system.

motion-designfigmaaifigma-make+2

figmaJul 2, 2026

Issue no.17: Build with joy | Figma Blog (opens in new tab)

Figma’s Issue No. 17, “Build with joy,” celebrates the creative motivation behind making things: turning a vision into reality. Inspired by Config 2026, it presents tools, ideas, and stories that encourage designers to explore their own paths while developing stronger creative judgment. The central message is that tools help, but care, taste, and a clear point of view ultimately shape meaningful work. ## Config 2026 and Choosing Your Own Path - Figma introduces new tools and materials for its canvas, enabling teams to extend existing workflows and move faster. - The accompanying Config magazine uses a choose-your-own-adventure format, allowing readers to explore topics in any order. - Its broader focus is how teams are adapting established processes to reach new creative and professional goals. ## Cultivating Taste - Chief Design Officer Loredana Crisan defines taste as more than recognizing quality; it also involves sustaining the energy and care required to achieve it. - Her experience playing music helped shape her understanding of creative judgment. - The article emphasizes that taste develops continuously through practice, attention, and a strong point of view. - Crisan identifies care for the user, the craft, and the final result as essential qualities. ## Motion as Design in Time - Figma’s Brand Studio offers an introduction to motion design. - Motion is framed as the combination of design and time, with timing and movement affecting how an idea is perceived. - Small distinctions—such as whether an animation feels like a “whoosh” or a “whoop”—can significantly change its character and meaning. ## Color as Cultural Language - Pantone’s color experts explain how colors acquire cultural associations and influence behavior. - Familiar examples include Coca-Cola red, Barbie pink, and Brat green. - Brands use color to create meaning, communicate identity, and help drive cultural trends. - Color is presented not merely as decoration, but as a system of shared social and emotional signals. ## Further Exploration - Dylan Field recaps Config 2026 and the new dimensions Figma is bringing to its canvas. - Figma’s community imagines future software, including systems that respond to moods and tools that predict what comes next. - The latest Figma merchandise collection follows eight illustrators from initial sketches through production. Figma’s recommendation is ultimately to build with curiosity and joy: use new tools as a starting point, but rely on care, experimentation, and cultivated taste to determine what is worth making.

motion-designfigmadesign-systemscolor-theory+1

figmaJun 29, 2026

Start Anywhere, a Magazine by Figma | Figma Blog (opens in new tab)

Figma’s 2026 *Start Anywhere* magazine explores how new tools are expanding the ways people begin and develop creative work. Its central argument is that as motion, code, and AI become more integrated into the design canvas, creative workflows are converging and becoming more expressive. Rather than prescribing one starting point, Figma encourages designers of all experience levels to choose an entry point and keep exploring. ## A Magazine About Design’s Changing Landscape - The magazine was created for Config 2026 by No Ideas, featuring work by several artists and designers. - Figma’s annual publication aims to capture what matters in design beyond rapidly changing product releases. - This year’s theme reflects the difficulty—and freedom—of writing about tools that evolve quickly. - The enduring principles are curiosity, patience, and understanding what something is before focusing on what it does. ## More Materials on the Canvas - Figma Motion introduces a timeline directly into the canvas, allowing designers to work with movement alongside components, variables, and collaborators. - Motion design principles remain important even as tools become easier to use: - Timing and mechanics give movement meaning. - Foundational craft helps designers make better creative decisions. - Code is also moving into Figma’s shared multiplayer environment. - Code layers allow teams to explore design and implementation side by side, making code a more direct part of the design process. ## The Design-to-Code Loop - As work moves fluidly between code and canvas, design and development workflows increasingly converge. - The magazine examines how this connected process can: - Enable faster experimentation. - Support multiple directions in parallel. - Improve collaboration between designers, engineers, and AI-focused teams. - Carry ideas more smoothly from early exploration into production. ## AI as a New Path from Idea to Product - AI tools are changing where product work begins and how ideas move through the development process. - The magazine presents examples from four organizations using AI in different ways. - These approaches suggest that AI can influence: - Ideation and initial exploration. - Product design and iteration. - The transition from design concepts to working software. - The continuity of ideas through production. ## Imagining Future Human–Computer Interaction - The “Future states” section asks what it might mean to reduce the gap between human and machine intelligence. - Contributors imagine software that interacts in more human-centered ways, including: - Interfaces that respond to users’ emotions. - Systems that help people anticipate the consequences of decisions. - New forms of interaction beyond traditional interfaces. ## Who the Magazine Is For - The publication addresses: - Beginners with ideas but no clear starting point. - Experienced practitioners looking for new creative possibilities. - Anyone who wants to produce effective design efficiently. - Its three covers represent different prompts and entry points into the same broader questions. The practical message is to start wherever the most interesting possibility appears—whether in design, motion, code, or AI—and continue iterating. The tools may change quickly, but curiosity and strong creative fundamentals remain useful across every workflow.

motion-designfigmaaireact+1

figmaJun 24, 2026

Principles in Motion | Figma Blog (opens in new tab)

Motion design extends graphic design into time, using rhythm, pacing, sound, and sequencing to communicate ideas. The Figma designers argue that effective motion combines clear intent with an understanding of physics and human perception. Rather than copying trends, designers should draw inspiration from nature, film, art, and real-world movement. ## Motion Turns Design into a Sequence - Graphic design communicates through static images; motion adds: - Rhythm and pacing - Transformation and character - Easing and timing - Sound and synchronization - Motion allows designers to divide a story across multiple frames instead of forcing every idea into one image. - Timing can create emotion and direct attention, much like beats structure music. - Unexpected connections between sound and image can produce “happy accidents” and richer results. ## Physics as a Foundation - Real-world physics provides a reference for making animated movement feel believable. - A bouncing ball, for example: - Moves quickly after impact - Rises and slows near its highest point - Falls again - Loses height with each bounce - Viewers often recognize when motion feels “good” because it reflects familiar physical behavior, even if they cannot explain why. ## Finding More Original Motion References - Relying only on existing motion-design examples can lead to predictable trends. - Designers can develop more distinctive work by studying: - Movement in nature - Film storytelling and editing - Gestures and forms in art and design - These broader references help motion communicate character and meaning beyond standard bouncing shapes and rectangles. ## Core Motion Principles - **Ease in/ease out:** Controls acceleration and deceleration. - **Anticipation:** Prepares the viewer for an upcoming action. - **Overshoot:** Moves slightly beyond the destination before returning. - **Follow-through:** Keeps secondary elements moving after the main action ends. - **Hold:** Pauses so viewers can process an event. - **Settle:** Adds subtle final movement as an object comes to rest. ## Transitions and Continuity - Easing determines how movement begins, changes speed, and settles. - Match cuts connect separate shots through a shared movement. - Cutting at the fastest point of an action can make transitions feel seamless. - Transitions link individual story beats and help the overall piece feel cohesive. Motion works best when designers treat time as a storytelling material. Grounding movement in physics, using sound thoughtfully, and drawing from varied real-world references can make animation clearer, more expressive, and less predictable.

motion-designfigmaaianimation+2

figmaJun 10, 2026

Steal This Template: Bring a User Persona to Life with Figma Weave | Figma Blog (opens in new tab)

The post shows how Figma Weave can make Ideal Customer Profiles (ICPs) more vivid and useful by turning static personas into realistic visual scenes. Dropbox designer Sara Clayton used a headshot, prompts, and reference images to depict media professionals in authentic work environments. The result was faster iteration, greater emotional connection, and more effective storytelling for product strategy. ## Static Personas Lack Context - Dropbox’s ICPs represented video editors, audio engineers, and production managers. - Traditional diagrams, user stories, and repeated headshots failed to show these users in their real working environments. - Story-driven slide decks worked better, but lacked visual variety and realism. - Clayton wanted personas to feel more human and connected to tools such as timelines, mixing boards, and editing software. ## Creating Realistic Persona Scenes with Figma Weave - Clayton used Figma Weave to transform a profile picture into an image of a media producer working from home. - A single prompt placed the persona in front of a Premiere Pro screen. - She uploaded a reference image to revise the character’s outfit when the initial style was not appropriate. - Weave provided more control over visual variables and iterations than general-purpose chatbots such as Gemini or ChatGPT. - The workflow took less than two minutes. ## Figma Weave’s Role in AI-Native Creation - Figma Weave emerged from Figma’s acquisition of Weavy. - The platform combines generative AI with professional editing tools on an open canvas. - Its intended capabilities include image, video, animation, motion design, and VFX generation and editing. - The post also highlights persona-focused templates for car scenes, character sheets, outfits, and character variations. ## Impact on Product Strategy - More realistic visuals help teams connect with personas and understand their contexts. - Higher-fidelity storytelling can make ICPs more influential in strategic decisions. - Clayton’s broader goal is to “humanize” product work by showing users as real people rather than static profile images. - Readers can use the featured Figma Weave template to create a more engaging ICP quickly. Figma Weave is best suited for teams that want to supplement traditional persona documentation with realistic, editable visual narratives that make customer needs easier to understand and remember.

motion-designfigmagen-aifigma-weave+2

figmaSep 18, 2025

The Branding for Intercom’s AI Summit Looks Like an Alien Superbloom | Figma Blog (opens in new tab)

Intercom’s 2025 Pioneer AI summit branding uses an “alien superbloom” concept to express how rapidly AI is evolving. Its Creative Studio built a flexible system of surreal flowers, pollen-like particles, motion, and dot-matrix imagery that could work across digital campaigns, the website, event spaces, and merchandise. Figma served as the central workspace for exploration, collaboration, prototyping, feedback, and refinement. ## Building a Broad Creative Direction - Intercom Creative Studio began with expansive mood boards in Figma Design. - Teams combined motion clips, still images, vectors, logos, collages, and written concepts to explore multiple creative territories. - Motion designers, brand designers, and copywriters could experiment together in the same files. - Embedded video helped the team test logo treatments and messaging against motion references early in the process. - The selected direction evolved from the previous year’s “planted seeds” concept into an AI superbloom. ## Developing the Superbloom Visual Language - The central motif became surreal, alien-looking flowers blooming at unusual scales and speeds. - Pollen particles inspired a stippled aesthetic used in the logo, speaker portraits, and static imagery. - The visual system was designed to feel dynamic in motion while remaining restrained enough for print. - Intercom collaborated with Colors and the Kids to explore flower forms, animation styles, pollen density, and movement. - Figma Draw allowed designers to annotate video frames and specify changes to motion and flower shapes without switching applications. ## Presenting and Refining the Brand - Instead of conventional slide decks, the team presented concepts on long, scrollable Figma artboards. - Stakeholders could review work and leave comments directly on each board. - Separate pages organized successive feedback rounds, allowing explorations to develop into polished case studies. - Figma functioned both as a presentation tool and as an organizational system for the distributed 30-person creative team. ## Prototyping the Website - The Pioneer website was designed, prototyped, and quality-assured in Figma. - Designers and developers could review changes in one environment rather than moving between multiple platforms. - Live comments enabled immediate conversations during iteration, replacing slower back-and-forth through tools such as Slack. - The same brand principles could be tested across the web experience alongside event and campaign materials. The project demonstrates how a unified design workspace can help a distributed creative team move from broad visual exploration to a cohesive, motion-ready identity. For complex event branding, combining shared mood boards, in-context feedback, motion prototyping, and website testing can make the process faster and more connected.

motion-designfigmaaidesign-systems+3

figmaJul 2, 2025

How We Shaped the Visual Identity for Config 2025 | Figma Blog (opens in new tab)

Figma’s Brand Studio spent 10 months developing Config 2025’s visual identity for a large, global audience and a wide range of physical and digital formats. The team centered the system on expressive animated glyphs made from basic shapes, creating an identity that could adapt as the event evolved. By combining conceptual flexibility, component-based design, motion, and Figma’s refreshed brand language, they made Config feel tactile, dynamic, and distinctly connected to the spirit of making. ## Building a Flexible Visual Concept - The creative process began with broad exploration rather than fixed moodboards or a narrowly defined style. - The team focused on a concept that could support varied execution: - Social media content - Main-stage screens - Physical installations - Attendee badges and merchandise - Spatial experiences - Creative Director Damien Correll emphasized constraining the concept without constraining execution, allowing the identity to remain adaptable. - Because event plans and requirements change, the visual system needed “wiggle room” and the ability to evolve over time. ## Glyphs as a Language of Making - The visual identity revolved around animated glyphs built from simple shapes, or primitives. - Each glyph combined inner and outer elements that interacted with one another. - Their shifting forms represented: - Dynamism - Change - Adaptability - The unpredictable nature of creative work - Motion allowed a single glyph to trigger ripples and transform an entire composition. - The concept aligned with Config’s product announcements, including Figma Draw and Figma Sites, which focused on helping users express themselves in new ways. ## A Component-Based Toolkit - The team created a glyph library directly in Figma. - Glyphs were built as reusable components, making it easy for partners and vendors to: - Swap variations - Customize compositions - Adapt assets to different surfaces - This approach helped maintain consistency while supporting many applications and production constraints. ## Extending Figma’s Refreshed Brand - Config’s identity built on Figma’s recently updated visual language. - The team adapted the refreshed: - Color palette - Typeface, Figma Sans - Playful primitive-based design approach - This connection allowed Config to feel like an extension of Figma’s broader brand while still having its own expressive event personality. Figma’s approach demonstrates how a strong event identity can combine a clear conceptual foundation with modular, adaptable assets. Designing the system as reusable components—and allowing motion and variation to carry meaning—enabled Config 2025 to remain cohesive across thousands of touchpoints without becoming rigid.

motion-designfigmatypographyfigma-draw+3

figmaJun 16, 2025

Make your site interactive with code layers | Figma Blog (opens in new tab)

Figma’s new code layers let designers add custom React-powered interactions directly within Figma Sites. They bridge the gap between static canvas designs and production-like experiences by combining AI-assisted coding, direct code editing, and reusable components. The feature is intended to make advanced interactions—such as drag-and-drop systems, animations, calculators, maps, shaders, and 3D effects—accessible without external developer support. ## Customizing Existing Designs - Code layers extend Figma Sites’ built-in responsive elements and interactions. - Designers can convert an existing element into a code layer through the Figma Make icon in the Design panel. - AI chat can then generate or modify behaviors such as: - Spinning or bouncing animations - Animated counters and text effects - Loan calculators and price estimators - Hover effects, ripples, and color changes - Code layers can be duplicated with **Command D** to create and compare multiple interaction variations. - Example use case: a flower shop could let visitors duplicate, drag, rotate, and layer flower images to create custom bouquets. ## Creating Code Layers from Scratch - Designers can use the Make tool or press **E** to draw a standalone code layer on a blank canvas. - A modal opens for generating the layer through AI prompts or writing code directly. - Suggested prompts and starter components—such as buttons, image galleries, and navigation menus—provide ready-made starting points. - These components can be used as-is or customized to match an existing design. ## Reusable and Extensible Components - Code layers support customizable properties, including strings, numbers, and references to other components. - AI can generate these properties automatically, or users can request specific controls. - A code layer can be converted into a reusable Figma component for use across pages, projects, and team design systems. - Designers can import npm packages such as `motion` and `@react-three/fiber` to add advanced animation, 3D rendering, and other functionality. ## Code Layers Compared with Figma Make - **Figma Make** is suited to building a functional app from a prompt without relying heavily on precise canvas design. - **Code layers in Figma Sites** are designed for adding custom interaction and motion to an existing visual design. - Together, the tools support both prompt-first development and design-first experimentation. Code layers are available to all Figma Sites users, offering a practical way to prototype and publish richer web experiences directly from the Figma canvas.

motion-designaiprototypingreact+4

figmaSep 15, 2024

Figma on Figma: Our Latest Brand Refresh | Figma Blog (opens in new tab)

Figma refreshed its visual identity to reflect its evolution from a designer-focused tool into a collaborative platform for entire product teams. The new language moves beyond static cursors and heavy outlines, using flexible primitives, dynamic compositions, broader color, custom typography, and motion. Its central idea is to portray Figma as a shared space where people from different roles create together. ## Expanding Beyond a Designer-Centric Identity - Figma’s earlier branding was rooted in “vector vernacular,” including static cursors and bold black outlines. - As developers, product managers, and other contributors became part of the platform, the brand needed to represent more than traditional design work. - The refresh emphasizes the many people involved in turning ideas into finished products. ## Four Foundations of the New Visual Language - **Versatile primitives:** Visual building blocks represent the diverse individuals involved in co-creation. - **Dynamic compositions:** Layouts reflect different ways of making, experimenting, and building. - **Expanded color palette:** Color variables make the system easier to adapt across contexts. - **Integrated motion:** Animation expresses actions and flows within the creative process. ## Typography and Custom Fonts - Figma partnered with Grilli Type to create **Figma Sans**, described as an opinionated grotesque. - The broader type system includes: - Figma Sans - Figma Condensed - Figma Mono - Figma Hand, created with OH no Type - Together, the fonts support different modes of communication, from product design and engineering to brainstorming and collaboration. ## Starting in the Sandbox - Brand Studio began by studying how people use Figma across the entire process: - Brainstorming and ideation - Inspecting elements - Refining and polishing work - The team explored the idea of activities happening simultaneously in a shared environment, similar to “parallel play.” - Playgrounds designed by Isamu Noguchi and Mitsuru Senda inspired the concept of the Figma canvas as a place where people gather, experiment, and create. - Other references included carefully crafted tile work and infrastructure, suggesting a visual system that could combine playfulness with structure. Figma’s new identity is designed to make collaboration visible: a flexible, colorful, and animated system that reflects both the individuality of contributors and the shared space where product ideas take shape.

motion-designfigmadesign-systemsdesign-tokens+2

figmaMar 18, 2024

23 Prototyping Resources to Bookmark Right Now | Figma Blog (opens in new tab)

Prototyping is valuable throughout product development—not just at the end—as a way to align teams, gather feedback, conduct research, and improve products through iteration. Figma’s curated collection of 23 resources supports different learning styles, from introductory videos and community files to presentation techniques and advanced prototyping features. ## Cover the Basics - An eight-minute video introduces interactive prototypes, animation, and incorporating tester feedback. - A 50-minute playlist covers: - Easing curves and transitions - Smart Animate - Scrolling - Device frames - A 63-minute “Prototyping 101” video explains basic frame-to-frame navigation and advanced features such as interactive components. - A two-part series for product professionals demonstrates how non-designers can create lightweight prototypes. - Part one covers basic prototype creation. - Part two explores transitions, Smart Animate, scrolling, and other motion techniques. - The “Accessible prototypes in Figma” community file demonstrates prototype accessibility features, including compatibility with screen readers such as VoiceOver on Mac and JAWS on Windows. ## Level Up Presentations - Prototyping can make presentations more dynamic and engaging, whether for boardrooms, classrooms, or other audiences. - A 70-minute video explains how to build interactive slide presentations in Figma. - A short tutorial shows how to embed interactive elements, such as scrollable mobile screens, inside presentation slides. - Another video demonstrates using the Figma mobile app to click through presentation slides. ## A Broader Prototyping Practice - Figma positions prototyping as a tool for: - Building shared team understanding - Testing ideas with users - Facilitating stakeholder feedback - Iterating before development - The resource list follows recent Figma prototyping enhancements, including updates that help bring designs to life across mobile, tablet, and smartwatch interfaces. - The article is organized as a learning path, with additional sections intended to cover video, motion and flow, variables, and recorded office hours. Use the resources progressively: begin with the introductory tutorials, then explore accessibility, presentation workflows, motion, variables, and community examples as your prototyping needs become more advanced.

motion-designfigmaprototypingaccessibility+3

figmaMar 23, 2022

The art and influence of motion | Figma Blog (opens in new tab)

Motion helps digital interfaces communicate in ways that resemble the physical world. UX designer Katie Swindler argues that animation can clarify state, build mental models, improve perceived responsiveness, and add personality—but only when it serves a clear purpose. Effective motion balances practicality with restraint and must remain accessible to people who cannot or should not experience animation. ## Motion as a Human-Centered Language - People naturally interpret facial expressions, gestures, and movement alongside spoken information; interfaces can use motion similarly. - Animations communicate: - Progress, such as loading bars - Errors, such as a field shaking after an incorrect password - Change, such as charts recalibrating after a page refresh - Motion helps translate a digital environment into terms understood by a brain shaped by interaction with a physical, three-dimensional world. - It gives users information for building mental models without requiring explicit explanation. ## Designing Familiar Physical Metaphors - Digital animations can borrow from familiar physical behavior. - A sliding menu or “drawer” suggests that: - It can be opened and closed repeatedly - Its contents remain available when reopened - These familiar cues make interfaces feel intuitive. - Figma examples include animated cursor-chat bubbles and the celebratory shake of the FigJam Timer. ## Purpose-Driven Microanimations - Microanimations should solve a specific user or system problem rather than exist merely for decoration. - A short one- to two-second transition can disguise unavoidable backend processing delays and make a product feel more responsive. - Motion should be evaluated with the same discipline as icons: adding more visual elements is not automatically beneficial. - Designers should consider whether text, a static visual, or no additional communication would work better. ## Balancing Practicality and Personality - The strongest motion combines functional guidance with a distinct sense of character. - Animations should be fast, subtle, and respectful of the user’s time. - Swindler highlights Apple’s “sprout” or “Genie in the Bottle” animation: - Minimizing a window visually pulls it into its dock icon. - Restoring it reverses the motion, showing where the window came from and where it will return. - This type of animation provides orientation and delight without distracting from the task. ## Accessibility and Common Mistakes - Motion must never be essential to understanding or operating an interface. - Certain animations can trigger people with epilepsy or create barriers for users with motion-related sensitivities. - Excessive or frenetic movement can: - Interrupt users - Create confusion and visual busyness - Add unnecessary steps - Frustrate users and weaken brand affinity - Every animation should be selected carefully and used with restraint to solve a user problem elegantly. Motion is most effective when it communicates meaning, reinforces familiar behavior, and adds personality without demanding attention. Designers should prototype animations deliberately, test them for accessibility, and remove any movement that does not clearly improve the experience.

motion-designfigmaaccessibilityux+3

figmaJul 8, 2019

Bring your Figma prototypes to life with GIFs | Figma Blog (opens in new tab)

Figma introduced animated GIF support in prototypes, allowing designers to add motion, video elements, and subtle animations without leaving the prototyping workflow. GIFs remain static in the editor but animate when users click “Present.” The update also adds customizable cover frames, improved momentum scrolling, and touch cursors for mobile prototypes. ## Using GIFs in Figma Prototypes - Add a GIF to a Figma file using tools such as ScreenFlow, LICEcap, Principle, or After Effects. - Click **Present** to view the animation in the prototype. - GIFs appear as static images in the editor. - Designers can open the GIF properties modal and scrub to select a representative cover frame. - Custom cover frames are useful for GIFs with blank opening frames or multiple similar animations. ## Improvements for Mobile Prototypes - Mobile prototypes now include OS-aware momentum scrolling. - New touch cursors make interactions feel more like a real mobile device. ## Design Inspiration The article highlights several effective uses of animation: - **Uber:** Animated splash screens serve as both welcome moments and loading states. - **Slack:** Rotating loading quotes make waiting more engaging. - **Material Design:** Simple linear and circular progress indicators communicate activity clearly. - **Headspace:** Illustrative onboarding animations help explain the product and maintain user attention. - **Hyperlapse:** Video-based onboarding demonstrates practical product scenarios. - **Mapbox:** A looping hero animation shows the capabilities of its location technology. - **Mailchimp:** Subtle animated illustrations add texture and personality to web pages. Designers can experiment with Figma’s starter file or consult the support article for setup instructions.

motion-designfigmaprototypingux-design+2

figmaOct 22, 2018

Animate your Figma designs with our new Principle integration | Figma Blog (opens in new tab)

Figma introduced an integration with Principle that lets designers turn static Figma files into advanced, interactive prototypes without coding. Designs can be imported into Principle, animated with realistic transitions and interactions, and later synchronized with Figma while preserving those animations. The integration combines Figma’s collaborative design workflow with Principle’s simple but powerful motion-prototyping tools. ## Importing Figma Designs into Principle - Open Principle, choose **Import**, and authorize Figma as a design source. - Imported designs can be enhanced with: - Scrolling pages - Swipeable image cards - Interactive button states - Spring, ease-in, ease-out, and linear animations - These features help static designs behave more like real mobile applications. ## Principle’s Visual Prototyping Approach - Principle provides a visual interface intended to feel familiar to interface designers. - Users can create realistic prototypes without learning to code. - Its balance of simplicity and power helps designers remain focused on visual creativity rather than switching into an engineering mindset. ## Synchronizing Changes Between Figma and Principle - Designers can continue editing the original Figma file after importing it. - Principle detects Figma changes and merges them into the imported prototype. - For example, resizing a button in Figma automatically updates its size in Principle while retaining the animations already assigned to it. ## API-Based Integration - The integration was built using Figma’s web-based API. - Principle’s creator used Figma’s API documentation and API Explorer to understand and test how individual files and objects are represented. - The API Explorer lets developers enter a Figma file ID and inspect the resulting API calls, making it easier to experiment with the platform. The integration is recommended for designers who want to add sophisticated motion and interaction to Figma designs quickly. Import a Figma file into Principle, refine its animations visually, and use synchronization to keep the prototype aligned with ongoing design changes.

motion-designfigmaprototypingui-ux+2