This is the last installment of this tutorial. Catch up on Part 1 and Part 2 before moving forward!
Symbols are great for organizing elements of your design that you re-use often. For this example, let's turn the sock monkey icon into a symbol. With the icon selected, look in the top menu bar and select "Create Symbol"
After you click this, a text field opens up in the Inspector. I named this symbol "Sock Monkey".
Notice how the folder icon in your layers palette turned from blue to purple. That means it's a symbol!
Now this symbol shows up in the Insert menu! Let's insert one.
Now we have two sock monkeys, both with purple folder icons:
The cool thing about symbols is that they are linked. Any change you make to one will apply to all other instances of the symbol. For example, if you resize one of the symbols, the other is also resized.
Now I want to teach you a shortcut to duplicate any layer in sketch. With one layer selected, hold down alt/option while you drag it. Sketch automatically shows you red guidelines so you can align the copied layer to the artboard and other layers. Let go of your mouse first, then release the alt key to place the file.
Let's repeat that one more time so we have three sock monkey icons at the bottom:
There's a quick way to make sure all of these have the same amount of space between them. First, select all three layers. Then click "Distribute Horizontally"
What this does is take the left-most and right-most objects and aligns all objects in between with equal spacing. This works with any selection of 3 or more.
Now, let's learn how to detach symbols. We want to resize the top monkey icon without affecting any of the others. To do this, we must right click on the top monkey and select "Detach from Symbol"
Now we can safely make this icon bigger without affecting any of the other symbols. Notice that the folder color is blue once more:
How do you get your artboards out of Sketch? With the export function! It can batch export your artboards in PNG format named after your artboards.
Before you export, you must select each artboard and check "Background Color" and "Include in Export" in the right hand Inspector. These are not checked by default! If you do not check this, your artboards will have transparent backgrounds.
Repeat the same step with the other artboard.
As you can see, you can select different size options (@2x, @3x, etc), add a suffix, or change the file format for each artboard. I usually leave the default settings, especially since our base artboard is already sized @2x for iPhone 5.
Once you have these options set, you can export every artboard by clicking File > Export or shortcut ⇧ + ⌘ + E.
On the dialog, make sure all artboards are selected.
Then click Export and you're done!
Download my final Sketch file here.
Buy me a coffee (or tea) to support free content and keep these tutorials ad free.