Page MenuHomePhabricator

Evaluate sharing our Design System Figma libraries as “Community Figma files”
Open, Stalled, Needs TriagePublic

Description

Background

With Wikimedia Design System as one of the biggest open source projects on design side at the Foundation, it seems to be an opportunity to share the resources out where designers go: the “Figma Community”.

Originally commented by @RHo at Designer Workshop:
In terms of sharing externally, we could consider publishing the master design file with version marker as a Community file on Figma: https://help.figma.com/hc/en-us/articles/360040035974-Publish-Community-files

Comparable resources

Blockers

  1. Clarifying legal questions, specifically around licensing: Would we give up some rights to the Codex Figma resources by sharing them there?
  2. As every publicly shared, and specifically open-sourced resource, it only thrives by responding to comments. If we set out to share this as Wikimedia Foundation, we would need to ensure to have capacities to respond to community.

Open questions

  • Which libraries or Figma files do we want to share with the community?
    • Components library: Codex, OOUI or both? 
    • Assets library (icons, logos and illustrations)
    • Design Tokens library (Figma styles)
    • Component’s exploration file template
  • Do we need a Wikimedia-Design account to share these Figma files with the community as @materialdesign does?
  • Decide how often each library or Figma file will be updated

Event Timeline

It seems useful to have a clearance by Legal before doing this.

I'm just saying, this would be massively useful for creating mockups for non-WMF volunteers. Having to manually create each element is a nightmare and also leads to inaccuracies.

One point to clarify is licensing. Both of the files and of sharing them out via Figma community. It seems that one can decide which license the files are shared (example CC BY 4.0).
FWIW, in the Design Style Guide we currently state about our icon files being CC BY 4.0 as well.

Volker_E changed the task status from Open to Stalled.Feb 22 2023, 3:04 PM

Specifically the second point on being able to respond to community feedback puts this idea on low-priority for me until Codex has matured more and we've satisfied big challenges in request by Wikimedia teams.

bmartinezcalvo renamed this task from Evaluate sharing WikimediaUI components & patterns as “Community Figma file” to Evaluate sharing our Design System Figma libraries as “Community Figma files”.Feb 28 2023, 5:22 PM
bmartinezcalvo updated the task description. (Show Details)

We want to start sharing our Figma libraries with the Figma community and I've posted some open questions to solve in the task description.

Which libraries or Figma files do we want to share with the community?
  • Components library: Codex, OOUI or both? Since Codex is the library (and demo) we are improving, I would share this one with the community. We could share the OOUI library too but it could create confusion and also we should explain that it's not the main library we are improving in the Design System. So I lean towards sharing just the Codex component's library
  • Assets library (icons, logos and illustrations) I agree with sharing this library.
  • Design Tokens library (Figma styles) I agree with sharing this library and explain that these styles are being used within our libraries and design projects.
  • Component’s exploration file template We could share this Figma file since it's the template used in our design contribution guidelines and designers could use it to create new components.

Which other Figma files could we share with the Figma community? @ldelench_wmf @CCiufo-WMF let us know your thoughts on this.

On “Components library: Codex, OOUI or both?” – I would only opt for Codex in order to

  1. not confuse folks with two very similar but in small and important things different library
  2. not to populate OOUI as it's been designated to be deprecated in future
  3. keep the maintenance burden when updating lower

I'd suggest to keep the updates to a 1-2 months cadence, meaning we'd have 6-10 updates per year. Maybe even longer depending on how complex such update is.

On “Components library: Codex, OOUI or both?” – I would only opt for Codex in order to

  1. not confuse folks with two very similar but in small and important things different library
  2. not to populate OOUI as it's been designated to be deprecated in future
  3. keep the maintenance burden when updating lower

Totally agree!

@bmartinezcalvo @Volker_E is there a renewed interest in doing this soon? To further avoid confusion, I think it might be worth timing with T324228, although I don't think it's strictly necessary.

@bmartinezcalvo @Volker_E is there a renewed interest in doing this soon? To further avoid confusion, I think it might be worth timing with T324228, although I don't think it's strictly necessary.

This came from a session with the Design Team some weeks ago where each designer needed to choose one action item to do to engage with the design community. I chose the one to share our Figma libraries as Figma community files (some time ago we started this conversation but our Figma libraries were not enough prepared at that moment).

I think we could share the libraries now and then update them if needed if we do some changes when creating Codex as DS (e.g. name changes in the libraries). Since libraries will need to be updated regularly in the Figma community, this is something we could do.

@bmartinezcalvo @Volker_E is there a renewed interest in doing this soon? To further avoid confusion, I think it might be worth timing with T324228, although I don't think it's strictly necessary.

This came from a session with the Design Team some weeks ago where each designer needed to choose one action item to do to engage with the design community. I chose the one to share our Figma libraries as Figma community files (some time ago we started this conversation but our Figma libraries were not enough prepared at that moment).

FWIW this is not necessarily something that needs to be done with any urgency.

@CCiufo-WMF @bmartinezcalvo Additionally with pairing with Codex as design system activities, I'd also suggest, with all our widening outreach activities, to wait until we have our higher priority inward-oriented house clean. Like basic components implemented, both in Vue and CSS-only. And tokens done.
Community facing activity, here a non-Wikimedia community will only bring profit if we care about community requests. And I don't see lots of over-capacity for us currently to do so. Quite the opposite.

#wikimedia-cloud on 2024-06-10
[20:47]  <    wm-bb> <ederporto> Hello, is there anyone here who works with Codex and can help me integrate it into Figma? I can't find it in the library modal. There is an instruction to join a Slack channel to ask for help, but I was unsuccessful in joining. Thanks :)
[20:50]  <AntiComposite> ederporto: the only way for non-staff to contact the Design folks is by following the instructions at https://www.mediawiki.org/wiki/Design_System_Team/Working_with_us
[20:51]  <AntiComposite> the links in https://www.mediawiki.org/wiki/Design_System_Team/Resources#For_designers and https://www.mediawiki.org/wiki/Design_System_Team/Announcing_Codex_1.0 may or may not be helpful, I don't know.

[21:08]  <    wm-bb> <ederporto> Thank you, but those links are the ones that direct to the Slack channel if someone has questions. I just wanted to draft design in Figma before implementing Codex in a new tool I'm developing (re @wmtelegram_bot: <AntiComposite> the links in https://www.mediawiki.org/wiki/Design_System_Team/Resources#For_designers and https://www.mediawiki...)
#wikimedia-cloud on 2024-06-10
[20:47]  <    wm-bb> <ederporto> Hello, is there anyone here who works with Codex and can help me integrate it into Figma? I can't find it in the library modal. There is an instruction to join a Slack channel to ask for help, but I was unsuccessful in joining. Thanks :)
[20:50]  <AntiComposite> ederporto: the only way for non-staff to contact the Design folks is by following the instructions at https://www.mediawiki.org/wiki/Design_System_Team/Working_with_us
[20:51]  <AntiComposite> the links in https://www.mediawiki.org/wiki/Design_System_Team/Resources#For_designers and https://www.mediawiki.org/wiki/Design_System_Team/Announcing_Codex_1.0 may or may not be helpful, I don't know.

[21:08]  <    wm-bb> <ederporto> Thank you, but those links are the ones that direct to the Slack channel if someone has questions. I just wanted to draft design in Figma before implementing Codex in a new tool I'm developing (re @wmtelegram_bot: <AntiComposite> the links in https://www.mediawiki.org/wiki/Design_System_Team/Resources#For_designers and https://www.mediawiki...)

Afaik the only way for non-design team staff is to copy components from here as appropriate and paste them into your Figma file where they will show up as usable components. Unless you have the premium tier of Figma, you can’t use it as a library without the design team releasing it.

@bd808 @Isochrone as detailed in T332325: Document usage instructions of Codex Figma libraries for external contributors, non-design team staff currently access our Figma library in the following way:

They need to manually export the libraries and import them to their Figma workspace to make them available for reuse there. In WMDE they do the export/import indicating the date in the file's title (sort of as a "latest update"). Components can be replaced using the "swap missing library" functionality.

Steps to follow:

  1. Export the library in your draft
    Captura de pantalla 2024-01-25 a las 11.35.10.png (1×1 px, 289 KB)
  2. Import it from your Figma account
    Captura de pantalla 2024-01-25 a las 11.37.26.png (1×2 px, 279 KB)
  3. Enable it as library in your Figma file
    Captura de pantalla 2024-01-25 a las 11.23.46.png (1×1 px, 167 KB)