Let’s introduce Gouache
Enhance your design to production workflow with Gouache.
If you’re a developer, a designer, and/or a manager will love Gouache. Built to reduce the frictions within the different units of your team, our Design Data Platform will help you to collaborate, prototyping & uniformize your apps with fun.
Here are a few features that will make fall in love with Gouache:
- Bypasses the regular development cycle: With Gouache, anybody on your team will be able to test fixes, and prototype visual changes on your app, without having to go through the regular development cycle of your organization.
- Hot reload in production apps: Whenever you’ll be making changes on your platform, you’ll be able to see it live-updating automatically, safely, and in any environment. Once ready, you’ll be able to safely push the changes to all of your users.
- Single source of truth: By storing your different design tokens and building blocks, Gouache will become your team’s single source of truth.
- Structuring your data efficiently: To help you store all your design data on Gouache, we’ve developed an intuitive file storage system that let you shape your data exactly how it makes the most sense for you and your team.
- Documentation: With Gouache, you can add documentation almost anywhere you want. This will help your team to be on the same page along the journey.
- Free to use: We’re currently in public beta; all our current features are free to use and will remain free to use.
Now that you know what Gouache can you do for you, here is a tutorial that will explain to you the basics features of Gouache.
Tutorial
In this tutorial, we will show you how to use the Gouache platform by creating styles for a primary and a secondary button.
Let’s create an account
Go to https://gouache.app and click on the Authenticate button. From there, enter your email address and click on the Authenticate button.
You’ll then be asked to verify your account with an OTP (One Time Password). Open the email we’ve sent to you and click on the Authenticate button. This will redirect back you to the Gouache app .
Now, we’ll ask you to complete your signup by adding your username. Once finished, you’ll see your empty projects page:
Creating your first project
Now, we’re going to create your first project. To do so, click on the + Create project button. Then, enter the name of your project and click on Create a project .
Since it’s your first project, we’ll use the Recommended template. The recommended template is using Gouache’s best practices when it comes to project structuring. The Recommended template also generates Read me files for every generated folder that gives you more information about the structure and how to use the app.
Gouache is using the file system data structure, uses to control how data is stored and retrieved. Think of it as folders and files inside your computer OS.
Your Gouache project should now have 3 folders inside it ( design token , reusable blocks , and themes .
Design tokens
Now, let’s navigate inside the design tokens folder. In this folder, we recommend you store all the design tokens that construct your Design System or App.
For this tutorial, we’re going to create a few colors that we’ll be reusing inside our app. To create a design tokens folder, we need to click on the Add button, located on the top right side of the platform. Click on Design tokens and enter the name of your design tokens folder.
Let’s add a few colors tokens here. To do so, click on the + Design token button. Add a token name and a value and then click on Add .
We’re going to add 3 color tokens here:
white 👉 #ffffff
black 👉 #111111
blue 👉 #1b00ff
Your colors design tokens file should now look like this:
If we take a deeper look, we can see that Gouache has automatically generated a token ID (ex: $designTokens.colors.black ).
These tokens are unique and represent where they’re being stored inside the project:
Now that we have created a few design tokens, let’s create a reusable block!
Reusable block
Now, we’re going to create our first reusable block. Reusable blocks are Styles Sheets that will be reused inside more specific UI components.
Let’s navigate into our reusable blocks folder, click on the top rightAdd button, and select Style Sheet . For this tutorial, we’ll name the Style Sheet button .
Your new Style Sheet should now look like this:
Now let’s add a few styles for our button reusable block.
Here are the styles that we’re going to add. Adding styles is pretty similar to changing apps styles using the Chrome devTools console .
We’re going to add the following basics styles to our button reusable block:
border: 2px solid;
border-radius: 8px;
font-size: 16px;
padding: 8px 20px;
Once you’ve added your styles, don’t forget to click on the Save changes button to make sure the data persist.
Your button reusable block should now look like this:
Now that we have this reusable block ready to use, we’re going to create 2buttons types: primary andsecondary .
Themes
At Gouache, we like to use a folder called themes . That is where the consumed styles object will be created. Inside this folder, we recommend you separate the UI themes that consist of your app. For instance, you could create a default and a dark theme. These folders would then contain Style Sheets specific to each of these themes.
For this tutorial, we’ll be creating a theme called default . This theme will contain 2 types of buttons: primary & secondary .
To do so, we need to navigate into the themes folder. We’re going to add a Folder here called default . Since we’re going to only have 1 theme for this tutorial, let’s add a folder called default . To do so, click on the top-rightAdd button and select Folder . Name your file default and click on the submit button.
Your newly created default theme should then look like this:
Now, let’s create a buttons folder inside the default folder. In these buttons folders, we will be putting the 2 different button styles (i.e. primary & secondary ).
Your newly created buttons folder should then look like this:
Creating the primary button
Now, let’s create our first button type, the primary button. First, let’s add a Style Sheet inside the buttons folder by clicking the top-right Add button and selecting Style Sheet . We’re going to name this Style Sheet primary .
Your newly created primary Styles Sheet should then look like this:
Now, the first thing we want to add to the primary Style Sheet is the button Reusable block created earlier.
To do so, we need to click on the + Reusable block button, select the reusableBlocks.button item and click on the Save changes button.
In the following video, you can see how easy it is to add a reusable block. You can navigate to the reusable block by clicking on the reusableBlocks.button link. Every change made inside the button reusable block will be automatically be updated inside yourprimary button ✨
Similarly to the Design tokens IDs, the folders name represent where the reusable blocks are being stored inside the project:
Your primary Styles Sheet should now look like this:
Now, let’s use our design tokens created earlier to style our primary button. We’re going to use the $designTokens.colors.blue token for the background-color and for the border-color and the $designTokens.colors.white token for the color of the primary button:
background-color: $designTokens.colors.blue;
border-color: $designTokens.colors.blue;
color: $designTokens.colors.white;Adding a Design Token as a style value is pretty straightforward. As done earlier when editing the button reusable block, we need to click on the + Style button and enter the style property (ex: background-color ) and type the design token ID starting by a $ character.
Your primary Styles Sheet should now look like this:
Here is the anatomy of your primary button:
Creating the secondary button
Now, let’s do the same thing for the secondary button. We need to navigate to the buttons folders inside our default theme. From there, let’s add a Style Sheet called secondary .
Your newly created Style Sheet should look like this:
Inside the secondary button, we will be using the same button reusable block as on the primary button but we’ll change how we’re using the design tokens. We’re going to use the $designTokens.colors.blue token for the border-color and for the color and the $designTokens.colors.white token for the background-olor :
background-color: $designTokens.colors.white;
border-color: $designTokens.colors.blue;
color: $designTokens.colors.blue;Your secondary Styles Sheet should look like this:
Downloading the Styles object
Now that we’re happy with how we structured our primary and secondary button, let’s download the Styles object of our project.
To do so, click on the more button ( ... ) of any folder of your project and then click on Download styles object . This will generate a JSON file representing your folder styles.
Here is what your project’s Styles object should look like:
As you can see below, your Styles object has the same structure as your Gouache project. All the Design tokens and Reusable blocks have now been replaced with their referenced value.
You now see that it’s really easy to keep your styles organized with Gouache. This is only the basic feature of the platform and did not include all the more advanced features to make your life easier as a Designer, Product Manager, and Developer!
use-gouache 📦
Now that we know how to use the Gouache platform, let’s take a look at how to connect it to our React app using the use-gouache hook. We’re going to use the simplest way to do it using inline styles.
Now, hop on your current React project or create a new one. For this tutorial, I’m creating a simple app that will show the primary and the secondary button:
First, let’s get the Gouache API key. To do so, you need to go to the root of your project and click on the more button on the left of your project title. Then click on Settings to see your API key and copy it.
Now, let’s go back to your react project. Install the package using the following command using your terminal:
yarn add @gouache-app/use-gouacheornpm i @gouache-app/use-gouache --save
In order to connect your app to Gouache, let’s use the use-gouache:
If you remember the Styles object downloaded earlier, this is how the styles object will be:
Your primary and secondary buttons should then be updated 🎉
Now that our React app is connected with Gouache, we can perform changes to the Gouache platform and see the changes live-updating into our app ✨
Congratulations 🎉
Nice work, you’ve finished the basic tutorial about how to use Gouache! We hope that you’ve liked this introduction and that it has made you excited about how powerful and how convenient Gouache can be.
Don’t forget to follow us on Twitter and LinkedIn to get updates about our next blowing mind features that are coming 🤯
Thank you for your time and have a great day,
Gouache team
Gouache App:
https://gouache.app/
Gouache Documentation:
https://docs.gouache.app/
use-gouache hook:
https://github.com/Gouache-app/use-gouache
Twitter:
https://twitter.com/gouache
