In this Figma tutorial for beginners, you’ll learn how to use Figma UI Kits to help you bring design app ideas to life faster. Join Billy Sweetman, Design Lead at Headway, to learn more about how you can use Shipwright - our fully-editable and free UI Kit created in Figma, and ways to add UI Kits to your next project.
UI kits, or user interface kits, help you improve your design workflow. They also encourage recycling components instead of creating new ones from scratch. They’re commonly used for mobile design or prototyping, largely because two of the biggest operating systems—iOS and Android—both have robust, well documented, and heavily supported design systems. (Note that design systems and UI kits often go hand-in-hand.
A design system relates to both the code components and UI design, while a UI kit refers to the designer’s version of the design system. A UI kit can stand alone without any relation to a larger design system.
Segments:
- 00:00 - Start
- 01:23 - What is a UI Kit?
- 02:47 - Should I Build My Own UI Kit?
- 04:00 - Where Do I Find UI Kits?
- 12:35 - How to Import a UI Kit into your Figma Project
- 18:48 - How to Add UI Kit Draft from Figma Community
- 40:43 - Managing Inputs with Feedback Info
- 53:01 - Creating Release Notes for UI Kits
- 54:00 - Design Handoff Process Discussion
#figma #web-development #programming #developer
