Flagpack for Figma

Flagpack for Figma allows you to use flags within your Figma design files. By using Figma's powerful Team Libraries 250+ flags become available as Components that can be individually or collectively altered in style in just a few minutes. All individual flag icons are also available as scalable SVGs.

Quick start

Want to get started with Flagpack in Figma right away? Duplicate the Figma Community File.

Flagpack Figma Community file

Duplicate the Flagpack Figma Community file for a quick start.

Get the stickersheet

Getting started

1. Duplicating the Flagpack Figma Community file

To duplicate the Flagpack Figma Community file go to the Flagpack Figma Community file and choose Duplicate
Once you've duplicated the Figma Community file it will become a standalone Figma file. This means that you'll have to duplicate the Community file again whenever you want to get the version with the latest updates. Learn more about Figma Community files on the official Figma Help pages on Duplicating files from the Community. Don't forget to ♥ like the Flagpack Figma Community file to show your support.

2. Using the flags in your designs

Either copy paste the individual flag you need from the Figma Community file onto any other Figma file or use the Figma Community file as a Library (recommended).
Method A: Copy-pasting invidivual flags
To copy flag Components from the Figma Community File go to the "main flag component" page and select the flag in the playground. You can customise any of the styling via the properties in the inspector panel.
If you want to change the flag, open the Component in the layers panel and select the default "NL - Netherlands" layer. Change the flag by swapping the instance in the inspector panel. Copy the flag component by selecting it and pressing ⌘ + C on macOS or Ctrl + C on Windows. Paste it into another file by pressing ⌘ + V on macOS on macOS or Ctrl + V on Windows.
It is recommended to apply the preferred styling that ships with the Figma Community file to the flag Components before copy-pasting the flag Components to another Figma file. This is because only the styles that are applied to the flag Component at the moment you copy-paste them into another file will be available.
Method B: Using the Figma Community file as a Team Library (recommended)
To use the Figma Community file as a Team Library and insert Components from this Team Library into other Figma files you will need to publish it as a Team Library. To publish the Figma Community file as a Team Library, Open the Flagpack Figma Community file and go to the Assets panel on the left or press ⎇ + ⌘ + O on MacOS or Ctrl + Alt + O on Windows. The Stickersheet will be lister under Current file. Now choose Publish next to the Stickersheet.
After that open the Figma file you want to insert the flag Components into, go to Assets panel on the left and click on the library (book) icon. Alternatively press ⎇ + 3 on MacOS or Ctrl + 3 on Windows. Look up the Flagpack file you've just duplicated in the list under the Team you published them to. Now toggle the slider on for this file.
Note that publishing Components is only available on some Figma plans. Learn more about Team Libraries and permissions per plan on the official Figma Help pages.
Inserting the flag Component from the Flagpack Team Library
In your design file you want to insert the flag Components to, go to Assets panel on the left or press ⎇ + 2 on MacOS or Ctrl + 2 on Windows.
Now drag-and-drop the Component named flag that shows within this Assets panel onto your design (canvas).

Changing the flag's appearance

As the flag Component is a Variant there is just one main flag Component that allows toggling between all appearance related properties like size, shape and gradient overlay. To make edits to a single flag Component instance, make sure you select the Component first in your Layer Panel.
To learn more about Variants we suggest visiting the official Figma website.
To change the overlay effect select the Overlay layer inside one or more flag Components (use the Similayer plugin to select multiple Overlay layers at once) and click on the currently selected Color Style in the Properties Panel. Now either detach the style and create your own overlay style or choose another overlay style from the Stickersheet Team Library.
Size
To set the flag Component to either one of the predefined sizes (S, M or L) right-mouse click on the size dropdown in the Properties Panel and select the size you want the flag Component to appear in.
Drop shadow
To turn the drop shadow effect on or off use the hasDropshadow property toggle in the Properties Panel.
Border
To turn the border/stroke on or off use the hasBorder property toggle in the Properties Panel.
Border radius
To turn on or off the predefined border radius use the hasBorderRadius toggle in the Properties Panel.
Gradient
To switch gradient overlay type, or turn it off entirely, right-mouse click on the gradient dropdown in the Properties Panel and select on of the options.
Changing the actual flag
You can also change the country flag that is displayed per flag Component instance. To do so look up the flag Component instance in the Layer Panel and expand it to reveal the flag Component's two sub Layers.
Now select the bottom most of these two sub layers. This layer is a nested Component and its name consists of a ISO alpha code followed by a dash and the name of the country. Eg. NL - Netherlands.
With this nested Component layer selected, right-mouse click on the Component dropdown in the Properties Panel. To change the actual flag to another country's flag either search for it by typing the name or scroll through the list and select it.