Skip to main content

We have components we have created for a container size of 1440 using padding of 48px left and right in that grid used in ecommerce.

However our marketing team needs a smaller container size 1280, where they need a padding left and right of 208


How could we use the same component and place it on 2 different frame container sizes and keep the 2 paddings for both ecommerce and Marketing usage?


Can this be accomplished with variables theming.


Keep in mind we do have already a token used for the padding for ecommerce to be 48px we do not want to add another token for marketing as this will blow up our already very large token set we have created using the design token plugin

Yes, this can be done with variables. Basically you set up 2 modes, 1 for Marketing and eCommerse. Create variables for paddings, widths gaps etc.


Alternatively, just use variants within the component. A little more work, but more control over the look.

Reply


Terms & ConditionsCookie settings