Page MenuHomePhabricator

Covers to differentiate our Figma libraries
Closed, ResolvedPublic

Description

Background/Goal

Currently all our Figma libraries have the same black cover so it's difficult to visually differentiate between libraries. Also, library covers have the same visual style as Figma projects and we should show in each library cover the components that you will find inside.

Captura de pantalla 2022-05-03 a las 10.54.32.png (1×2 px, 973 KB)

User stories

  • As a designer, I need to identify in which library I'm working on.
  • As a designer, I need to easily find the library I want to open in the ❖ Libraries Figma folder

Considerations

We are going to slip our WikimediaUI components library into Codex library and OOUI library so our libraries match with our Codex and OOUI demos (T306874). As we are going to have two components libraries from different code demos, we need the covers of these libraries to be clear enough for the user to understand which library they are using.

Acceptance criteria (or Done)

  • Create covers for the following libraries:
    • OOUI components
    • Codex components
    • Icon System
    • Tokens
    • Illustration library
    • Documentation Assets
  • Align covers with our Brand style (Kieran)
  • Update our libraries with these new covers

Event Timeline

I've created these tho proposals for the library covers:

  • Option 1: using dark covers for all our libraries (OOUI with a lighter gray than the rest, to easily identify it).
  • Option 2: using different colors (chosen from Wikimedia Brand) for each library. I n this proposal, core libraries (OOUI and Codex) use gray tones and the rest of secondary libraries (Icons, Illustrations and Documentation Assets) use more vibrant colors.

Option 1.png (4×1 px, 392 KB)

Option 2.png (4×1 px, 420 KB)

In both proposals I've use the following info items:

  • Title
  • Subtitle
  • Wikimedia logo
  • Right panel with a combination of the components the user will find in each library

@KieranMcCann I assign you the task so you can review both proposals and align them with our Brand styles. Feel free to create your own proposal in a new version tab.

STH changed the task status from Open to In Progress.May 9 2022, 12:27 PM
STH triaged this task as Medium priority.
STH moved this task from Inbox to Up Next on the Design-System-Team board.

@KieranMcCann finally I created this Option 3 since we need also to update the background of each Figma library so the user easily knows which one is using (this is one of the items in our Acceptance criteria in the task to split our Figma library into OOUI and Codex T306874).

In this option 3 I've used the following colors for our core libraries:

  • OOUI library: dark yellow for cover and light yellow for Figma background. The idea with the yellow is to transmit that OOUI is our old system since it will be replaced with Codex in some moment. Also, the yellow is to highlight the background so the designer easily knows that is using OOUI instead of Codex.
  • Codex library: blue cover, our progressive color. We will use this blue to transmit that this is our new system.
  • Icon System: icons will be used in both OOUI and Codex libraries. I used black here since is our base color for icons.

*We will use gray for the Figma background in all libraries except in OOUI one where we will use yellow.

coverslibraries.png (5×2 px, 641 KB)

This looks good to me @bmartinezcalvo! All makes sense in terms of the methodology of the colour choice. I’ve no additional additions or changes to make so all good to go ahead with using the covers.

bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo moved this task from Incoming to Done on the Design board.

Updated all libraries with the new covers from option 3. You can view them here.