Published on <a href="https://blog.prototypr.io/color-timesaver-ui-sketch-f973dbcb498a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> fernandocomet 
Imagine you have a project, and you have to create a color palette for it. Maybe you want to test more than one just palette, and you want to do it fast.
I´ve built an Sketch file so once you put your palette colors in the symbols, you can see many different layouts for them quickly. You can <a href="https://www.dropbox.com/s/1m44glp6yxyyupr/ColorDesignSystem_Layout.sketch?dl=0">download the example here.</a>
<h4>How does this work?</h4>
<ul>
<li>Make your moodbar (ie. Pinterest)</li>
<li>Select one or more photos from your Moodbar</li>
<li>Upload each photo to <a href="https://color.adobe.com/">Adobe Color CC</a>, (or similar) and get your five color palette.</li>
<li>Open my Sketch file, go to symbols and change the colors of them: You have to do it for color and texts symbols: “Color 1”, “Color 2”, “Color 3”, “Color 4” and “Color 5” to each of your palette. Same for Primary Text and Secondary Text symbols.</li>
<li>Go to Page1 and see the Magic</li>
</ul>
<h4>An example with Mona Lisa.</h4>
”The Mona Lisa; <a href="https://en.wikipedia.org/wiki/Italian_language">Italian</a>: Monna Lisa or La Gioconda is a half-length <a href="https://en.wikipedia.org/wiki/Portrait_painting">portrait painting</a> by the <a href="https://en.wikipedia.org/wiki/Italian_Renaissance">Italian Renaissance</a> artist <a href="https://en.wikipedia.org/wiki/Leonardo_da_Vinci">Leonardo da Vinci</a> that has been described as “the best known, the most visited, the most written about, the most sung about, the most parodied work of art in the world”.It is also one of the most valuable paintings in the world”. <a href="https://en.wikipedia.org/wiki/Mona_Lisa">See at Wikipedia</a>
The <a href="https://color.adobe.com/MonaLisa-color-theme-10362519/">color palette for MonaLisa</a> is this one:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*c9tFOEfar_ySfqgU6hklVg.png">
So, in my Sketch file I have this symbols:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KaPnf1H_8ZuPB-jZDwgZow.png">
Once I have the colors, I can see different Layouts. I made some, more could be done:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Q0vsueHBrPCMaaT2MweGDA.png">
This could save your time to choose colors and could also be the beginning of a Design System. You could also do it with styles.
You can <a href="https://www.dropbox.com/s/1m44glp6yxyyupr/ColorDesignSystem_Layout.sketch?dl=0">download the example here.</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f973dbcb498a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/color-timesaver-ui-sketch-f973dbcb498a">Color Timesaver (UI Sketch)</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Color Timesaver (UI Sketch)

Top Stories