Material-Design-Interactions

A Framer.JS and Framer Studio library of standard Google Material Design interactions

MODULES

materialInteractions.coffee

Defines material design animations/interactions

Supported interactions

• ripple effect
• raise / lower card
• expand card
• animate in from centre of layer
• move layer

materialComponents.coffee

Defines material design components. Remember, you can import components from Sketch as well. The main reason for defining them in this module instead is if you want to parametrise some of their properties

Supported components

• Floating Action Button (FAB)

colors.coffee

As simple as the name suggests, a single file to define any custom colors in

The Framer Studio Project

The Framer project's purpose is just to showcase the components and interactions defined above. The idea is that you can use the modules above in any Framer Studio project

resources.sketch

This file is also used just for showcasing the interactions build in the above modules, and shown in the Framer project.

I'm a designer, not a developer

I am hoping that others who find this useful will join in and help build this library of components and interactions.

I enjoy writing code, but am not a developer by trader (I'm a designer), so I'm sure there are many things I could be doing better/more efficiently etc. If you are have suggestion, please get in touch.

Questions?

Get in touch via twitter @ThatBaldUXGuy