Skip to main content
Question

Auto layout component with variants and a baseline grid


Robert18

I have this component (list-item), that is going to be in a lot of pages of my application, in different variants, that I’m designing. Now every time i have a component like this, I’m struggling getting all the variants on my 4px baseline grid.

The component looks like this:

And should follow some rules:

  1. All text on 4px baseline grid
  2. min-height of 60px
  3. “Left” is required, “Right” is optional
  4. “Left” and “Right” can hold multiple “Content” elements in horizontal direction
  5. “Content” element can hold multiple text elements in vertical direction
  6. Text elements can go over multiple lines
  7. Most left and right elements can container icons or pills

In the document i made, you can see the problem with every variation:

Figma – 8 Jul 22

It’s always like 1 or 2 pixels off, and not sure how to fix this. Someone got some tips on how i can get everything in my variations on the grid?

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings