[CS1] Design Editor

The design editor is where you bring everything together to actually create your components. 

Top Bar

The top bar is used to navigate your designs. First you can select which component you're working on. Then whether you're designing the face or the back. You can turn off the overlay, and also see what type of component you're working on. 

The Jump To dropdown allows you to quickly navigate the side bar. 

Back to Designs will take you back to the design manager. 

Preview

The preview lets you see your design in real-time. As you make a change the preview will be updated. If it goes black, that means you've had an error, and an error message will also be displayed.

Side Bar

The side bar contains the list of steps that you have added to your design so far. It also shows you the list of step types that you can add to your design. And it also shows you the component and system variables available to you.