Add Figma Contribution Guide (#530)

* Add Figma Contribution Guide

* Remove mistake from Figma tips

CONTRIBUTING.md

@@ -41,6 +41,10 @@ Here you can find templates and instructions on how to implement the guidelines
 `Template`: None
 `Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
 
+#### Figma
+`Template`: None
+`Instructions`: You can find the [Figma Guide](/docs/FIGMA_GUIDE.md) and how to set up Figma under `/docs/FIGMA_GUIDE.md`.
+
 #### Submitting Mulitple Icons
 
 If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.

docs/FIGMA_GUIDE.md

@@ -4,4 +4,41 @@ title: Figma Template Guide
 
 # Figma Template Guide
 
-Please help us write this guide.
+This guide shows the steps to setup Figma for creating icons that conform to the Featherity design guidelines.
+
+## Setting Up The Frame
+When you create a new document in Figma, the document. Each individual icon you want to create, has to be created in a separate frame.
+
+To do this, create a frame of 24x24 pixels.
+
+1. Click the frame button (or press `F`)
+2. Draw a 24x24 frame (or edit it afterwards from the design window)
+
+In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as `FRAME-NAME.svg`.
+
+## Create your icon
+To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma.
+
+Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut `P`. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right.
+
+Set the following:
+1. Vector
+   1. Corner radius: 2px
+2. Stroke
+   1. Stroke width: 2px
+   2. Stroke alignment: center 
+
+![Figma Stroke Options](images/figma-stroke-options.png)
+
+## Export Your Icon
+Once you have completed your icon, you can export it.
+
+1. Select the frame
+2. Open the *Export* tab on the right
+3. Set the file type as SVG
+4. Press export
+   
+That's it. You just made your first icon. Congratulations!
+
+## Figma Tips
+1. The [Icon Design Guidelines](ICON_DESIGN_GUIDE.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).