Framer X is taking a huge leap into the future. It’s the only design tool that allows you to create code components that can be used in an actual React site. This can be insanely useful for your design system without disconnecting the design from code, or adding extra layers in between. Your Framer X components can be a single source of truth. You can seamlessly sync your React components between Framer X and your favorite code editor. Developers can truly collaborate with designers on creating consistent and production-ready components.
This Course
Framer X is not like any other tool. It’s completely focused on interaction design. As a result, you can build states with overrides, animate complex interactions and work with dynamic data, all within the design tool. There is no limit to your creativity. The great part is that you can build it all yourself with few lines of code, or you can use one of the thousands of components available in the store.
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.