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.
- 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.
- Designers inform developers that the components are ready for them to work on.
- Developers run our CLI,
plasmic sync, to fetch associated generated code for these components and place them in their local code repo.
- Developers implement the logic, data, and behavior into these components.
- Developers can push and merge the changes containing both generated code and their additional work as normal code commits.
- Designers directly edit the components’ design in Plasmic. As before, these can be passed to a developer who
plasmic syncs the changes.
- 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).
- Developers can push and merge the changes as a normal commit.
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.
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:
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:
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!
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.
You can read more about the workflow here: