1. 1

    Tour the UI

    6:19FreeDone
  2. 2

    Laying Out Shapes and Text

    9:15FreeDone
  3. Adding Images and Effects

    11:31FreeDone
  4. 4

    Add Code to Your Design

    7:22FreeDone
  5. 5

    Sharing Your Prototype

    3:23FreeDone

Adding Images and Effects

Published by Chris Slowik

Episode Notes

Extra tips from the author

Images and Shadows

One super important step toward making your prototypes look real is images or photos. It's well worth the time and effort to put images instead of placeholders, and get a real candid reaction to your UI in prototype form. Adding images to Framer documents is as easy as copy/paste. You can also drag and drop images onto the canvas. There's no import or image fill (yet), but that's not a huge hindrance.

Shadows are handled similarly to Sketch. For either inner or outer shadows, you've got a control for color, offsets, and blur.

Episode Topics: