What to expect in this training
- Understand what systems are
- How to utilize tools to speed up design - Intro to Tilebit, Figma Systems
- How to stay organized with design
Who am I?
- I am a content creator on YouTube
- Agency owner
- Founder of Tilebit
- Web Design Awwwards Jury 20222
Why does efficiency matter?
Efficiency
- Cost reduction
- Can quickly and easily iterate your designs using the same style
- Able to communicate your entire project better, hierarchy is very clear
Organization
- For yourself (knowing your tools)
- Example - Material 3 Design Kit by Google. This is a design system consisting of typography, color guidance, elevation (shadows), elements, layout breakpoint (very important for consistency)
Buttons
- Example: you want to always be using the same styles for primary and secondary buttons. Can use components.
Components
- Intro to Tilebit component library - 500 components for Figma, Framer and Webflow
- Beautiful thing about component libraries is that if you want to iterate the component, you can quickly make changes because it is auto layout
- Has inspiration preview that shows you what is possible to create with that component.
- With component libraries you can design and launch sites very quickly.
Example: Click.so
- Can go from design to Webflow very quickly using components
- Was able to iterate with pricing section, because once they saw the data they had to input into the design, was able to change up the design really fast with another component
Exclusive discount for Pait Pro members: 20% Tilebit.io - use code “PAITPRO”
Iteration
- Reusing components and patters for iteration
- Easy in Figma, Webflow and Framer
Caution with components
- Sometimes seeing examples of components that work in front of you can decrease creativity. Be aware of this and try to keep it in mind when designing.
Summary:
We covered the importance of design systems and how they can be used. If you go into Figma and look up design systems, you can find thousands of examples, filtered by popularity. Untitled UI is a very in depth example. Any questions, you can email me at hello@arnau.design, more than happy to help!