Workflow

Here is a bird’s eye view of how Plasmic works across design and development. We go over the two typical workflows.

In the following, we use the terms Designer and Developer, but these may frequently be the same person. These are simply whoever is using Plasmic Studio to create the designs, and whoever is implementing the application logic, respectively.

Creating brand-new components

  1. Designers build components in Plasmic (from scratch, or by importing designs from Figma/Sketch). Plasmic allows designers to specify component styles, slots, and variants, using a real layout engine and style tokens / mixins.
  2. Designers inform developers that the components are ready for them to work on.
  3. Developers run our CLI, plasmic sync , to fetch associated generated code for these components and place them in their local code repo.
  4. Developers implement the logic, data, and behavior into these components.
  5. Developers can push and merge the changes containing both generated code and their additional work as normal code commits.

Updating components

  1. Designers directly edit the components’ design in Plasmic. As before, these can be passed to a developer who plasmic syncs the changes.
  2. Presentation-only changes that do not affect the structure of the UI in an incompatible way will not require further code changes from developers. Otherwise, developers update the corresponding code component if necessary to accommodate breaking changes (for example, new component variants, new elements to attach event handlers to, etc).
  3. Developers can push and merge the changes as a normal commit.

Setting up your Plasmic Project

Before starting, make sure you have a Plasmic account already, and take a look at the TodoMVC Plasmic project to get a sense of what we’re making.

We have a quick tour of the project that walks through the components that comprise the UI and (more importantly) how they’re modeled in terms of Plasmic’s core concepts. Please have a read to familiarize yourself with the structure of the project and these core concepts.

Installation

First, create an empty React app:

npx create-react-app todomvc --typescript
cd todomvc/

And start the app, which should open up in your browser:

yarn start

Now, in a separate terminal, install Plasmic:

yarn global add @plasmicapp/cli
# or
npm install -g @plasmicapp/cli

Now you should be able to run:

plasmic help

Plasmic init

To start using Plasmic with your project, make sure you’re first in the React project’s base directory.

Let’s create the initial ~/.plasmic.auth and plasmic.json file with:

# from todomvc folder
plasmic init --src-dir src/

You’ll be asked a short series of questions to help guide the initialization. You’ll also be prompted to create a Personal Access Token in Plasmic. We’ve also specified that the source directory is src/, which is where Plasmic will be saving generated code and assets.

You’ll finally be asked to install our small runtime component:

yarn add @plasmicapp/react-web
# or
npm install --save @plasmicapp/react-web

Now ~/.plasmic.auth should have your credentials. Check out the plasmic.json (in the current directory) file if you’re curious what’s inside—it gives some clues as to what’s coming next!

Plasmic sync

To sync some components , run:

plasmic sync --projects PROJECTID

where PROJECTID is the ID at the end of the URL when opening a project in Plasmic Studio.

You will note that your .plasmic.json file is keeping track of what components you have exported, and where the exported files live.

Further reading

You can read more about the workflow here: