Learn how to write your first Framer X component with React.
- [Instructor] So, let's work on our first React component.…One first item you absolute need to work in code…is a good code editor, and the one I recommend is VS code.…So, if you don't have it installed,…please pause the video and go to this URL to install it.…When you have it installed, you can go back to Framer X.…Like I've explained before,…everything can be a component inside of Framer X.…So if, for example, you wanted to have…something like TinyFaces as a component,…we could select it, install it,…and then we'd have it inside of our components here,…and then we can add it directly onto our interface, like so.…
We can do it again on every screen we want.…But, one thing comes with components,…the ability to add properties inside the component here…and to be able to impact those properties.…So, for example, if we click on…any of those properties here,…these are props that were created directly inside of React.…So, for example, if I hit false here,…gender false, and then put my name,…and then select the color that we've been using…
- What is Framer X?
- Define your layout
- Creating more layouts
- Using frames and text in frames
- Drawing with a path
- Creating interactions
- Working with React components
Skill Level Beginner
Building and Maintaining Your UX Design Portfoliowith Diane Cronenwett15m 54s Intermediate
Practical UX Weekly: Season Twowith Drew Bridewell2h 47m Intermediate
Learning Framer X1m 8s
1. Introduction to Framer X
2. Design in Framer X
3. Prototype in Framer X
4. Introduction to Components
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.