1. Tour the UI

    6:19FreeDone
  2. 2

    Laying Out Shapes and Text

    9:15FreeDone
  3. 3

    Adding Images and Effects

    11:31FreeDone
  4. 4

    Add Code to Your Design

    7:22FreeDone
  5. 5

    Sharing Your Prototype

    3:23FreeDone

Tour the UI

Published by Chris Slowik

Episode Notes

Extra tips from the author

Why Framer?

I use Sketch every day when working on UI designs. It's become an indispensable tool in my designer's toolkit. But I do remember a time when every launch of Sketch I would ask myself what I was thinking. Did I really need to switch? Can something that feels this awkward really replace what I know? The answer of course, was yes.. it could. At the very least it became an equal when stacked up against PS/AI.

When I started designing in Framer, it felt very similar. This tool was familiar but foreign. I quickly came across some limitations, which I'm sure they'll address (gradients please!). The tool itself feels great when you get your feet wet though, and there's never been a more exciting time to start using Framer.

The Workflow

Framer Design is a huge update that added the ability to design right in the Framer app. That means you can use one tool to design both the static and the interaction and animation for your products. This is a huge bonus. Simply design to your heart's content in the Design tab. Flip over to Code and add events and animation to bring your design to life. If something doesn't work in your design once you start working on the interaction concept, you can go ahead and edit it right there. It's magical!

Additional Resources

Download Framer

Episode Topics: