Figma Design System: 12 Button Components
27.2K views · 2024-12-02
UI Design
Hello everyone, and welcome to the 12th episode in a series where we create a Design System in Figma called FDS.
In this episode, we’re creating our button components 🤟.
FYI: You don’t need a “Hover” state in the App versions of your button components, so we’ll remove those in the next episode.
// Chapters
0:00 Intro
0:21 Required updates for the button
0:52 Create Button component
15:08 Create Button Pill component
15:54 Create Button Icon component
17:14 Create mobile versions of all 3 components
19:28 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
// Software used
https://www.figma.com
// For updates. follow me on
Twitter: https://twitter.com/deanemachine
#figma #designsystem #button
In this episode, we’re creating our button components 🤟.
FYI: You don’t need a “Hover” state in the App versions of your button components, so we’ll remove those in the next episode.
// Chapters
0:00 Intro
0:21 Required updates for the button
0:52 Create Button component
15:08 Create Button Pill component
15:54 Create Button Icon component
17:14 Create mobile versions of all 3 components
19:28 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
// Software used
https://www.figma.com
// For updates. follow me on
Twitter: https://twitter.com/deanemachine
#figma #designsystem #button