Padding options for "full width" components

[gio-tagli-telefonica]

Goal

To discuss the possibility of updating some components in Mobile library so their contents get properly aligned with Mística grid for md breakpoint range (768 to 1023).

Context

Some components in Mística, such as the Header and the CoverHero, are meant to be used in "full width" within screen frames in Figma, I believe that's why they have a fixed padding of 16px in Mobile library, right?

However, when we try to create screens in Figma that correspond to the md breakpoint range (768 to 1023), the contents within these components do not get aligned with the Tablet (768px) layout guide, because its side margins have a fixed padding of 32px (check image below).

Is it possible to update these components in a way we can properly align their content with the Tablet (768px) layout guide? Maybe we can have a "Padding X" property that we can turn on and off according to each scenario?

Impact

Adding a "Padding X" property would allow designers to properly create screens in Figma for the md breakpoint range without having to manually edit the paddings of some components such as the Header and the CoverHero.

Discussion Questions

• Maybe these types of components should not have padding? That way we don't even need a new "Padding X" property, and designers apply the proper padding in the screen frame in Figma.

Additional considerations

No response

Do you have a visual proposal?

No response

[aweell]

Hi @gio-tagli-telefonica, thanks for opening a discussion.

Having a paddingX property although would solve the padding problem, is not transparent with other anatomy changes that occur in these components when changing screen sizes, an example:

The cover hero component has a property named sideExtra that allows to add a second slot to the component, in mobile, this second slot is stacked vertically with the rest of the content, but in tablet and desktop this slot is placed in the right:

Example: sideExtra property in coverHero

So can't assume that the padding is the only difference between mobile and tablet component display.
Other example could be the carousel component, since in tablet the default items per page doesn't match any:

Example: default itemsPerPage in carousel

Why we didn’t support tablet before in Figma

Historically, to reduce maintenance, we avoided creating tablet variants because usage of tablet devices in products supporting Mística was significantly lower than mobile or desktop.

How can we support this cases

We’ve considered a few options:

• New variable mode (mobile, tablet, desktop)
  • Pros: clear and explicit.
  • Cons: would require creating new component variants to support anatomy changes, and could introduce breaking changes (And the amount of work that this would take)
• New tablet library: I’m listing it here for completeness, but this is definitely not the right solution.
• Add the property (e.g. paddingX): Users needing sideExtra or other tablet-specific behaviors would be instructed to use the desktop component instead. And...change text size...internal components...and so on
• Override padding in the component: Similar issues as above, users would need to know the correct tablet margins and how anatomy changes between version

With this context: do you see another solution we may have overlooked?

[gio-tagli-telefonica]

Hi, @aweell, thanks for the answer and so sorry for the delay in replying.

I was not aware of behaviors that are specific to the tablet breakpoint in some components. It definitely adds complexity.

I believe the best option would be to add a new variable mode (mobile, tablet, desktop). Maybe you don't need new variants, I believe it's possible to control all anatomy changes using only variables. However, I agree that it is a monumental amount of work, and probably it would have to be a new library in Figma. Designers wouldn't be able to simply update the current libraries in their files, they would have to gradually migrate to the new library.

About the 3 other options:

• Creating a new tablet library is not worth it, in my opinion, because there aren't so many components that change behavior in tablet breakpoint.
• Adding the paddingX property, as initially proposed by me, wouldn't completely solve the problem, it would just solve some specific scenarios.
• Overriding the original padding in the component instances is not ideal either, we don't want designers turning this into a habit and doing it for every component.

The only other option I can think of is the following:

1. To list all Mística components that change behavior in tablet breakpoint (md).
2. To go to Mística Mobile library, and for all of them, to create a new variant property called "Tablet" with 2 possible values: "False" and "True".

What do you think of it?