Framer Crash Course – Design, Code, and Collaborate

UPDATES:

July 18th, 2017

• Creating a Floating Action Button: In this lesson, we'll learn how to recreate a floating action button (like Material Design) on Framer. We'll design it using the icon library and code it by switching between two states with a spring curve. 

July 4th 2017

• Published a lecture on adding sounds to your projects and how to trigger them with events and animations.
• Added a quiz on the third section. Test your knowledge!

· · · · · · · · · · · · · · · · · · · · · · · · · · · ·

DESCRIPTION

Let's learn Framer!

Framer is a tool for drawing, prototyping, coding, and sharing projects across teams. It combines the familiarity of visual editing with the flexibility of code. It gives you an entire design workflow in one smart interface. 

With Framer you can deliver end-to-end experiences. Framer allows you to perfect and validate interaction, animation, and flow before handing off your work to engineers. 

Framer bridges this gap between design and development, making it the tool of choice for product teams worldwide like Dropbox, Facebook, Google, Disney, and Uber.

Interface design, in a stunning way.

With Framer Design you get the familiarity of your favorite graphics tools, with a twist. Framer's intuitive auto-layout and smart grouping algorithms make responsive design a breeze. Draw with pixel perfect precision on device-specific screens, then turn on targeting to animate. Framer is a design tool engineered for interaction work.

You can insert artboards, draw layers, add text and images. Every new layer added to the canvas responds to the environment around it. It's responsiveness is so good that it feels like magic. Here's some things that make designing with Framer different and fun:

• Auto-sequencing with artboards.
• Insert and manipulate shapes.
• Advanced text tools.
• Automated layer nesting.
• A canvas that adapts across all devices
• Icon management panel.
• Layer clipping.

Interaction design, quick and easy!

Framer makes it easy to get into coding, even if you're a beginner. You only need one-click to insert an animation with Auto-Code. Customize further with simple slider controls and direct manipulation. You can use the components to add premade native interactions and multi-screen app flows. It’s the simplicity of WYSIWYG, backed by the power of code.

Auto-Code makes bringing your designs to life as simple as inserting an animation or event. Style using the slider controls or by editing directly in the canvas. No matter how you like to work, Framer always keeps your code intact for you. Here are some of the things you can easily implement:

• Insert layers, animations, events and snippets.
• Full-featured code editor.
• Smart auto-complete.
• In-app documentation.
• Error inspector.
• Position layers directly on the canvas.
• Visual property editing.
• Device picker.
• Detachable canvas.
• Real-time canvas syncing.

Framer makes designing and prototyping easy.

With Framer you can design in a smarter way, you can bring your screens to life with simple code, and you can collaborate with your team or clients via seamless sharing.