Master a new skill.

What do you want to learn today?
  • Swift

    48 Episodes
  • After Effects

    44 Episodes
  • Sketch

    35 Episodes
  • Framer

    34 Episodes
  • Game Design

    23 Episodes
  • Origami

    16 Episodes
  • Flinto

    14 Episodes
  • Kite Compositor

    13 Episodes
  • Experience Design

    5 Episodes
  • Principle

    5 Episodes
  • Cinema 4D

    5 Episodes

Episode Library

Page 9 of 22
Back to Episode Home
  • UI Layout With Loops

    UI Layout With Loops

    UI Layout With Loops
    • 5:37
    • Free
    Rather than explicitly writing out every single layer, it's often shorter and more efficient to use loops. We'll rebuild our album stack from design mode with code, using loops.
    • 5:37
    • Free
  • Building Layers in Code

    Building Layers in Code

    Building Layers in Code
    • 2:36
    • Free
    Before doing the complex stuff, we'll need to master building layers from scratch in Framer code. This episode goes into the details of designing in code.
    • 2:36
    • Free
  • Sharing Your Prototype

    Sharing Your Prototype

    Sharing Your Prototype
    • 3:23
    • Free
    Obviously prototypes are created for others to experience. Learn how to upload and share your work with Framer Cloud
    • 3:23
    • Free
  • Add Code to Your Design

    Add Code to Your Design

    Add Code to Your Design
    • 7:22
    • Free
    To bring your prototype to life, you'll need to add some code. Thankfully Framer makes it easy with auto-code, even though you can still freeform edit.
    • 7:22
    • Free
  • Adding Images and Effects

    Adding Images and Effects

    Adding Images and Effects
    • 11:31
    • Free
    Adding images and enhancing the UI with tasteful effects is a big part of design. Focus on adding that final touch in this episode with some album art, shadows, and a cool trick to fade layers.
    • 11:31
    • Free
  • Laying Out Shapes and Text

    Laying Out Shapes and Text

    Laying Out Shapes and Text
    • 9:15
    • Free
    Framer is built with responsive layout in mind, and it automatically adjusts objects accordingly. The vector drawing tools should be pretty familiar, as well as text.
    • 9:15
    • Free
  • Tour the UI

    Tour the UI

    Tour the UI
    • 6:19
    • Free
    Framer Design has a UI that won't be terribly unfamiliar to anyone used to vector UI drawing on the Mac, but let's still take a quick tour around the UI and note some important features.
    • 6:19
    • Free
  • Give it a Custom Initializer

    Give it a Custom Initializer

    Give it a Custom Initializer
    • 8:25
    • Pros
    The finishing touch for this checkbox component is an initializer that sets it up with the desired text, and we'll fix the frame based on the length of text.
    • 8:25
    • Pros
  • Adding New Properties

    Adding New Properties

    Adding New Properties
    • 2:31
    • Pros
    To make this truly useful, it needs some properties exposed that will make it easier to customize when used in code.
    • 2:31
    • Pros
  • Creating Checkbox Functionality

    Creating Checkbox Functionality

    Creating Checkbox Functionality
    • 1:54
    • Pros
    Out of the box, the code from Kite won't function as a checkbox, but it's not too hard to get it to happen.
    • 1:54
    • Pros