In this video, learn how to create reusable UI components such as a simple switch.
- [Instructor] A common feature of practically every … prototyping application out there, … regardless of platform, is components. … These are reusable UI elements that are also interactive, … and in many respects are akin to symbols … in a lot of the motion tools or interactive tools out there. … Principle is no different. … And in this exercise … we're going to create a simple component. … But even though the component is going to be simple, … it's a simple switch, … the steps are always the same. … So let's get started. … And to get yourself started … open a brand new Principle document … and don't worry about the size of the artboard. … So the first thing we're going to do … is we're going to come to the Insert menu … and insert a rounded rectangle, … and we're just going to draw one out. … And we're going to set the Radius to 100, … so that way we've got the switch base. … And we're going to set the Width to 100 and the Height to 50, … and we're going to give it a black stroke … of, say, four pixels and a white fill. …
- Adding content to new artboards
- Creating your first Principle animation
- Managing the Principle timeline
- Animating with keyframes and drivers
- Using assets from Photoshop and Sketch
- Masking and cropping
- Creating an Apple Watch UI
- Creating a video player
Skill Level Intermediate
Prototyping Microinteractions with Adobe Animatewith Joseph Labrecque1h 50m Intermediate
Prototyping Microinteractions with After Effectswith Tom Green3h 33m Intermediate
What is Principle?1m 17s
1. Getting Started with Principle
2. Using the Principle Timeline
3. Using the Principle Drivers
4. Managing Content in Principle
5. Practical Principle Projects
- 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.