Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added resources for Figma #16892

Merged
merged 3 commits into from
Aug 7, 2019
Merged

Added resources for Figma #16892

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8702321
Added resources for Figma
cburton4 Aug 2, 2019
5db7c94
Removed content and copy updates
cburton4 Aug 6, 2019
7ba1731
Update docs/designers-developers/designers/design-resources.md
cburton4 Aug 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion docs/designers-developers/designers/design-resources.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,57 @@
# Resources

The [SketchPress](https://github.com/10up/SketchPress) project includes a library of Gutenberg design components helpful for designing and prototyping:
## Figma

[Figma](https://www.figma.com/) includes a library of [Gutenberg UI components](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=491%3A3280) found in the `@wordpress/components` npm package, or “WordPress Components”. They are stable, fully supported, up to date, and ready for use in designs and prototypes. `@wordpress/components` is an npm package that is published via the Gutenberg repo.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are stable, fully supported, up to date, and ready for use in designs and prototypes.

I can't even begin to explain how happy this line makes me. 🙌


### How to get access
To join the WordPress.org Figma team, ping in #design on chat.wordpress.org and let us know whether you need view-only or edit access. A Figma admin will contact you for your email address to set up your account.
kjellr marked this conversation as resolved.
Show resolved Hide resolved

### 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.
cburton4 marked this conversation as resolved.
Show resolved Hide resolved

## Sketch

If you prefer to use [Sketch](https://www.sketch.com/), the [SketchPress](https://github.com/10up/SketchPress) project includes a library of Gutenberg design components helpful for designing and prototyping:

[Download Sketch mockups & patterns files](https://github.com/10up/SketchPress)
kjellr marked this conversation as resolved.
Show resolved Hide resolved

Expand Down