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
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.
Updating components
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.
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:
# {shell}
npx create-react-app todomvc --typescript
cd todomvc/
And start the app, which should open up in your browser:
# {shell}
yarn start
Now, in a separate terminal, install Plasmic:
# {shell}
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:
# {shell}
# 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.
Creating brand-new components
Updating components
Setting up your Plasmic Project
Installation
# {shell}npx create-react-app todomvc --typescriptcd todomvc/# {shell}yarn start# {shell}yarn global add @plasmicapp/cli# ornpm install -g @plasmicapp/cliplasmic helpPlasmic init
# {shell}# from todomvc folderplasmic init --src-dir src/