brazerzkidaimom.blogg.se

#Paintcode sketch plugin how to
#Paintcode sketch plugin license key
#Paintcode sketch plugin pro
#Paintcode sketch plugin code
#Paintcode sketch plugin plus

Choose Drawings: Select which items you wish to export as code.

#Paintcode sketch plugin license key

PaintCode Plugin: Register a license key or purchase one on the website.

Sketch will drop down a plugin sheet with different options. Now that your layers are properly named and organized into Artboards, it’s time to generate some Swift code. Just make sure you de-select the Fill checkbox so that PaintCode knows your intentions.

#Paintcode sketch plugin plus

Shadow: Click the plus sign + next to Shadows to produce an NSShadow.

Gradient: Inside the Fill picker, choose Linear Gradient to produce a CGGradient.

Just create a shape using one of these properties from the right inspector panel:

#Paintcode sketch plugin pro

Pro tip: The Library also supports gradients and shadows too. PaintCode ignores the border color and width as well. PaintCode converts each of these shapes into an UIColor object, using the layer name and fill color.

In the Layers List, rename the Artboard to Library.

Drag your mouse to enclose all the colored squares.

Type the A key to use the Artboard tool.

Just create an Artboard named Library and drop in some shapes with different colors. Prep the color paletteīesides images, you can also make a color palette. So if you have multiple icons, you should place each one inside its own Artboard.

To center the image within the Artboard, select the blue folder icon and drag the image until it snaps to the red line guides.īy organizing layers inside an Artboard, you’re letting PaintCode know that you want to treat them as a single image.

In the Layers List, rename the Artboard to BubbleTeaCup.

Drag your mouse to create a rectangle around the image.

Click Insert\Artboard from the main menu (or use the shortcut key A).

Hold down the Space key and drag the canvas to pan around until you see the image.

First, you’ll nest the bubble tea cup image inside an Artboard. Prep the iconīefore you jump into using the PaintCode plugin, you need to do a little prep work.

#Paintcode sketch plugin code

It’s important to use meaningful names, because this makes the generated code easier to read. PaintCode will convert these names to variables and comments. Each layer has a name like liquid, bubbles, or Mango. On the left, there’s a panel called the Layers List.

Below the image, there’s a color palette with nine colored squares. Inside the main canvas area, you’ll see an image of a bubble tea cup. Open the starter Sketch file and take a look around. I’ve used Sketch and the PaintCode Sketch plugin to export the Sketch illustration to Swift code, and have the pre-generated Swift file waiting for you. Note: Alternatively, if you’d prefer to skip exporting the code for the Sketch illustration and jump straight into using it in an app, you can skip to ahead to the Working with the Objective-Tea Starter Project section. This tutorial does not require any Sketch skills, but check out this Sketch Tutorial for iOS Developers if you want to learn some basics. Then, download this Sketch starter file which you’ll use to generate Swift code.

Start by installing Sketch and the PaintCode Sketch plugin. Note you do not need a copy of PaintCode 2 to do this the PaintCode Sketch plugin is an independent product that exports the Swift Core Graphics code for Sketch illustrations, without the need for PaintCode 2 itself. Here’s what you need to export Swift Core Graphics code from Sketch:

#Paintcode sketch plugin how to

You’ll learn how to dynamically size the image and modify its colors and other properties. In this tutorial, you’ll get hands-on experience with the new PaintCode sketch plugin by exporting a Sketch illustration and using it in an app. As a bonus, the PaintCode plugin exports colors as UIColor objects - no more stringly-typed hex values! Designers can now deliver icons as Swift code instead of littering Slack with PNGs. The PaintCode Sketch plugin is great because it helps bridge the gap between design and implementation. I tried it out in my app and was making dynamically sized and colored map markers in no time! This was just what I needed - it’s a plugin that automatically generates Swift code for your Sketch illustrations. The next day, I found out about the new PaintCode Sketch plugin. So I gave a cop out answer and said to just use hard-coded PNGs. After some Googling, this didn’t look like an easy fix. Someone asked how to change the size and color of custom map markers and clusters. Recently, an issue came up on a map clustering library that I support.