Skip to content

Commit

Permalink
Added resources for Figma (#16892)
Browse files Browse the repository at this point in the history
* Added resources for Figma

Added resources and information to make it easier for folks to use Figma as a design tool.

* Removed content and copy updates

Removed the section that references Sketch resources as they are out of date. I also used phrasing from other documentation to make updates to the copy.

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

Co-Authored-By: Kjell Reigstad <kjell.reigstad@automattic.com>
  • Loading branch information
2 people authored and gziolo committed Aug 29, 2019
1 parent 86a5d17 commit ea634e2
Showing 1 changed file with 44 additions and 4 deletions.
48 changes: 44 additions & 4 deletions docs/designers-developers/designers/design-resources.md
Original file line number Diff line number Diff line change
@@ -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 is 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.

0 comments on commit ea634e2

Please sign in to comment.