Home | Framer Motion & Gatsby

My Skills

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ullam laudantium, earum non dolores error saepe. Dignissimos, enim quos libero itaque a, commodi, dolores impedit officiis quod minus doloribus illo?

Drag to view

Animation
Gesture
Utilities
Types
Spring
Ease
UseCycle

Motion Drag

Powerful Interactive
design and code tools

You can browse the featured, the recent and the trending packages in Framer Store.

Group a bunch of layers and set automatic spacing and distribution. You can re-order the elements just by dragging them.

You can install npm libraries like Styled Components to power your components.

You can override pretty much anything of component layers in Framer X.

Your components
are the single source of truth

Framer X will allow designers to get closer to high-fidelity prototyping and implementation using a shared library of components built in React. The future of design tools is here.

.background:before { opacity: 1; background-image: url('//images.ctfassets.net/0ofrrc12vltz/4mdqS59OtwIOC4AgaNLUaU/ef0ba901e17e8b2ced12773a19823a03/framer-course-3.jpg?w=1920&q=100'); }

Design Components and Stacks

Making your Framer X layout adaptive and reusable

.background.gbi--981858663-hwLc1TLwtVSSRXJ77DnLpz:before { opacity: 1; background-image: url('//images.ctfassets.net/0ofrrc12vltz/7sm9Mx0QjVpctJmt2YK1Uo/d43d2542e56533b2c26d9e2185224eed/framer-course-2.jpg?w=1920&q=100'); }

Design Layouts and Icons

Basic introduction Framer X

.background.gbi--76870319-emCcsqKgqwkLt4cubB32XQ:before { opacity: 1; background-image: url('//images.ctfassets.net/0ofrrc12vltz/4u3Ru8POUooZJt3g0UP46g/15afce95dd954d84042933c287c95821/framer-course-4.jpg?w=1920&q=100'); }

Quick Prototyping in Framer X

Building a simple prototype using basic transitions and scroll

.background.gbi-1403284307-dWshkGjKaDwGX5spq947LX:before { opacity: 1; background-image: url('//images.ctfassets.net/0ofrrc12vltz/DpuyD4LUoWJqwBIwS5sVx/c5e059969dd277b979c554d79506aeb0/framer-course-1.jpg?w=1920&q=100'); }

Design and Code in Framer X

Create powerful design and code components for your app and design system

Start to design and code
your framer X Component

Design layouts and components from scratch and learn all the workflow of using Framer X to create a single source of truth for your team, leveraging the power of React.