Added resources for Figma

docs/designers-developers/designers/design-resources.md

@@ -1,11 +1,51 @@
 # Resources
 
-The [SketchPress](https://github.com/10up/SketchPress) project includes a library of Gutenberg design components helpful for designing and prototyping:
+## Figma
+The [WordPress Design team](https://make.wordpress.org/design/) uses [Figma](https://www.figma.com/) to collaborate and share work. If you'd like to contribute, join the [#design channel](https://app.slack.com/client/T024MFP4J/C024MFP4Q) in [Slack](https://make.wordpress.org/chat/) and ask the team to set you up with a free Figma account. This will give you access to a helpful library of components used in WordPress. They are stable, fully supported, up to date, and ready for use in designs and prototypes. 
 
-[Download Sketch mockups & patterns files](https://github.com/10up/SketchPress)
+### How to contribute
 
-These components are built to be used in [Sketch](https://www.sketchapp.com) for Mac. Users on other platforms may have luck importing the file to [Figma](https://www.figma.com) (Mac/Windows/Linux) or [Lunacy](https://icons8.com/lunacy) (Windows).
+### Resources for learning how to use Figma
+[Getting started with Figma](https://help.figma.com/category/9-getting-started)
+
+[Top Online Tutorials to Learn Figma for UI/UX Design](https://medium.com/quick-design/top-online-tutorials-to-learn-figma-for-ui-ux-design-4e9c6721a72d)
+
+[Take a Tour Around Figma](https://help.figma.com/article/12-getting-familiar-with-figma)
+
+### Learning how to use files and projects
+[Getting started with Figma files and projects](https://help.figma.com/article/298-getting-started-with-files-and-projects)
+
+[What are files?](https://help.figma.com/article/298-getting-started-with-files-and-projects#files)
+
+[What are projects?](https://help.figma.com/article/298-getting-started-with-files-and-projects#projects)
+
+[Video tutorial](https://www.youtube.com/watch?v=c5HS6smhq2E)
+
+[FAQ](https://help.figma.com/article/298-getting-started-with-files-and-projects#faq)
+
+### Learning how to use components
+[Getting started with components](https://help.figma.com/article/66-components)
+
+[What are components?](https://help.figma.com/article/66-components#components)
+
+[Video tutorial](https://help.figma.com/article/66-components#videos)
+
+### Learning how to use WordPress Figma libraries
+**How to turn on the WordPress Components library in Figma**
+
+![How to turn on Figma libraries gif](https://wordpress.org/gutenberg/files/2019/08/figma-howtoturnonlibraries.gif)
+
+1. Click the **Team Library** icon in the **Assets** Panel: 
+
+![Hovering over the team library icon](https://wordpress.org/gutenberg/files/2019/08/figma-turn-on-libraries-e1564770916643.png)
+
+2. The **Library** modal will open and allow you to view a list of available libraries. Toggle to _Enable_ or _Disable_ a specific library:
+
+![Switching on the WordPress components libray in Figma](https://wordpress.org/gutenberg/files/2019/08/figma-libraries-e1564770879415.png)
+
+**How to refine or contribute to the WordPress components React library _(Coming soon)_**
+
+WordPress components in Figma mirror the live React components. Documentation for how to refine or contribute to WordPress components in React coming soon.
 
-Please note that these are mockups, so they may not be 1:1 accurate. It is also possible that the Sketch files aren’t up to date with the latest version of Gutenberg itself, as development sometimes moves faster than the Sketch updates.
 
 If you have questions, please don’t hesitate to ask in the #design channel on the WordPress community Slack.