- 41
- 31 476
Andrew Coyle
เข้าร่วมเมื่อ 18 ก.ย. 2011
Learn design fast
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/
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
This is amazing. Thank you for the effort!
thanks you really help me 😊🙏🏻
Good work
Thanks for putting this together. I’ve been following your work since your forms and tables article. It’s a goldmine and highly valuable.
Awesome! Thank you! I'm really happy you find my work helpful.
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.
Thank you so much
thank!
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!
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
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.
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.
Life saver. Andrew, thank you
Any tips on font weight and combining multiple fonts?
Thank you
Thanks man!
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?
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.
Thank you so much, just having to make a table is already difficult if it wasn't for the tutorial as a complete beginner!
Thank You so much Saved my 30 mins
Thanks!!!
Straight to the point. Well done
Thank you so muccchhh
Very simple. Thanks. Make more like this
+1
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"
One of the most helpful tuts by far, thank you
Can you show how to prototype so that only one selected cell is in the active state when clicked?
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
really thank !
Good video, can you also make video with complex and advance component properties
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.
your tutorial is helpful, since spacing mode is no where to be found in the advanced auto layout. thanks a lot
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.
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.
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!
This was awesome, and very well explained. Thank you!
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?
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.
Hi! great video on this plugin. mind explaining how the numbers work next to the white/black dots please? thanks!
P r o m o s m 👊
i really love how simple you made it.. you gained a subscriber. thank you so much. want to learn more from you
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.
Thank you! Let me know how I can help you learn and what topics to cover next.
@@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?
@@azizov_aqsin Here is a video I made that covers typography and color when it comes to creating reusable styles.
that double click feature to set a different layout seems so non intuitive.
I agree! I think I accidentally discovered this feature the first time.
thank you lots
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!
code pls
I can't believe mine doesn't work. :(
thanks bro
Thanks man, you saved my life!
Awesome. Just what I needed. Thanks a lot!