Master a new skill.

Select a topic and start learning
  • Swift

    37 Episodes
  • Sketch

    33 Episodes
  • After Effects

    15 Episodes
  • Flinto

    14 Episodes
  • Kite Compositor

    13 Episodes
  • Framer

    10 Episodes
  • Origami

    9 Episodes
  • Game Design

    6 Episodes
  • Experience Design

    5 Episodes
  • Principle

    5 Episodes
  • Cinema 4D

    5 Episodes

Episode Library

Page 2 of 15
Back to Episode Home
  • 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
  • Export Swift Code

    Export Swift Code

    Export Swift Code
    • 4:35
    • Free
    Code export is finally available in Kite, and we'll use it to get our checkbox out and into Xcode as Swift code. It's a great starting point for customization, as all the tedious drawing code is done for you!
    • 4:35
    • Free
  • Import and Animate the Checkbox

    Import and Animate the Checkbox

    Import and Animate the Checkbox
    • 5:51
    • Free
    This first episode is all about just getting our sketch design into Kite and animating it. With Kite being so new, we figured a quick refresher is in order!
    • 5:51
    • Free
  • Live Input Validation

    Live Input Validation

    Live Input Validation
    • 4:14
    • Pros
    One giant step toward realism is incorporating live features like input validation when the user is typing. We'll be adding that to the email field now.
    • 4:14
    • Pros