Ok so I know theres loads of topics on this - but Im not sure I’ve seen one mention components, hence the new convo.
TL;DR - I have a card containing 2 columns. I want the card to have column 1 smaller than the other. So Column 1 would be say, 25% the width of the card and column 2 would be 75%
Now I see a lot of replies about setting fixed widths for column 1, fill for column 2…. about setting constraints etc, but this does not work, especially when working in components. My card component has the variables of 1 or 2 columns, and of course - can be used in various screens, places, layouts and screen sizes. The card works beautifully when the columns are 50/50 scaling to my screen size, but just do not work at all for other width needs. Whats more, when I have my component, there is no way to override the widths of my internal columns unless I detach the component - breaking my whole system, and negating the whole point of components.
Seriously should be / would be a super simple thing to build in figma…. you can do it in html! Take the width of your container (system reads it as 1000px for example) … cool… Whats within it? Well, theres 2 columns, a divider line, and gaps between. The divider is 1px. The gaps are 40. Thats 40 + 40 +1 = 81px. that leaves 919px left. 919 /100 * 25 = 229.75. Round it down to 229. 919 /100 * 75 = 689.25. round it down to 689
Even though im losing a pixel TECHNICALLY there, its SOOO much better than not being able to do it at all. Im sure there could even be some magic in there to add the pixel onto one of the columns to make it 1000px again. Honestly, i cant see why this isnt a thing and is seemingly so difficult to build in! It absolutely is a limitation and a fundamental flaw
Be the first to reply!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
