Categories
Prototyping

Start Prototyping

With some of the recent updates in G2 components, it’s become clear that the library has become a phenomenal tool for rapid prototyping. With the fundamental systems in place (in particular styling and a healthy collection of primitive components), I’ve been able to experiment and create pretty feature-rich experiences. (Some of this was demonstrated in a recent Zoom session.)

For the purposes of prototyping and testing… If you’re interested in giving these G2 Components a try, I’ve prepared some resources for you!

Getting Started

We can start prototyping with G2 Components in 2 ways:

  1. CodeSandbox (Recommended)
  2. Create React App

I recorded a short video tutorial walking through each of the methods mentioned above.

CodeSandbox

CodeSandbox starter kit screenshot.

To get started with the CodeSandbox template, click here.

Create React App

If you’d prefer a more Create React App like experience, run the following command in your Terminal:

npx create-react-app my-app --template @wp-g2/cra-template-protokit

Once it’s done installing, there should be some instructions at the end on how you can start developing things.

Example

GIF demoing a prototype of a Gutenberg “Daily Photo” block’s controls

As an example, I used the CodeSandbox starter and created a prototype of a potential “Daily Photo” Gutenberg block, allowing the user to adjust various filters before adding it into the content (seen above). It’s not completely functional, but there’s enough to give a really good sense of the final experience.

Link to prototype shown above via CodeSandbox

Feedback

Just giving you a heads up, since this project is still under early and heavy development, these starter kits may change overtime. There’s also no documentation at this time for the components or for the various systems. If you get stuck, the “simplest” (not really, but okay, haha) way to unstick yourself would be to check the source code or the stories for the various components.

If you have any thoughts or feedback in terms of aesthetics, design/development experience, component APIs, ideas, or anything else, please let me know by submitting an issue in the Github repo!

Good luck! Have Fun!

Thanks

A huge thanks to everyone who has provided feedback and supported this project! Also, a special thanks to Lynn for inspiring the prototyping ideas!

Edit: Added a prototype example!

By Q

I specialize in Design Systems, Interaction, and UI.
I'm a Principal Designer at Automattic.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s