Andrew Coyle
Andrew Coyle
  • 41
  • 31 476
Building a dashboard - see the power of Forms & Tables
Forms and Tables Basic Design System:
www.figma.com/community/file/1348827199455465674
Forms & Tables Website:
www.formsandtables.com/
มุมมอง: 48

วีดีโอ

Tool tip, loader, icon, avatar, and miscellaneous components - Forms & Tables design system
มุมมอง 2416 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Modal component - Forms & Tables design system
มุมมอง 3116 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Modal templates file: www.figma.com/community/file/1429587763762590526 Forms & Tables Website: www.formsandtables.com/
Command menu component - Forms & Tables design system
มุมมอง 2416 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Card component - Forms & Tables design system
มุมมอง 3916 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Accordion components - Forms & Tables design system
มุมมอง 3816 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Alert components - Forms & Tables design system
มุมมอง 4816 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Progress components - Forms & Tables design system
มุมมอง 3416 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Chart components - Forms & Tables design system
มุมมอง 2816 ชั่วโมงที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Data display components - Forms & Tables design system
มุมมอง 4519 ชั่วโมงที่ผ่านมา
In this video, we create a dashboard in Figma with data display components. Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Pagination component - Forms & Tables design system
มุมมอง 61วันที่ผ่านมา
Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
List component - Forms & Tables design system
มุมมอง 42วันที่ผ่านมา
In this video, we create a user list with the list item component inside Figma with the Forms & Tables UI system. Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Table components - Forms & Tables design system
มุมมอง 8814 วันที่ผ่านมา
In this video, we create a responsive data table with table components inside Figma with the Forms & Tables UI system. Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Form components - Forms & Tables design system
มุมมอง 9314 วันที่ผ่านมา
In this video, we create a date range selector with various form components inside Figma with the Forms & Tables UI system. Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Navigation components - Forms & Tables design system
มุมมอง 9414 วันที่ผ่านมา
In this video, I create a main navigation bar with sub-navigation items inside Figma with the Forms & Tables UI system. Forms and Tables Basic Design System: www.figma.com/community/file/1348827199455465674 Forms & Tables Website: www.formsandtables.com/
Badge component - Forms & Tables design system
มุมมอง 14214 วันที่ผ่านมา
Badge component - Forms & Tables design system
Button component - Forms & Tables design system
มุมมอง 15114 วันที่ผ่านมา
Button component - Forms & Tables design system
Design system overview - Forms & Tables Figma file
มุมมอง 13114 วันที่ผ่านมา
Design system overview - Forms & Tables Figma file
Introducing the Forms & Tables Design System
มุมมอง 55614 วันที่ผ่านมา
Introducing the Forms & Tables Design System
How to add a drop-down selector inside of a table
มุมมอง 6714 วันที่ผ่านมา
How to add a drop-down selector inside of a table
How to create interactive row selection in a table
มุมมอง 9621 วันที่ผ่านมา
How to create interactive row selection in a table
Create a responsive data table with a fixed first column
มุมมอง 13421 วันที่ผ่านมา
Create a responsive data table with a fixed first column
How to create a share post modal in Figma with Forms & Tables
มุมมอง 270หลายเดือนก่อน
How to create a share post modal in Figma with Forms & Tables
How to align an icon to the left with centered button text in Figma
มุมมอง 137หลายเดือนก่อน
How to align an icon to the left with centered button text in Figma
Building responsive tables from a single cell component
มุมมอง 738ปีที่แล้ว
Building responsive tables from a single cell component
Creating a responsive table from a single component with boolean properties in Figma
มุมมอง 887ปีที่แล้ว
Creating a responsive table from a single component with boolean properties in Figma
How to create responsive table components with cell variants in Figma
มุมมอง 1.4Kปีที่แล้ว
How to create responsive table components with cell variants in Figma
Create a responsive table with auto layout in Figma
มุมมอง 4.7Kปีที่แล้ว
Create a responsive table with auto layout in Figma
Typography based on a 4 point grid system
มุมมอง 604ปีที่แล้ว
Typography based on a 4 point grid system
Creating a color palette for a design system inside Figma
มุมมอง 6Kปีที่แล้ว
Creating a color palette for a design system inside Figma

ความคิดเห็น

  • @JeremyNeish
    @JeremyNeish วันที่ผ่านมา

    This is amazing. Thank you for the effort!

  • @imacode7579
    @imacode7579 2 วันที่ผ่านมา

    thanks you really help me 😊🙏🏻

  • @dawitnegusse6588
    @dawitnegusse6588 6 วันที่ผ่านมา

    Good work

  • @joemontero741
    @joemontero741 12 วันที่ผ่านมา

    Thanks for putting this together. I’ve been following your work since your forms and tables article. It’s a goldmine and highly valuable.

    • @CoyleAndrew
      @CoyleAndrew 12 วันที่ผ่านมา

      Awesome! Thank you! I'm really happy you find my work helpful.

  • @shubu.1269
    @shubu.1269 13 วันที่ผ่านมา

    I found many video on yt about designing comprehensive design systems but no how to develop in code. I would love to know how libraries like schdcn were designed and coded for scalability and customization , It would be nice to have my own component library for my personal projects or share to public.

  • @Anonymous-kk8qx
    @Anonymous-kk8qx 22 วันที่ผ่านมา

    Thank you so much

  • @王思儫
    @王思儫 หลายเดือนก่อน

    thank!

  • @Underhills
    @Underhills 3 หลายเดือนก่อน

    From all the techniques I've seen on this your approach with different boolean props for table cell content seems effective, but I see that you also have arranged each possible column variation as separate column components as well - so is that for larger building blocks? If this was made in a design system, would you publish a column component containing these variants? Thanks for sharing the file, it's highly appreciated!

    • @CoyleAndrew
      @CoyleAndrew 23 วันที่ผ่านมา

      I like to build tables out from cell components to give me more freedom to customize rows and columns. However, in the design system I published, I include column components for easy of use. www.figma.com/community/file/1348827199455465674

  • @Underhills
    @Underhills 3 หลายเดือนก่อน

    Thanks for sharing. Much appreciated! Figma is incredibly querky and tiring to use in terms of how everything is constructed with components and components variants. It is so overengineered it hurts! Surely someone in the software industry could come up with an easier and smoother way than to constantly having to make different variants and component variations of single items. It's so repetitive and non productive.

  • @estilan-cro
    @estilan-cro 3 หลายเดือนก่อน

    If you have a column with a long string-like a description of a service that includes details-how can you make one column wrap and expand a line? I am having this issue with designing a customer invoice and need to show how the table would respond to different sizes.

  • @lionelmuskwe
    @lionelmuskwe 4 หลายเดือนก่อน

    Life saver. Andrew, thank you

  • @iftekharulhaque2697
    @iftekharulhaque2697 4 หลายเดือนก่อน

    Any tips on font weight and combining multiple fonts?

  • @iftekharulhaque2697
    @iftekharulhaque2697 4 หลายเดือนก่อน

    Thank you

  •  5 หลายเดือนก่อน

    Thanks man!

  • @darrenstrange2244
    @darrenstrange2244 6 หลายเดือนก่อน

    I don't really understand the use of auto layout. Would it not just be quicker to align these two icons manually? Would have taken 2 seconds to align those manually instead of constantly clicking on all those auto-layout alignment options. II am knew to Figma so I'd like to understand why auto-layout is worth it?

    • @CoyleAndrew
      @CoyleAndrew 6 หลายเดือนก่อน

      It allows you to dynamically resize compositions and components. Great for responsive design. It also roughly aligns with how it would be coded with flex box. But auto layout takes some time to master and it’s not necessarily required to build awesome response designs. Once you get the hang of it, auto layout solves a lot of issues when iterating and updating designs. I tend to use auto layout for some things but not everything.

  • @kKevin09
    @kKevin09 6 หลายเดือนก่อน

    Thank you so much, just having to make a table is already difficult if it wasn't for the tutorial as a complete beginner!

  • @abdu11ahh
    @abdu11ahh 6 หลายเดือนก่อน

    Thank You so much Saved my 30 mins

  • @nickfalcon1569
    @nickfalcon1569 7 หลายเดือนก่อน

    Thanks!!!

  • @martinmbae2688
    @martinmbae2688 7 หลายเดือนก่อน

    Straight to the point. Well done

  • @beaconbin465
    @beaconbin465 7 หลายเดือนก่อน

    Thank you so muccchhh

  • @prasanthmuthusamy3874
    @prasanthmuthusamy3874 7 หลายเดือนก่อน

    Very simple. Thanks. Make more like this

  • @regwsx
    @regwsx 8 หลายเดือนก่อน

    +1

  •  9 หลายเดือนก่อน

    Okay. How do you keep the titles of each column in the same place as the rest of the data below? By having a different length to the data, they react differently to "filling the container"

  • @eugeniat5460
    @eugeniat5460 10 หลายเดือนก่อน

    One of the most helpful tuts by far, thank you

  • @coffeeecatsss
    @coffeeecatsss 10 หลายเดือนก่อน

    Can you show how to prototype so that only one selected cell is in the active state when clicked?

    • @CoyleAndrew
      @CoyleAndrew 23 วันที่ผ่านมา

      I created a video showing you have to design a table with row selection interactivity. I hope this helps! th-cam.com/video/2prF9BMWQbM/w-d-xo.html

  • @yehtet7074
    @yehtet7074 10 หลายเดือนก่อน

    really thank !

  • @AbhishekPandey-hq6ce
    @AbhishekPandey-hq6ce 11 หลายเดือนก่อน

    Good video, can you also make video with complex and advance component properties

  • @newtodesign
    @newtodesign 11 หลายเดือนก่อน

    I love the idea of builidng tables with columns. I was working with someone else's file and they build with Rows - which was difficult for me to manage.

  • @zajahrisolar2260
    @zajahrisolar2260 11 หลายเดือนก่อน

    your tutorial is helpful, since spacing mode is no where to be found in the advanced auto layout. thanks a lot

  • @saraelisa8938
    @saraelisa8938 11 หลายเดือนก่อน

    This is A-mazing, Andrew. Thank you so much, really. I'm loving all the amazing work you've been sharing on Medium too, and these super videos you're sharing here. I appreciate it SO much, you have no idea how much this is helping me.

  • @updates4043
    @updates4043 ปีที่แล้ว

    Thanks for the tutorial. Why is there so much gap between the Serial number and the consumer name rows. Currently all rows are having same width. Can you make a tutorial where each rows are having different width? That would be an ideal real life scenario.

    • @CoyleAndrew
      @CoyleAndrew 23 วันที่ผ่านมา

      You can set a fixed width (or min/max-width) for individual columns. The table will still be responsive as long as one column is set to "fill" within the parent component. I hope this helps!

  • @Beanaification
    @Beanaification ปีที่แล้ว

    This was awesome, and very well explained. Thank you!

  • @Nkreed68
    @Nkreed68 ปีที่แล้ว

    Thanks for the tutorial, I watched it entirely :) By the way, Figma recently released a new table feature in FigJam. I tried to paste it in Figma, but the result isn't great. Do you think the Figma Developers will bring table feature to Figma too at some point?

  • @radhey4791
    @radhey4791 ปีที่แล้ว

    This one is really useful mate making the parent frame at the beginning solves a lot of further issues. Thanks mate for wonderful tutorial. Looking forward to learn more from you.

  • @andress6772
    @andress6772 ปีที่แล้ว

    Hi! great video on this plugin. mind explaining how the numbers work next to the white/black dots please? thanks!

  • @Jason-pj8jq
    @Jason-pj8jq ปีที่แล้ว

    P r o m o s m 👊

  • @PatTheLoneWolf
    @PatTheLoneWolf ปีที่แล้ว

    i really love how simple you made it.. you gained a subscriber. thank you so much. want to learn more from you

  • @azizov_aqsin
    @azizov_aqsin ปีที่แล้ว

    hi good job bro,i have been learning figma and ui design for 2 months. But İ cant learn correctly. maybe it is little time for learning these . İ need some ideas for this.

    • @CoyleAndrew
      @CoyleAndrew ปีที่แล้ว

      Thank you! Let me know how I can help you learn and what topics to cover next.

    • @azizov_aqsin
      @azizov_aqsin ปีที่แล้ว

      @@CoyleAndrew sometimes i try to make some project app or landing page. But i dont know ,how can İ make typography or colors. How i must to choose these?

    • @CoyleAndrew
      @CoyleAndrew ปีที่แล้ว

      @@azizov_aqsin Here is a video I made that covers typography and color when it comes to creating reusable styles.

  • @maxmagnus777
    @maxmagnus777 ปีที่แล้ว

    that double click feature to set a different layout seems so non intuitive.

    • @CoyleAndrew
      @CoyleAndrew ปีที่แล้ว

      I agree! I think I accidentally discovered this feature the first time.

  • @MissWatermelonify
    @MissWatermelonify 8 ปีที่แล้ว

    thank you lots

  • @bruceaisher
    @bruceaisher 10 ปีที่แล้ว

    Thanks - I was trying to work this out for ages and this tutorial finally explained it in the most understandable way. Thanks a lot Andrew!

  • @tuhinbiswas98
    @tuhinbiswas98 10 ปีที่แล้ว

    code pls

  • @Vaeshkar
    @Vaeshkar 11 ปีที่แล้ว

    I can't believe mine doesn't work. :(

  • @IcyLime20
    @IcyLime20 11 ปีที่แล้ว

    thanks bro

  •  12 ปีที่แล้ว

    Thanks man, you saved my life!

  • @JepMaster8
    @JepMaster8 12 ปีที่แล้ว

    Awesome. Just what I needed. Thanks a lot!