Figma Design System: 04 Typography
30.9K views · 2024-03-09
UI Design
Hello everyone, and welcome to the fourth episode in a series where we create a Design System in Figma called FDS.
In this episode, we’ll be doing Typography 🤟.
// Chapters
0:00 Intro
0:09 What is Typography?
2:47 Style table overview
3:27 Create Typography styles
10:24 Outro 👋
// FDS Starter Libraries
Download the Figma files I use in this series here
https://drive.google.com/drive/folders/1YXUHhWJ7NL1xSh_7lDI-QRp1GOw7V7Yo?usp=sharing
// Scale Design System
http://www.scaledesignsystem.com/
// Scale’s Typography page
https://www.figma.com/file/BDgzx7fkrNoRK87uZX6sFw/Scale.Design-System-(2.3.0)?type=design&node-id=1000%3A7299&mode=design&t=wD9LNzuHtlEjiMcc-1
// Software used
https://www.figma.com/
// For updates and other tutorials, follow me on
Twitter: https://twitter.com/deanemachine
Medium: https://medium.com/@christopherdeane
#figma #designsystem #typography
In this episode, we’ll be doing Typography 🤟.
// Chapters
0:00 Intro
0:09 What is Typography?
2:47 Style table overview
3:27 Create Typography styles
10:24 Outro 👋
// FDS Starter Libraries
Download the Figma files I use in this series here
https://drive.google.com/drive/folders/1YXUHhWJ7NL1xSh_7lDI-QRp1GOw7V7Yo?usp=sharing
// Scale Design System
http://www.scaledesignsystem.com/
// Scale’s Typography page
https://www.figma.com/file/BDgzx7fkrNoRK87uZX6sFw/Scale.Design-System-(2.3.0)?type=design&node-id=1000%3A7299&mode=design&t=wD9LNzuHtlEjiMcc-1
// Software used
https://www.figma.com/
// For updates and other tutorials, follow me on
Twitter: https://twitter.com/deanemachine
Medium: https://medium.com/@christopherdeane
#figma #designsystem #typography