Page MenuHomePhabricator
Create Task
Maniphest T343680

Figma upgrades: include size & spacing variables and the new auto layout in the Codex library
Closed, ResolvedPublic
Actions

Description

Background

During the Figma Config 2023 they present the different upgrades they created in Figma, and some of them affect directly our Figma libraries. One of these Figma upgrades is the auto layout since now it’s possible to:

  1. Add min and max width to the components:
    Captura de pantalla 2023-08-07 a las 10.24.45.png (858×1 px, 477 KB)
  2. Apply wrapping to the frames so the elements within the frame wrap into the next line when necessary:
    Captura de pantalla 2023-10-20 a las 17.51.44.png (708×1 px, 69 KB)

We will need to apply this in the existing components in Figma to match the code demo.

User stories

  • As a designer, I need components to be the same min-max width as in the demo so I can reuse them with the same size.

Open questions

  • Is it worth applying min-max width to OOUI components library? Or do we want to apply min-max width just to Codex components one? We will focus now in the Codex library and we will apply this in the OOUI library just in case we need it in the future T354356: OOUI library: apply the new Figma upgrades

Acceptance criteria (or Done)

  • Update the components in the Codex library:
    • Spacing: include the padding in the auto layout section in all the components
    • Size: include the min and max width in all the needed components to match the code demo
    • Apply the auto layout wrapping in the components that require more than one line
Future tasks

Related Objects
Search...

Event Timeline

bmartinezcalvo created this task.Aug 7 2023, 8:25 AM
bmartinezcalvo mentioned this in T343247: Update our Figma libraries to match the last Figma upgrades.Aug 7 2023, 8:30 AM
bmartinezcalvo renamed this task from Figma upgrades: apply the new auto layout constraints to make the components min-max size to Figma upgrades: apply the new auto layout constraints (min-max width).Aug 7 2023, 8:33 AM
bmartinezcalvo triaged this task as Low priority.
bmartinezcalvo moved this task from Inbox to Design Upcoming on the Design-System-Team board.
bmartinezcalvo updated the task description. (Show Details)Aug 7 2023, 8:37 AM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)Oct 20 2023, 3:56 PM
bmartinezcalvo renamed this task from Figma upgrades: apply the new auto layout constraints (min-max width) to Figma upgrades: apply the new auto layout constraints.Oct 30 2023, 11:34 AM
bmartinezcalvo moved this task from Design Upcoming to 2024 Quiet Week on the Design-System-Team board.Dec 19 2023, 2:21 PM
bmartinezcalvo mentioned this in T343678: Figma upgrades: create Figma variables and apply them in the libraries.Dec 21 2023, 7:46 PM
bmartinezcalvo changed the task status from Open to In Progress.Jan 3 2024, 2:49 PM
bmartinezcalvo claimed this task.
Sarai-WMDE awarded a token.Jan 4 2024, 10:06 AM
Sarai-WMDE added a comment.Jan 4 2024, 10:14 AM

My take on the open question:

Is it worth applying min-max width to OOUI components library? Or do we want to apply min-max width just to Codex components one?

I'm unsure of the scope/effort required to perform this update in general. But if the goal is to bring the behavior of design components closer to the code, in order to satisfy the user story, then I'd say that the requirement applies to both design libraries, OOUI and Codex.

RHo added a comment.Jan 4 2024, 10:44 AM
In T343680#9434554, @Sarai-WMDE wrote:

My take on the open question:

Is it worth applying min-max width to OOUI components library? Or do we want to apply min-max width just to Codex components one?

I'm unsure of the scope/effort required to perform this update in general. But if the goal is to bring the behavior of design components closer to the code, in order to satisfy the user story, then I'd say that the requirement applies to both design libraries, OOUI and Codex.

Clarification question on the user story: matching the code refers to Codex here and not Figma app behaviour, right?

As to updating for OOUI I don't think it is a priority for DST to expend effort and suggest it could be split to a separate low prio task that potentially a designer still using OOUI components can take on.

bmartinezcalvo added a comment.Jan 4 2024, 2:22 PM
In T343680#9434582, @RHo wrote:

As to updating for OOUI I don't think it is a priority for DST to expend effort and suggest it could be split to a separate low prio task that potentially a designer still using OOUI components can take on.

I agree, I would not expend time on applying the min and max width in OOUI. We already replaced all Figma styles with the new Figma variables in both Codex and OOUI libraries in T343678: Figma upgrades: create Figma variables and apply them in the libraries since the Figma styles have been removed from the library (now we will use just variables). But for new variables that were not Figma styles before, I would not apply them in the OOUI library since the DST focus is Codex and its library.

I'm going to solve this open question from this task and create a new task for the OOUI library in case we need to work on it in the future.

bmartinezcalvo renamed this task from Figma upgrades: apply the new auto layout constraints to Figma upgrades: include min and max width and apply the new auto layout constraints.Jan 4 2024, 2:23 PM
bmartinezcalvo updated the task description. (Show Details)Jan 4 2024, 2:29 PM
bmartinezcalvo updated the task description. (Show Details)Jan 4 2024, 2:43 PM
bmartinezcalvo renamed this task from Figma upgrades: include min and max width and apply the new auto layout constraints to Figma upgrades: include size variables and the new auto layout constraints in the Codex library.Jan 4 2024, 2:46 PM
bmartinezcalvo renamed this task from Figma upgrades: include size variables and the new auto layout constraints in the Codex library to Figma upgrades: include size & spacing variables and the new auto layout in the Codex library.Jan 4 2024, 2:49 PM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)Jan 4 2024, 7:33 PM
bmartinezcalvo closed this task as Resolved.Jan 4 2024, 7:37 PM

I've updated the Codex library with the following:

  • Included the min-max width and height in the components listed in this changelog to match them with the Codex site.
  • Included auto layout wrapping in those components where possible.

In case we want to add these changes in the OOUI library, we can work it in this separate task T354356.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits