Design Systems for Beginners [Free UI Kit and Figma Design System Template]
Billy answers "What is a design system?" and what's the best way to create a Figma Design System so it scales as your product grows? Get access to our Free UI Kit further down in the description.
Get Free Access to Shipwright 2.0 - A Design System Template and UI Kit for Figma: bit.ly/free-shipwright-design...
Become a Design System Pro with our New Video Course
bit.ly/shipwright-design-syst...
Design systems can save a lot of time and effort, and they can empower your team to go further and faster than ever before. Having proper design system documentation is essential for successful projects.
👉 A design system is a set of standards for design and code along with components that unify both practices.
🤔💭
Think of it as the same instructions and Lego kit for everyone.
In this design system presentation, Billy will walk through a beginner's guide to creating design systems, proper design system documentation, and the tools and best practices he's picked up along the way for successful planning and implementation. The Headway team creates design systems in Figma, but these principles can apply to any design tool.
00:00 - Start
1:14 - Creation of Design Systems
1:38 - Speaker Introduction
2:20 - Overview
2:34 - What are Design Systems?
3:43 - Creating Your System
4:01 - Do You Need a Design System?
6:18 - Design System Checklist
7:00 - Design System Team Models
14:28 - Setting Up Your System
15:15 - Atomic Design
18:30 - Multi-Tired UI Kits
20:40 - Linked Libraries
21:27 - Numerically Indexing Files
23:55 - Naming Conventions
26:35 - Moving Beyond Static
29:56 - The Tool Box
31:39 - Q&A
=================================
⚡️ More Design Systems Content ⚡️
Get Free Access to Shipwright 2.0 - A Design System Template and UI Kit for Figma: bit.ly/free-shipwright-design...
Getting Started with Design Systems
• Design Systems for Beg...
Design System Management and Documentation
• Better Figma Design Sy...
Our Favorite Figma Plugins
www.headway.io/blog/figma-plu...
Multi-Tiered UI Kits for Design Systems
www.headway.io/blog/multi-tie...
=================================
Presentation File Here:
bit.ly/dsgn-systms-prs-4-28-2020
=================================
This presentation is the first in our Scalable Design Systems series.
Next Lesson - Managing Design Systems:
• Better Figma Design Sy...
================================
Interested in Working with Headway?
================================
Book a free private call where we'll listen to your problems, identify opportunities for your business, and show you exactly how Headway's unique approach and proven strategies can help you reach your goals.
Schedule a free consultation:
headway.io/free-consultation
=================================
#designsystems #ui #appdesignprocess
Пікірлер: 10
Excellent. Thanks
@headwayio
2 жыл бұрын
You’re welcome! We’ve just quietly launched Shipwright 2.0, our a new upgrade to our free UI Kit and Design System Starter Kit. We’ve used it to start many projects with our teams. www.figma.com/community/file/1072894425066720135/Shipwright-2.0---UI-Kit-%26-Design-System
Lead your team with our new premium design system course: bit.ly/shipwright-design-system-course
In intro picture u looks like Jessie Pinkman haha, anyway good work, thanks :)
@headwayio
3 жыл бұрын
We’ll take that as a compliment. 😅
Hi, thanks for the extremely useful kit. I've copied it over to my file to use the components as reference. Currently, even base components are showing in my asset list even though the prefix (_) is in place for the base components. Is there reason why the base components are showing up, as it makes quickly dragging and dropping a hassle as there are essentially duplicates of all components. I'm on the free plan (not shared library) if that could be the reason.
@headwayio
Жыл бұрын
I'm following up with Billy and the Design Team for you. Should have a reply for you tomorrow.
Are you available for any freelance work?
@headwayio
3 жыл бұрын
We'd love to see how we can help you reach your goals! - You can schedule a free consultation with Andrew here: www.headway.io/free-consultation
*Segments:* 00:00 - Start 1:14 - Creation of Design Systems 1:38 - Intro 2:20 - Overview 2:34 - What are Design Systems? 3:43 - Creating Your System 4:01 - Identifying the Need 6:18 - Design System Checklist 7:00 - Design System Team Models 14:28 - Setting Up Your System 15:15 - Atomic Design 18:30 - Multi-Tired UI Kits 20:40 - Linked Libraries 21:27 - Numerically Indexing Files 23:55 - Naming Conventions 26:35 - Moving Beyond Static 29:56 - The Tool Box 31:39 - Q&A *Free UI Kit:* bit.ly/shipwright-ui-kit *Presentation File Here:* bit.ly/dsgn-systms-prs-4-28-2020 *More Resources:* Get Started with Multi-Tiered UI Kits for Design Systems bit.ly/mt-ui-kits 5 Signs Your Team is Suffering From UX Immaturity bit.ly/ux-immaturity The Best Books for Learning New Design Methods bit.ly/dsgn-mthds