The desk is without doubt one of the most painful elements designers must take care of of their day by day design lives. The desk ingredient is commonly a posh mixture of textual content elements, traces, rectangles, icons, and extra. It quickly might grow to be a nightmare to work with, particularly in case you additionally wish to assist totally different display resolutions, change the order of columns, and use real-life content material.
In my tasks, roughly half of the consumer interface designs I’m engaged on are tables. This is the reason on this article, I’d prefer to share my strategy to managing tables in Figma in a neater, extra streamlined means.
I’m not a fan of lengthy reads with too many pointless particulars, so I’ll “bounce” into the topic instantly. My information consists of a number of elements; thus, you possibly can cease studying at any level if you perceive that what you’ve got discovered up to now covers your wants in the meanwhile, and you may return/or bounce ahead to any part if you wish to refresh your reminiscence or be taught concerning the extra advanced workflows. Let’s go!
Desk of Contents
Cells and Desk Construction
Actual Information and Column Dimension Corrections
Responsive Tables
Primary Desk Package and States
Figma Design file
Conclusion
Observe: This text is geared toward individuals with some expertise utilizing Figma Design. In case you are an absolute newbie within the Figma subject, I’d counsel first checking some fundamental Figma tutorials. To make issues simpler for you, close to the tip of the article (verify Figma Design File part), I’ve offered my Figma Design which you should use for deconstruction and studying functions.
Cells And Desk Construction
I typically use the Ant Design System in my tasks. Let’s take their desk elements for instance.
To begin, we have to make solely two easy elements in Figma:
a head cell,
a row cell.
Use Left and Heart in Constraints to align the textual content.
Apart on keyboard shortcuts:
Ctrl/Cmd — Win/Mac
Alt/Possibility — Win/Mac
Shift — Win and Mac
Figma is a software that works on each Home windows and Mac. For instance, the next keyboard shortcut combo Ctrl/Cmd + D means, “Press Ctrl + D on Home windows, or press Cmd + D on Mac.”
Then we have to copy the elements for our future desk:
maintain Alt/Possibility + Shift + left mouse button for copying
and Ctrl/Cmd + D to repeat the final motion in Figma.
The right way to create the desk traces? Begin right here:
press and maintain Alt/Possibility + Shift + mouse left for copying,
and Ctrl/Cmd+ D to repeat the final motion in Figma.
How did I do it? Listed below are the steps:
group the desk row parts right into a single body;
set corners’ radius to fifteen px;
set define stroke to 1 px, #49E36B;
set body fill colour to #278EEE.
That can assist you higher think about the way it works, here’s a fast illustration that I made:
The body is for coloring the desk traces between the rows and the desk stroke (the skin desk border). And you will have so as to add “crop body content material” and “nook radius” to form the desk.
In case you add “Auto format,” it might work like this:
Because of this, you’ll get this habits. Maintain Shift and double-click to spotlight it, then resize the column.
For fixed-size cells, we apply Fastened horizontally:
For the responsive cells, we have to set Fill horizontally:
Then we flip this desk right into a Body, and each row contained in the Body ought to have horizontal Constraints set as Left and proper:
Voilà, we’re absolutely responsive now!
The package construction:
icons we use within the desk,
fundamental header states,
fundamental cell states.
Icons
Utilizing any icon library, you possibly can have a couple of hundred icons. Because of this, this could push you to inconsistency (utilizing totally different icons for a similar objectives, for instance), particularly if in case you have multiple designer in your staff. Desk icons as a separate library will enable you handle and assist consistency on huge tasks.
Combos
There are a couple of predominant mixtures we’ve:
simply textual content in a cell,
simply an icon or a set of icons in a cell,
a wide range of textual content, icons, and different objects (checkbox, toggle, motion, choose, and so forth) in a special order inside a cell.
Keep away from hidden layers! You’ll know that you simply used them whereas constructing a design system, and you’ll definitely neglect about them later. As well as, individuals who will use your design system might not find out about these hidden layers in any respect.
You’ll have an concept of tips on how to create them primarily based on the illustration above (Constructing a fundamental desk package), however I’ll specify a couple of extra advanced elements for newbie designers.
And we use Auto format with the next parameters within the second part instance:
So, keep in mind the desk that we constructed utilizing solely two elements? It’s time to replace it!
Additionally, you should use “Figma Properties” to make it compact. All of the directions you could find within the following tutorial video created by the Figma staff throughout Figma Config 2022: “Leaping into part properties.”
It’s just one instance of how I structured the fundamental desk package on this article. You should utilize an analogous workflow or create your personal. In my tasks, kits are rather more advanced, so I’ll go away this option to you.
Figma Design File
I’ve ready a Figma Design file which will enable you undergo among the steps of my tutorial. When you’ve got questions or need assistance, do put up your questions within the feedback part on the finish of the article.
Conclusion
The way in which I’m working with tables in Figma will not be as black and white. The strategy primarily relies on the product you’re designing and, in fact, there are a couple of doable methods you can obtain the identical objectives.
Listed below are a couple of normal suggestions I could make from my very own observe:
Maintaining the road elements on the design system facet offers an opportunity to replace tables for the entire venture from one place. However each time you wish to make an replace, you will have to publish adjustments on the design system-level.
In case you preserve duties in several paperwork, don’t neglect to disconnect that file from the design system. This is able to assist keep away from uncontrolled updates that you’ll miss.
At first, utilizing resizable elements appears too tempting… till it’s good to start supporting totally different kinds in each dimension. When you’ve got tables with various line heights, it’s higher to create particular person elements for every one in every of them.
There may be an strategy that consists of utilizing as few elements as doable. However more often than not, you don’t take a look at your elements — as a substitute, you utilize “variants” to change between them. So, it’s higher to have sufficient separate elements and, consequently, “variants” than to make use of hidden layers, the “Auto format” choice, and elements inside different elements that will be arduous to handle in a while.
Verify that each one desk cells assist no less than two traces of textual content. You should utilize 16 px line spacing to make it occur.
I like to recommend utilizing the minimal width for father or mother elements (minimal width for every column). However these default minimal sizes must be mentioned with the front-end builders as they might typically have their very own limitations. Subsequently it’s good to make sure that the whole lot within the design could be applied within the later improvement levels.
Create a colour palette in your Design System for the tables, so you’ll have the ability to management all the colours from one place. In fact, you should use shared colours from the palette, however as soon as it’s good to change textual content colour within the tables, background, or one thing else, you’ll get into bother.
Create totally different textual content kinds for the tables. For instance, we use smaller line spacing in tables than in information feeds or articles. Having separate textual content settings would enable you keep away from future conflicts.
Thanks for following me alongside! As I already mentioned, tables are a posh part, and I can discuss this matter for days. However perhaps higher to cease right here and provide you with an opportunity to do that strategy for your self. Then, if in case you have questions, I’d be completely satisfied to answer and assist! Or I may write one other article: “Working With Tables in Figma: The Professional Degree.” 😉
Additional Studying
I’ve collected a couple of hyperlinks to assets (tutorials, plugins, discussions, and many others.) associated to working with tables in Figma:
“Creating Tables In Figma,” Sasha Belichenko
A information about one doable means of working with tables in Figma: tips on how to create a desk utilizing elements and Atomic Design methodology, after which tips on how to combine the desk into your design system.
“Create a Figma Prototype with Information from Google Sheets,” Bryan Elkus
The article covers intimately a plugin for Figma referred to as Google Sheets Sync. It permits a consumer to drag in content material instantly from Google Sheets which is super-useful if you wish to use this to populate your designs with extra sensible information.
“Creating Tables in Figma with Auto Format”, Gavin McFarland
On this tutorial, Gavin explains tips on how to modify tables in Figma that are utterly fluid (with the Auto Format function). You possibly can examine the elements in Figma Design to see how they had been created.
Tweets
I spend my entire Figma life designing tables. I think about different designers too. @figma are you able to please give us extra options, like draggable horizontal rows AND vertical columns? Transferring information round ought to be tremendous straightforward, like Google Sheets.
— Joshua Sortino (@sortino) April 11, 2022
I’ve a love/hate relationship with tables, so here is how I arrange my design system to make issues simpler. Rows vs. columns, cell variants, and a “module” part with a variable toolbar and variable pagination.https://t.co/0MbCROJAmp pic.twitter.com/xztjdwoVeL
— Jon Moore (@TheJMoore) April 12, 2022
We hear tables in @figma are arduous, and we agree.
This is how we leveraged our inside design instruments to create a extra seamless workflow for designers throughout the @DesigningUber staff ➡️ pic.twitter.com/R8PwiYdebK
— Vincent van der Meulen (@vincentmvdm) April 11, 2022
A brief Twitter thread on this matter, additionally mentioning the Configurator plugin that Vincent’s staff made.
I discovered a fairly dependable method to create versatile, responsive customized tables in Figma. I’ll do a video walkthrough sooner or later, however if you wish to play… https://t.co/cibZI3Uk4g
— Buzz Usborne (@buzzusborne) April 6, 2022
Did I make a full video about constructing tables in Figma? Sure. Do I remorse taking place this rabbit gap? Additionally sure. 📺🕳️ https://t.co/JCyLxEBktG
— Buzz Usborne (@buzzusborne) April 13, 2022
Ideas time!
Utilizing part props, we will create “infinite tables”
So we will toggle on nevertheless many columns / rows we’d like in designs
This prevents us sustaining massive variant units for each permutation of desk 🍽
Group file to play with: https://t.co/WqNM5SMjSE pic.twitter.com/yhefqrNImC
— luis. (@disco_lu) Could 30, 2022
Observe: This system is attention-grabbing if in case you have just some tables within the product design. In any other case it might be an issue to scale the system.
As you possibly can see, coping with tables is a “scorching matter” 🔥 within the Figma design neighborhood! I hope that you can discover one thing helpful right here, too.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!