Flagpack for Sketch
Flagpack for Sketch let's you use flags within your Sketch design files. Using the power of Sketch Symbols you can reuse flag icons across your Sketch Documents, Pages and Artboards. Besides that you can alter their look and feel using Symbol Overrides. All individual flag icons are also available as rasterized PNGs and scalable SVGs.
Quick start
Get started with Flagpack in Sketch by downloading the Shared Library to get started with Flackpag in Sketch.
Getting started
1. Downloading and adding as Library
Download the Sketch Library as a standalone Sketch Document. Go to https://drive.google.com/file/d/15oF5NN_dOp5HojtM_7pXT9ZzYYwFlDPl/view?usp=sharing and choose Download Document.
Once downloaded, the standalone Sketch document can also be added as a Linked Library. Learn how to add a Library on the official Sketch documentation pages.
2. Using the flags in your designs
Inserting the flag Symbol
There are six flag Symbols to choose from resulting from a combination of three predefined flag sizes and three predefined flag shapes.
A) Adding the Flagpack Shared Library to Sketch
There are six flag Symbols to choose from resulting from a combination of three predefined flag sizes and three predefined flag shapes.
1) Decide which size want to add
Insert the flag Symbol by going to Insert → flagpack and choosing one of the three predefined sizes:
- Small 16×12px S
- Medium 20×15px M
- Large 32×24px L
Subsequently choose one of the three predefined shapes;
- a circle circle,
- rectangle rect or
- rounded rectangle rounded rect
Choosing a (different) country
The default country of flag Symbols is set to the Netherlands and can be changed as it is a Symbol Override. To choose another country select the flag Symbol and click on the country Override dropdown in the Inspector. You can choose from a list of alphabetically sorted flags. Search by a country's two letter code (ISO 3166-1 alpha-2) or the full English country name. For a full list of available countries and their corresponding codes see the Flag Index.
Changing the styling
Choosing (different) styling effects
By default the flag Symbol has a styling effects applied to it. To change these styling options choose alternative options from the overlay and drop shadow Symbol Overrides dropdowns in the Inspector.
Choosing a different shape
If you decide to change the size of the flag Symbol we advice you to insert it again as a new or addition Symbol Instance going to Insert → flagpack.
The reason is each of the three predefined sizes has been custom designed to contain the right amount of detail for the sake of being recognizable. Replacing a yet inserted flag Symbol with another flag Symbol of a different size using the Inspector (or using Layer → Replace With...) is not advices. It can lead to a smaller sized flag Symbol displaying too many details in the country flag or the other way around: a larger sized flag Symbol displaying too little details in the country flag.
Fully customizing Flagpack
To fully customize Flagpack's flags and the way they look detach the main Symbol by going to Layer → Detach from Symbol (or right mouse clicking on a flag Symbol instance and choosing Detach from Symbol).
Note that if you've added Flagpack as a Sketch Cloud Library, detaching a Symbol can turn the flag Symbol coming from the Flagpack Sketch Cloud Library into a disconnected Layer. This can prevent global Flagpack Sketch Cloud Library updates from being available in your Sketch Document.