Published on | Prototyping: From UX to Front End — Medium 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 download the example here.

How does this work?

Make your moodbar (ie. Pinterest)
Select one or more photos from your Moodbar
Upload each photo to Adobe Color CC, (or similar) and get your five color palette.
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.
Go to Page1 and see the Magic

An example with Mona Lisa.

”The Mona Lisa; Italian: Monna Lisa or La Gioconda is a half-length portrait painting by the Italian Renaissance artist Leonardo da Vinci 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”. See at Wikipedia

The color palette for MonaLisa is this one:

So, in my Sketch file I have this symbols:

Once I have the colors, I can see different Layouts. I made some, more could be done:

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 download the example here.

Color Timesaver (UI Sketch) was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Color Timesaver (UI Sketch)

Cool stuff, every week

More Articles