This is a brief tour of what’s in the TodoMVC Plasmic project. We use this to also introduce some basic concepts in Plasmic and explain how the app is modeled using these concepts. This is written for all new users to Plasmic, whether designer or developer.
TodoMVC is a standard introductory app, so this project recreates the same design. You can play with example implementations of the app at todomvc.com.
Make a copy of your TodoMVC Plasmic Project
The example TodoMVC Project is here. Visit that page, and you will see a notification that you only have read-only access, but can make a copy of the project. Go ahead and do so, so you can play with your own copy as you follow along.
Artboards and Arenas
A Plasmic project consists of designs of components, which are reusable parts of the product being designed. These can be small(like buttons) or large(like entire screens).
When you open up the project, you’ll see a bunch of artboards laid out showing the various components. The space they’re placed in is the arena(“page” in other design tools).
A project can have multiple arenas, and you can bring up the arena switcher in the top left of the studio UI. You can rename the arena by double clicking the name.
The second arena has a bunch of artboards set up to show the app in its dark mode theme. We will talk about this in detail later in this document.
TodoApp component
Back in the Light Mode arena, you should see the TodoApp component. This is the main screen of the app. It consists of a header for inputting a new task, a list of tasks, and a footer to toggle what tasks to view in the list. Take a look at the structure of the UI outlined in the left tree.
The list is a vertical stack, tasks-container, that hardcodes four tasks. These are instances of the Task component, each one set to a different variant—states that the component can be in. For instance, the second one is in the editing state, and the third one is in the completed state(the others are in the normal or base variant). We’re just showing them in different variants to illustrate the different states they can be in.
Notice the Task instances have different text. Task is an example of a component that has a slot—a“hole” in the component for instances to fill in with content. Think of a Button component that has a slot for the button’s text—that way one Button instance can read“OK” and the other“Cancel.” This is accomplished using overrides in other design tools, but in Plasmic the component author designates what parts are allowed to be overridden. Here, the Task component has a slot for the description text.
The Header and Footer are also separate components—the TodoApp component contains an instance of each.
The entire TodoApp main screen itself also has a second variant. So far we’ve been looking at the base variant. All components always have a base variant—this is often the normal or typical appearance of the component. But the TodoApp has an“empty state” variant. Notice that when there are no tasks, we don’t show any footer—that’s the main difference.
You can bring up the Component Panel by clicking anywhere in the relevant artboard, and select any variant to see what it looks like. Note that when a component variant is selected, when you make changes, your changes will be specific to that variant.
Header component
To the right of the TodoApp artboard, at the top you’ll see the Header component in its own artboard.
It has a few different variants that you can switch between. There’s the base variant, and also the“empty state” variant and“all-checked state” variant. These two other variants are in a variant group called“State.” All variants are organized into groups, which are typically single-choice groups—only one variant in it can be active at a time. For instance, a Button component might have a Color variant group with Red and Blue variants, along with a Size variant group with Small and Large variants.
Here the State variant group lets you activate either“empty” or“all-checked” but not both. You can click them to switch what is shown to the different variants:
Make a copy of your TodoMVC Plasmic Project
Artboards and Arenas
TodoApp component
Header component
Task component