11

How do you design your tables?

almost 4 years ago from , UI/UX Designer

Hey DN! I'm currently working on back-end wireframes for a mobile recycling website. There are are a lot of tables. I've always found it very time consuming when designing tables in Sketch. I was hoping for any useful tips or insight into how others do it?

11 comments

  • Mikus RiekstinsMikus Riekstins, almost 4 years ago

    Sketch symbol for each row makes it half as painful, yet tables seems a chore whatever the approach.

    6 points
    • Dan W, almost 4 years ago

      100% agree with this. It took me a while to switch to this because I liked to use Craft Data & Duplicate for building tables but in the end symbols are better for making updates. I still miss using the Craft Data plugin for creating all my table content seeing as I had a bunch of content from our app stored there for different column types. Hoping one day for a nice solution to populating the cells.

      0 points
      • Kyle KKyle K, almost 4 years ago

        Dan, I use the Craft Data with my symbols. If you build the symbols defining what each item should be populated with what. You can use the Craft Duplicate tool it should auto re-populate the fields with variations of what you selected to be filled with craft data

        5 points
        • Dan W, almost 4 years ago

          Holy crap, just tried it out and sure enough it works perfectly! I don't know why but I thought Duplicate didn't work with symbol rows. This is awesome, thanks for letting me know.

          So as for the answer to the original post:

          • each row as a symbol
          • cell content using Craft Data where possible
          • specify number of rows via Craft Duplicate
          2 points
  • Saul SutcherSaul Sutcher, almost 4 years ago

    Four legs and a top?

    4 points
  • Jovana AndjelkovicJovana Andjelkovic, almost 4 years ago

    My process would be: a bit of crying, pinch of rage and handful of despair. Especially when PM adds another column after you've finished the initial table.. :/

    1 point
  • Nate DaubertNate Daubert, almost 4 years ago

    You can draw a rectangle and naviagate to Arrange > Make Grid

    0 points
  • Jonathan ShariatJonathan Shariat, almost 4 years ago

    If youre working off a framework (like bootstrap), it might also be easier to load up a table in an auto-refresh browser and edit the CSS live. If youre comfortable with that sort of thing.

    0 points
  • Christopher Taylor, almost 4 years ago

    Adobe XD has a great repeatable grid feature: https://blogs.adobe.com/creativecloud/exploring-repeat-grid-in-adobe-xd/

    0 points
  • Aaron CalzadoAaron Calzado, almost 4 years ago

    I create my table in InDesign and export a static image. Sucks, I know, but InDesign has really good table creation features.

    0 points