[Link Dump] Motion Design Systems šØChino WongĀ·Follow3 min readĀ·Nov 22, 2022--3ListenShareDesigning systems in the fourth dimensionsFrom Googleās Material 3 Motion System updates pageReferencesSalesforce Lightning | Kinetics System GuidelinesKinetics is the design language of a motion system for Salesforce, called the Kinetics System, that providesā¦www.lightningdesignsystem.comMaterial DesignBuild beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helpsā¦m2.material.ioMotion - Material Design 3Use motion to make a UI expressive and easy to use.m3.material.ioIntroduction to animations | Android DevelopersAnimations can add visual cues that notify users about what's going on in your app. They are especially useful when theā¦developer.android.comCarbon Design SystemCarbon is IBM's open source design system for products and digital experiences. With the IBM Design Language as itsā¦carbondesignsystem.comMotion for Windows apps - Windows appsFluent motion serves a purpose in your app. It gives intelligent feedback based on the user's behavior, keeps the UIā¦learn.microsoft.comMicrosoft Fluent UI | MotionThe official front-end framework for building experiences that fit seamlessly into Microsoft 365.developer.microsoft.comApple Human Interface Guidelines | MotionOn all platforms, beautiful, fluid motions bring the interface to life, conveying status, providing feedback andā¦developer.apple.comFirefox Photon (Retired) | Motion PrinciplesFirefox motion is quick, supportive and whimsical. Animations should be fast and nimble, never keeping the user waitingā¦design.firefox.comQuickBooks Design System | Motion PrinciplesMotion brings design to life by creating feelings of passion and optimism, while helping focus and proactively guideā¦designsystem.quickbooks.comAudi UI | Response EffectWhen a button element is clicked or tapped, a discreetly animated, ring-shaped impulse appears as a response effect. Itā¦www.audi.comAudi UI | Functional AnimationFunctional animations perform various functions in the interface: they guide the user through a process, improveā¦www.audi.comAudi UI | TransitionsUser orientation in the interface is significantly improved by creating a flowing, comprehensible transition betweenā¦www.audi.comWonderbly Design System | AnimationEdit descriptiondesign-system.lostmy.nameBBC GEL | The ABCs of motionGreat motion design is like giving a performance on a stage. Sure, it might look simple. You might think "that looksā¦www.bbc.co.ukOPower | AnimationWe use animations to nudge the user to take a specific action, or just invite them to tinker and explore. For exampleā¦ux.opower.comAnt Design | TransitionsOur Gray Matter are wired to react to dynamic things like movement,shape change and colour change. Transitions smoothā¦ant.designAnt Motion | Motion Specifications for Ant DesignAnt Motion ęÆ仄 React ē»ä»¶ę„å®ē°åØē»ęęļ¼ēØ Ant Design å®ē°é”µé¢åļ¼åÆä»„č½»ę¾ēå¢å 锵é¢éēåØē»ęęćmotion.ant.designRoyal Canin UI Framework | AnimationsThe intended use of this is in content block components. Developers can add the class of .rc-animation-001--base to allā¦developer.royalcanin.comPluralsight Design System | MotionContents Motion speed should most often occur at the following standard increments. Use the CSS variables to set theā¦design-system.pluralsight.comSkyscanner Backpack | AnimationAnimation values for use on Android, iOS and web.backpack.github.ioMarvel Styleguide | AnimationCentral location for a live inventory of UI components, brand guidelines, brand assets, code snippets and developerā¦marvelapp.comFutureLearn Webpack App | AnimationEdit descriptionstorybook.futurelearn.comSemantic UI | TransitionA transition is an animation usually used to move content in or out of viewsemantic-ui.comSAP Fiori | Motion DesignIn this case, objects are repositioned. Elements enter, exit, or remain on the screen. The direction defines theā¦experience.sap.comAlsoā¦React UWP | AnimateIBM Design Language | Animation OverviewAndā¦Animation in Design System E-Book by Val Head
Chino WongMy Favorite GIF App Features: Instagiffer (Mac/Windows)Instagiffer is an unassuming GIF creation tool for both Mac OS X and Windows that has a wealth of features any GIF creator shouldā¦3 min readĀ·Apr 28, 2016--
Chino WongMy Favorite GIF App Features: Photoscape X for MacPhotoscape X is primarily a photo editing suite that includes GIF-creation as a supplementary part of the app.2 min readĀ·Apr 28, 2016--
Chino WongMy Favorite GIF App Features: Principle (OS X)Principle is not a traditional GIF app. It is primarily an interactive prototyping tool, and creating GIFs is simply an ancillary featureā¦2 min readĀ·Apr 28, 2016--
Chino WongMy Favorite GIF App Features: Giphy Capture (Mac OS X)Screen captures, camera captures, standalone video files, and video URLs ā these are the basic source materials that creators of animatedā¦3 min readĀ·Apr 28, 2016--
Stephanie SmithinWise DesignAccessible but never boring (Part 1)Rebranding the Wise design system for everyone.5 min readĀ·Aug 29--2
Robin WesterhoffDesign System Challenge: Rebranding 100+ touchpoints in under 9 months.In todayās hyperconnected world it is critical for a brand to be extremely flexible but recognisable, yet consistent and flawless at theā¦10 min readĀ·Sep 21--1
Christine VallaureinUX CollectiveResponsive UI design with Figmaās variables and modescomponents and variants respecting breakpointsĀ·12 min readĀ·Sep 12--6
Adham DannawayinUX Planet16 little UI design rules that make a big impactA UI design case study to redesign an example user interface using logical rules or guidelines14 min readĀ·Mar 14--150
Diana WolosininIndeed Design10 Things No One Told Me About Design SystemsThis UX designer learned the hard way, but you donāt have to.8 min readĀ·Jan 19--15
Deovrat DwivediinMuzli - Design InspirationCracking the Design Challenge: A Guide for Senior Product DesignersDeep dive into my process of solving the design challenge and creating the presentation deck for a Senior Product Designer Role in tech.5 min readĀ·Sep 25--
