Home » Courses »

Design and code in Framer X

Create powerful design and code components for your app and design system.

Short course Intermediate Design systems Design-to-code Prototyping

Visit site »

In this course, you’ll learn how to design layouts and icons from scratch. As you get more familiar with how Framer X works on a foundation level, we’ll dive into their powerful components and override system, and also, their stack tool which allows you to build truly adaptive layouts effortlessly. Then, we’ll build a quick prototype with zero code that connects all the screens together using beautiful transitions and scroll.

Code components are by far the most innovative part of Framer X. We’ll learn how to code them from scratch with minimal and easy-to-understand code, for designers. We’ll create custom overrides and states, and build awesome animations using the power of CSS and JavaScript events. We’ll also make API connections to tap into UINames and Unsplash, and we’ll learn how to create an icon library as a customizable code component. I tried really hard to make this course more about the hidden and special capabilities of Framer X. If you’ve learned React, you’ll be right at home.

Course details

Institution
Design+Code

Course type
Short course

Level
Intermediate

Qualification
Unaccredited

Length

Cost
Free


UX Lift newsletter

Join with hundreds of other creatives and get a roundup of the best UX articles, resources and tools every week.

Get the newsletter

Related courses

Advanced Prototyping with ProtoPie

A free course to quickly prototype advanced animations and interactions for mobile and Web.

Short course Beginner Prototyping

Design and code in Framer X

Create powerful design and code components for your app and design system.

Short course Intermediate Design systems Design-to-code Prototyping