gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard
verified publisher icon WordPress

Ship the new Figma library so designers can use the improved components in their Figma designs.

Open cli-automattic opened this issue 1 year ago • 4 comments

  • [x] Decide on how we sync Figma libraries across organisations
  • [x] Remove any big experimental features (dark mode).
  • [x] Remove any WIP components.
  • [x] Add a ‘How to contribute’ section.
  • [ ] Finish/Polish the foundation pages.
  • [ ] Ensure component props match code.
  • [ ] Ensure complete component coverage (we have a few gaps per the audit).
  • [ ] Add editor patterns (Header, ToolsPanel, ListView, Inspector, Inserter)
  • [ ] Add all component descriptions and links.
  • [ ] Communicate and ship to designers

cli-automattic avatar Oct 09 '24 09:10 cli-automattic

I've begun moving experimental / WIP components out of the library and into a new Figma file: https://www.figma.com/design/8quMtHZzv7tC5UoVU4xBCx/Experimental-components?node-id=2-844&t=JrnV31Gv8tT8ICJA-1

jameskoster avatar Oct 10 '24 10:10 jameskoster

Decide on how we sync Figma libraries across organisations

Sharing the proposed process to gather feedback:

  1. The source/working file for the library continues to live in the WP community Figma organisation, but is no longer published as a library.
  2. With regular cadence (potentially aligned with Gutenberg releases) maintainers of the library (members of the Design team) publish the working file to the Figma Community and announce in the community #Design Slack channel.
  3. Each new version is duplicated to the _Libraries project in the WP community Figma, and published. This is also announced in Slack. The new version should be included as a default for new files.
  4. Designers working in the WP community Figma can swap to the latest version using Figma Library Swapping.

Steps three and four can be replicated by any third party so they can use the library in their own Figma organisations.

jameskoster avatar Oct 11 '24 08:10 jameskoster

I quite like that suggested process, as it implicitly includes versioning in the library. The goal of the library, ultimately, is to build out mockups. Those mockups serve a purpose here on GitHub. So while you can choose to update an older mockup to a newer library, with a single published version as we'e had in the past, things would often break in that mockup, with no clear benefit. Whereas with a versioning system, where you deliberately choose to target a newer version, you choose to do that deliberately because the mockup is still being worked on. Not just because you press the "Update components" button in the corner of and old file, just to make the snackbar go away.

jasmussen avatar Oct 11 '24 08:10 jasmussen

Here's a list of missing components and patterns I'd like to prioritise adding to the Library in Figma before shipping the 'v1'.

  • [x] DropdownMenu V2
  • [x] Modal
  • [x] ToggleGroupControl
  • [x] Notice
  • [x] Popover
  • [x] ItemGroup
  • [x] Editor Pattern: Header
  • [x] Editor Pattern: ListView
  • [x] Editor Pattern: Inspector
  • [x] Editor Pattern: Inserter

The are others, listed below, but these feel less important.

  • FormTokenField
  • TimePicker
  • FormFileUpload
  • BorderBoxControl
  • DropZone
  • SnackbarList
  • PaletteEdit
  • BorderControl
  • CustomGradientPicker
  • FocalPointPicker
  • FontSizePicker
  • GradientPicker
  • ResizableBox

Obviously these lists can change, and I'd welcome any thoughts.

jameskoster avatar Oct 18 '24 17:10 jameskoster

This is complete: https://www.figma.com/community/file/1436359662053949167/wordpress-design-system 🎊

jameskoster avatar Nov 25 '24 09:11 jameskoster