Description
In this course, you will learn:
- How to lay out, prototype, iterate, and publish your designs using Framer tools and React component integration.
- The differences between Framer Studio and Framer X, and build your layout with the easy-to-use drawing and design tools.
- How to make your design more engaging with click and scroll interactions.
- How to incorporate React components into Framer for faster design and maximum reusability.
Syllabus:
- Introduction
- Learning Framer X
- What you should know
1. Introduction to Framer X
- What is Framer X?
- Differences between Framer and Framer X
- Overview of the interface
- Overview of the store
2. Design in Framer X
- Define your layout
- Explore frame resizing
- Create more layouts
- Use frames with pictures
- Stacks introduction
- Use texts in frames
- Draw with a path
- Complete a logo with drawing tools
3. Prototype in Framer X
- Overview of interactions
- Create a click interaction
- Create a scroll interaction
4. Introduction to Components
- What is a component?
- Introduction to React
- Your first React component
- In-depth look into the component
- Introduction to overrides
- Publishing your component