Figma Design System: 06 Layout and Breakpoints

Hello everyone, and welcome to the sixth episode in a series where we create a Design System in Figma called FDS. In this episode, we’ll be doing Layout and Breakpoints 🤟. Shoutout to @abdul-UIUX for this little beauty: Duplicate variables by selecting them and hitting Shift+Enter 🙂. // Chapters 0:00 Intro 0:10 What is Layout? 0:53 What are breakpoints? 1:52 Creating Breakpoint Variables 4:11 Creating Layout Grids 5:11 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 I supply 2 versions of every episode file, one where I'm at the start that you can use to follow along and another where I'm at the end. Eg, "FDS.Design Tokens - 1.0.6" and "FDS.Design Tokens - 1.0.6 - End". // Software used https://www.figma.com/ // For updates and other tutorials, follow me on: Twitter: https://twitter.com/deanemachine #figma #designsystem #layout