Andrii is a UX designer with over 14 years of experience in the field. He started as a UX designer in an e-commerce agency and later became a product designer More aboutAndrii

Real Data And Column Size Corrections

The table is one of the most painful components designers have to deal with in their daily design lives. The table element is often a complex combination of text components lines rectangles icons and more. It soon may become a nightmare to work with especially if you also want to support different screen resolutions change the order of columns and use real-life content.

Website Development Company In Ludhiana

In my projects approximately half of the user interface designs I am working on are tables. This is why in this article Id like to share my approach to managing tables in Figma in an easier more streamlined way.

Im not a fan of long reads with too many unnecessary details so Ill jump into the subject right away. My guide consists of several parts thus you can stop reading at any point when you understand that what you have learned so far covers your needs at the moment and you can go back/or jump forward to any section when you want to refresh your memory or learn about the more complex workflows. Lets go

Note This article is aimed at people with some experience using Figma Design. If you are an absolute beginner in the Figma field I would suggest first checking some basic Figma tutorials. To make things easier for you near the end of the article check Figma Design File section I have provided my Figma Design which you can use for deconstruction and learning purposes.

personal-design

I often use the Ant Design System in my projects. Lets take their table components as an example.

Now we have to set the space between the cells and create the components Alt/Option Ctrl/Cmd K.

Useful tip I have used zero spacing in the example below but if you need vertical lines use 1 px.

Web Development Software

Useful tip I recommend naming the components on every level. Organise everything early organise everything thoroughly

The frame is for coloring the table lines between the rows and the table stroke the outside table border. And you will need to add crop frame content and corner radius to shape the table.

Meet Touch Design for Mobile Interfaces Steven Hoobers brand-new guide on designing for mobile with proven universal human-centric guidelines. 400 pages jam-packed with in-depth user research and best practices.

As a result you would get this behavior. Hold Shift and double-click to highlight it then resize the column.

Then we turn this table into a Frame and every row inside the Frame should have horizontal Constraints set as Left and right

Lets build a basic kit for a table and link new combinations to the two primary components as variants.

Using any icon library you can have a few hundred icons. As a result this can push you to inconsistency using different icons for the same goals for example especially if you have more than one designer on your team. Table icons as a separate library will help you manage and support consistency on big projects.

Avoid hidden layers You will know that you used them while building a design system and you will certainly forget about them later. In addition people who will use your design system may not know about these hidden layers at all.

You will have an idea of how to create them based on the illustration above Building a basic table kit but Ill specify a few more complex components for beginner designers.

The main idea of this article was to learn how to be more flexible with tables in Figma. And as I have demonstrated in the beginning you need to create only two simple components then do some wire-framing and finally when you need to breathe more life into your table just add more states.

Also you can use Figma Properties to make it compact. All the instructions you can find in the following tutorial video created by the Figma team during Figma Config 2022 Jumping into component properties.

Its only one example of how I structured the basic table kit in this article. You can use a similar workflow or create your own. In my projects kits are much more complex so Ill leave this choice to you.

I have prepared a Figma Design file that may help you go through some of the steps of my tutorial. If you have questions or need help do post your questions in the comments section at the end of the article.

The way I am working with tables in Figma is not as black and white. The approach mainly depends on the product youre designing and of course there are a few possible ways you could achieve the same goals.

Thank you for following me along As I already said tables are a complex component and I can talk about this topic for days. But maybe better to stop here and give you a chance to try this approach for yourself. Then if you have questions Id be happy to reply and help Or I could write another article Working With Tables in Figma The Pro Level. -

I have collected a few links to resources tutorials plugins discussions etc. related to working with tables in Figma

I spend my whole Figma life designing tables. I imagine other designers too. figma can you please give us more features like draggable horizontal rows AND vertical columns Moving data around should be super easy like Google Sheets.

I have a love/hate relationship with tables so here's how I set up my design system to make things easier. Rows vs. columns cell variants and a module component with a variable toolbar and variable pagination.https//t.co/0MbCROJAmp pic.twitter.com/xztjdwoVeL

We hear tables in figma are hard and we agree.Here's how we leveraged our internal design tools to create a more seamless workflow for designers across the DesigningUber team pic.twitter.com/R8PwiYdebK

A short Twitter thread on this topic also mentioning the Configurator plugin that Vincents team made.

I found a pretty reliable way to create flexible responsive custom tables in Figma. Ill do a video walkthrough at some point but if you want to play https//t.co/cibZI3Uk4g

Did I make a full video about building tables in Figma Yes. Do I regret going down this rabbit hole Also yes. https//t.co/JCyLxEBktG

Tips timeUsing component props we can create infinite tablesSo we can toggle on however many columns / rows we need in designsThis prevents us maintaining large variant sets for every permutation of table Community file to play with https//t.co/WqNM5SMjSE pic.twitter.com/yhefqrNImC

Note This technique is interesting if you have just a few tables in the product design. Otherwise it would be a problem to scale the system.

As you can see dealing with tables is a hot topic in the Figma design community I hope that you could find something useful here too.