miliri.blogg.se - Figma responsive resize

#FIGMA RESPONSIVE RESIZE HOW TO#
#FIGMA RESPONSIVE RESIZE UPDATE#

If you do not have alternating backgrounds, you just need one cell.

Insert two instances of the body cell and change the background colour of the second to the alternate style.

Insert an instance of the header cell component onto the canvas.

I like to organise data tables into columns, because I need to change the column width (or the table width) way more often than the row height.įinally, here is where the fun with auto layout actually starts: Why do I work with columns instead of creating rows? The answer is: it depends. This approach might be appropriate if you expect that the states in your design have multiple differences beyond just the background colour or you want to be quite restrictive in your design system. More importantly, it becomes cumbersome to switch the states across different columns. The downside is that you end up with more components.

#FIGMA RESPONSIVE RESIZE UPDATE#

The pro is that you don’t use overrides and once you update the library file all instances get updated. The second approach is to create a component for each state and possibly even for each cell type, even if they are similar (e.g. This is not really a problem, though, as long as you use text and colour styles. The downside is that you use overrides a lot. This way you have less components to worry about and it is more efficient to make changes in the table. The advantage of this approach is that you can quickly select all cells that you want to change (using Shift+Cmd+Click) and just change the style for all elements at once.

The first approach is to manage states using colour and text styles, which minimizes creating multiple components for each state.

#FIGMA RESPONSIVE RESIZE HOW TO#

There are a few different approaches on how to deal with states. Finally, turn the “Borders” frame into a master component, so that we can reuse it in the table cells, which we are going to create in the step 2.Īnatomy and constraints for the header cell component.Now you can resize the “Borders” frame in any way you like and the length of each border will resize correctly. Within the new frame, select each border and set the constraints as shown in the picture below.Align the borders so that they form a rectangle, select all of them and create a frame from the selection.Name them “Border Left” and “Border Right”. For the left and right border create two rectangles with a width of 1px and a height of 40px.Name them “Border Top” and “Border Bottom”. For the top and bottom borders, create two rectangles, each 192px wide and 1px high.Data tables in my product currently have borders, but I will have to remove them when we migrate to the new design. This makes sense even if you don’t need borders at the moment, but you might in the future. Step 1: Create the Border Componentįirst, we are going to create a component for the cell borders. I came pretty close, but it’s not quite there yet.įor now, I find it easier and more flexible to use regular on the cell level and use auto layout to assemble the table. By that I mean that when I edit the text of one cell, the other cells in the same column should automatically resize as well. The reason is that, at the time of writing this article, I am not aware of a technique in Figma which would allow me to use auto layout to create fully “content responsive” tables. You’ll see in a minute, how this approach comes in handy when working with tables.Īs much as I like auto layout, we are not going to use it to create the cell components. That’s why I like to use styles to reduce the amount of components in my design system. The important part for me is to find the sweet spot where my components are robust enough so that I can focus on the content, while at the same time not being overly complex up to a point where they become practically unusable for daily use (because of too many layers of hierarchy and nesting). There are many different approaches to work with and structure components in Figma. Use Styles to Reduce the Number of Components Sooner or later, you will lose track of the overrides and inconsistencies in the design will inadvertently sneak in. The more overrides you use, the more time you will need to update them individually if the design changes. Use Overrides as Little as Possibleįrom my experience in working in Figma it’s always preferable to swap components and styles, rather than overriding things across instances throughout your file. Data tables are an advanced topic, so I will go over some initial considerations rather quickly. I will assume that you already have some basic familiarity with Figma and know how to work with components and styles.