A plugin is doing the work

One of the coolest Colors Coder features is the ability to import color libraries from Sketch app. That makes the process of handing off color libraries from designers to developers an amazingly simple process, while even developers who use Sketch they'll manage to speed up their work.

In order to make that possible, a Sketch plugin is also provided that must be installed on Sketch. Its purpose is to generate a file that contains all the information about the color library that must be imported to Colors Coder and it is readable by it.

Using the plugin is simple. Go to menu Plugins > Colors Coder > Export Color Library, and in the Save file window that will appear provide a file name (optionally) and choose the export folder. Then just export. In case of a problem, an informative alert will appear instead. The exported file will have the .scbse extension.

Follow the Rules!

Exportable color libraries from Sketch and capable of being recognized by Colors Coder must follow a few simple rules. Here they are:

  1. In your Sketch document create a page and name it ColorsCoderLibrary.
  2. Add one or more Artboards. An artboard represents a collection in Colors Coder app.
  3. Name your artboards properly, even though you can rename them as collections in Colors Coder app later.
  4. Add one or more Shape objects to the artboard(s). Any shape would work, it doesn't have to be of any specific type.
  5. Set the desired Fill color to each shape object added to the artboard.
  6. Name your shapes. Those match to color names in Colors Coder app.

Import to Colors Coder

Once you export your color library from Sketch app successfully, it's time to import it to Colors Coder. To proceed, either create or open a Colors Coder document, and import following one of next methods:

  • In the main menu choose Import > Sketch Exported Color Library.
  • In the toolbar click on Import > Sketch Exported Color Library.
  • Press Cmd-I on your keyboard.
  • Just drag and drop the exported file to Colors Coder document.

Colors Coder will instantly read the file and convert the color library information. You will see new collections appearing in your document. From that point you can either keep editing your colors, or generate code.