Amsterdam,
Muziekgebouw
August 19–21

This year we've put extra emphasis on workshops. We want everyone who leaves Loupe 2020 to feel inspired and hopefully return home with new skills.

Framer Fundamentals

  • Beginner

About

If you’re a designer or developer just getting started with Framer, this workshop is for you. We’ll start with the fundamentals of Framer—what it’s for and what makes it special. Then we’ll create a project together, learning Framer’s interface, features, and core functionalities along the way.

Contents

  • What is Framer

  • Coming from other design tools

  • Importing workflow explanation

  • Creating a few basic projects (without code)

  • Public packages

  • Web features, commenting collaboration

    Requirements

  • No requirements

Instructors

  • Viktor

  • Grace

User Testing

  • Beginner

About

User testing is more important than ever. Fast iterations and continuous improvements are more valuable than endlessly pushing pixels. In this workshop, you'll explore some new ways you can use Framer to supercharge the product design process through testing and iteration.

Contents

  • Building a prototype for testing

  • How to run a user testing session

  • Iterating based on feedback

    Requirements

  • Some understanding of Framer UI

Instructors

  • Brendan

  • Iain

Pair Prototyping

  • Intermediate

About

In this workshop, you’ll learn how to use Framer for design to development collaboration. We’ll create reusable components, explore design systems in Framer, and learn which features can be customized for your team.

Contents

  • How to share and collaborate on Framer projects

  • How to receive and iterate on feedback in Framer

  • New ways designers and developers can work together

    Requirements

  • General understanding of Framer

  • Some understanding of the Framer API

  • Some understanding of overrides and code components

Instructors

  • Jordan

  • Zach

Hi-fidelity prototyping

  • Intermediate

About

Learn how to bring your designs to life with Framer and create hi-fidelity prototypes. This workshop will get you started designing meaningful animations and interactions in Framer without touching code.

Contents

  • Why should you create hi-fidelity prototypes?

  • Prototype examples

  • Animations and interactions built in Framer

  • Re-creating common animations and interactions

  • Creating a project from start to finish

    Requirements

  • General understanding of Framer

  • Some understanding of the Framer API

  • General understanding of overrides and code components

Instructors

  • Hunter

  • Peri

Design Systems for Teams

  • Intermediate

About

It's common for teams to have some way of organizing how their products look and feel. This can be standardized with common UI elements and color tokens, all the way to set animation curves. In this workshop, you'll learn more about how design systems are integrated in Framer, and how you can set up your own to bridge the gap between design and development.

Contents

  • Importing a production Design System

  • Setting up theming in Framer

  • Sharing components through Framer

  • Automating updates

  • Developer handoff

    Requirements

  • General understanding of Framer

  • General understanding of React concepts

  • Some understanding of HTML, CSS, and JavaScript

Instructors

  • Addison

  • Aroa

Advanced animations with Framer Motion

  • Advanced

About

Framer's powerful interaction and animation library is built on top of Framer Motion, an open source React library built for web and mobile. If you want to hear more about how our library was built, or learn about new and creative ways you can use Framer Motion, this workshop is for you.

Contents

  • Deep dive into the Framer Motion API

  • Theory around building Framer Motion

  • Tricks and hacks

  • How to build something complex with Motion

    Requirements

  • General understanding of React concepts

  • General understanding of Framer

  • Detailed understanding of HTML, CSS, and JavaScript

Instructors

  • Anne

  • Steve