From the course: Principle for UX Design (2019)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create reusable UI components

Create reusable UI components - Principle Tutorial

From the course: Principle for UX Design (2019)

Start my 1-month free trial

Create reusable UI components

“

- [Instructor] A common feature regardless of platform, is components. These are reusable UI elements and in many respects are akin to symbols in a lot of interactive or motion tools out there. Principle is no different. And in this exercise, we're going to create a simple component. So to get yourself started, open a new Principle document, and let's get going. So the first step, of course, we're going to create the rounded rectangle tool and we'll just draw a rounded rectangle like that. And we're going to come in to the properties here, and we're going to set the width to 100 pixels, and the height to 50 pixels. And, we're going to take the radius and we're going to round off the corners, so we just take the radius just like that. And now what we're going to do is fill the shape with white and we're going to give it a four pixel black stroke. So what we've got here is the base of a simple switch. So we'll just name the Layer, "base". So we're going to have a little knob in here, or…

Contents