From 870232122b8ed2948bf474de9b645f1d98bd99b3 Mon Sep 17 00:00:00 2001 From: Courtney <9257264+cburton4@users.noreply.github.com> Date: Fri, 2 Aug 2019 14:45:31 -0400 Subject: [PATCH 1/3] Added resources for Figma Added resources and information to make it easier for folks to use Figma as a design tool. --- .../designers/design-resources.md | 53 ++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/docs/designers-developers/designers/design-resources.md b/docs/designers-developers/designers/design-resources.md index a6bad10ef02f9d..aeccfc699ed650 100644 --- a/docs/designers-developers/designers/design-resources.md +++ b/docs/designers-developers/designers/design-resources.md @@ -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. + +### 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. + +### 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. + +## 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) From 5db7c94eb201187309110184545d0522ebed993c Mon Sep 17 00:00:00 2001 From: Courtney <9257264+cburton4@users.noreply.github.com> Date: Tue, 6 Aug 2019 16:27:49 -0400 Subject: [PATCH 2/3] 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. --- .../designers/design-resources.md | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/docs/designers-developers/designers/design-resources.md b/docs/designers-developers/designers/design-resources.md index aeccfc699ed650..587d177f5cacd2 100644 --- a/docs/designers-developers/designers/design-resources.md +++ b/docs/designers-developers/designers/design-resources.md @@ -1,11 +1,9 @@ # Resources ## 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. -[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. - -### 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. +### How to contribute ### Resources for learning how to use Figma [Getting started with Figma](https://help.figma.com/category/9-getting-started) @@ -49,14 +47,5 @@ To join the WordPress.org Figma team, ping in #design on chat.wordpress.org and WordPress components in Figma mirror the live React components. Documentation for how to refine or contribute to WordPress components in React coming soon. -## 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) - -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). - -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. From 7ba17311401ed4554066147887ac7d15b0e118b5 Mon Sep 17 00:00:00 2001 From: Courtney <9257264+cburton4@users.noreply.github.com> Date: Wed, 7 Aug 2019 10:14:57 -0400 Subject: [PATCH 3/3] Update docs/designers-developers/designers/design-resources.md Co-Authored-By: Kjell Reigstad --- docs/designers-developers/designers/design-resources.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/designers-developers/designers/design-resources.md b/docs/designers-developers/designers/design-resources.md index 587d177f5cacd2..6915c7af678939 100644 --- a/docs/designers-developers/designers/design-resources.md +++ b/docs/designers-developers/designers/design-resources.md @@ -45,7 +45,7 @@ The [WordPress Design team](https://make.wordpress.org/design/) uses [Figma](htt **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. +WordPress components in Figma mirror the live React components. Documentation for how to refine or contribute to WordPress components in React is coming soon. If you have questions, please don’t hesitate to ask in the #design channel on the WordPress community Slack.