Pips design system

Structuring a Grid System in Figma | Pips Design System

In this tutorial, we’ll set up the grid system for the Pips Design System. The grid defines both horizontal and vertical rhythm, ensuring a consistent layout across the design. We’ll create a 12-column grid, add a baseline grid, and integrate it into our design system. 🔹 **Topics Covered:** ✅ Setting up a **12-column grid** ✅ Adding a **baseline grid** for spacing ✅ Linking the grid to the **design system** ✅ Preparing for integration with spacing tokens 📌 **Next Lesson:** Integrating the Grid with the Spacing System 🎯 **Subscribe for more design system tutorials!**

Structuring a Design System: Spacing Tokens in Figma

In this tutorial, we’ll define a structured spacing system using design tokens in Figma. We start by establishing spacing variables, organizing them into a clear hierarchy, and linking them to our grid system. By the end, you’ll have a scalable, well-organized design system that ensures consistency across your project. 🔹 **Topics Covered:** ✅ Creating spacing tokens (variables) ✅ Naming conventions for spacing (S, M, L, XL, etc.) ✅ Linking tokens to a grid system ✅ Applying the system for a scalable design 📌 **Next Lesson:** Applying Spacing Tokens to Typography 🎯 Subscribe for more design system tutorials!

Setting Up Typography in Figma | Pips Design System

In this tutorial, we’ll define baseline typography for the Pips Design System. We’ll set up a base font, size, and line height, link them to design system variables, and align typography with our baseline grid for a structured and harmonious layout. 🔹 **Topics Covered:** ✅ Setting up **base typography** (font, size, line height) ✅ Creating **design system variables** for fonts ✅ Linking typography to the **grid system** ✅ Ensuring a **consistent vertical rhythm** 📌 **Next Lesson:** Applying Typography to Components 🎯 **Subscribe for more design system tutorials!**

How to Create Static & Named Color Palettes in Figma | Design System Guide

A well-structured color system is crucial for any design system, ensuring consistency and scalability across projects. In this video, we’ll break down the difference between static and named color palettes and show you how to create both in Figma! 🔹 What You’ll Learn: ✅ Static Color Palette: How to set up a fixed set of colors for design consistency ✅ Named Colors: How to create semantic colors (e.g., Primary, Success, Warning) that adapt across themes ✅ How to apply design tokens for efficient color management ✅ Best practices for building a scalable color system 📌 Perfect for: UX/UI designers, product designers, and teams looking to organize and optimize their color usage in Figma! 🔥 Like, subscribe, and hit the bell 🔔 to follow our Figma Design Systems series! #Figma #DesignSystems #ColorPalette #NamedColors #UXDesign #UIDesign

Creating Primitives in Figma | Pips Design System

In this tutorial, we introduce primitives, a core concept in the Pips Design System. We’ll create a base component (PIP) that serves as a template for building other UI components. This method ensures consistency and scalability across the design system. 🔹 Topics Covered: ✅ Understanding primitives in a design system ✅ Creating a base component (PIP) ✅ Using spacing, typography, and color tokens ✅ Setting up semantic color tokens for text ✅ Preparing for buttons, inputs, and more UI elements 📌 Next Lesson: Building Buttons & Inputs with Primitives 🎯 Subscribe for more design system tutorials!

Button Components from primitives in Figma | Pips Design System

In this tutorial, we’ll create a button component using our PIP primitive as the base. We’ll apply design tokens for color, spacing, and border radius, ensuring a scalable and reusable design system. 🔹 Topics Covered: ✅ Using primitives to create a button component ✅ Defining a background color token ✅ Setting up a border radius token ✅ Ensuring scalability and consistency in the design system 📌 Next Lesson: Creating the Input Component 🎯 Subscribe for more design system tutorials!

Input components from primitives in Figma | Pips Design System

In this tutorial, we’ll create an input component using our PIP primitive as the base. We’ll ensure the input follows our design system standards by defining border tokens, shape tokens, and linking styles. This approach allows for easy scalability and updates across all input fields. 🔹 Topics Covered: ✅ Using primitives to create an input component ✅ Defining a border color token ✅ Ensuring border radius consistency across components ✅ Preparing inputs for future enhancements 📌 Next Lesson: Combining Inputs & Buttons into a Mini Form 🎯 Subscribe for more design system tutorials!

Icons & Icon Libraries in Figma | Pips Design System

In this tutorial, we’ll integrate icons into our design system using Lucide Icons, an open-source icon library. We’ll explore the best practices for importing and managing icons, ensuring they are scalable, consistent, and easy to use across components. 🔹 Topics Covered: ✅ Choosing a third-party icon library (Lucide Icons) ✅ Importing icons into Figma ✅ Setting up icons as a design system library ✅ Using icons efficiently in components 📌 Next Lesson: Enhancing Components with Icons 🎯 Subscribe for more design system tutorials! Part of my Handcrafting Design Systems Course https://monospace.studio/create-figma-design-systems

Building a Login Form in Figma | Pips Design System

In this tutorial, we’ll create a basic login form using our input and button components, ensuring they follow our design system principles. We’ll also explore auto-layout and responsiveness, setting the foundation for more complex patterns. 🔹 Topics Covered: ✅ Structuring a login form using components ✅ Using auto-layout for responsiveness ✅ Applying design tokens for consistent spacing ✅ Centering elements and ensuring proper alignment 📌 Next Lesson: Enhancing the Form with Icons & Additional Features 🎯 Subscribe for more design system tutorials!

Intro to the power of primitives and properties in Figma

Icons enhance visual clarity and usability in a UI. In this lesson, we integrate icons into buttons and input fields, leveraging primitives & properties to maintain a scalable and consistent design system.

Enhancing the PIP Primitive for More Flexibility | Pips Design System

In this tutorial, we’ll enhance our PIP primitive by adding more customization options for components like buttons and inputs. This will allow for greater flexibility and scalability, ensuring a seamless design system workflow. 🔹 Topics Covered: ✅ Adding left and right icons to components ✅ Creating design tokens for icon sizes and colors ✅ Introducing support text for additional context ✅ Using Figma properties to control visibility 📌 Next Lesson: Refining Component Styles & Usability 🎯 Subscribe for more design system tutorials!

Preparing Responsive Grids for Mobile Layouts | Pips Design System

In this lesson, we expand our grid system to support mobile and responsive layouts. We’ll set up a new mobile grid, ensuring our design adapts seamlessly across different screen sizes. 🔹 What You’ll Learn: ✅ Structuring desktop vs. mobile grids ✅ Applying Figma’s grid system for mobile ✅ Using spacing tokens for consistency ✅ Aligning components to mobile grids 📌 Next Lesson: Enhancing Our Login Form for Mobile 🎯 Subscribe for more design system tutorials! Made with ❤️ by Monospace.Studio

Introduction to Prototyping in Figma | Pips Design System

🚀 In this video, we take the next step in our design system journey by setting up a functional login and signup flow! We’ll enhance our login form by adding a sign-up form and linking both together using Figma’s prototyping tools. 🔹 What You’ll Learn in This Video: ✅ How to duplicate and modify the login form into a sign-up form. ✅ How to simplify the signup process with minimal user input. ✅ Setting up a sign-up button and linking it to the login form. ✅ Using Figma’s prototype features to switch between login and signup. ✅ Adding a “Back to Login” button for seamless navigation. ✅ Creating a working flow prototype to test user interactions. 👀 Watch until the end to see our first functional login/signup prototype in action! ⸻ 📌 TIMESTAMPS 00:00 – Introduction: Why We Need a Signup Form 00:30 – Duplicating and Detaching the Login Form 01:10 – Updating the Form Structure and Naming 02:00 – Creating a Minimal Signup Flow for Better UX 03:15 – Adding a Sign-Up Button to the Login Form 04:20 – Linking Sign-Up & Login for Seamless Navigation 05:30 – Creating a “Back to Login” Button 06:40 – Setting a Flow Start Point & Testing the Prototype 08:00 – Finalizing the Prototype & Next Steps ⸻ ✨ Want to Improve Your Design System Skills? This video is part of a comprehensive design system series, covering everything from building scalable UI components to responsive design and design tokens. 🔗 Watch the full playlist here: [Insert Playlist Link] 🎨 Download Figma Design System Starter Kit: [Insert Link] 📖 Read the full course guide & materials: [Insert Link] ⸻ 💬 Have questions or feedback? Drop them in the comments below! 🔥 Don’t forget to like & subscribe for more UI/UX design content! #Figma #DesignSystems #UXDesign #Prototyping #UIDesign #LoginForm #SignupForm

Getting Started with Variants (in Figma) | PIPs Design System

💡 In this video, we take our login and signup prototype to the next level by adding hover states to our inputs and buttons. Using Figma’s variants and prototype interactions, we bring interactivity to our design system while keeping everything token-based and scalable.

Enhancing Variants with "Types" Prop in Figma | Design System Tutorial

In this video, we take our form pattern to the next level by improving button variants in our Figma design system. We’ll learn how to create new button types, manage states, and refine our color tokens to ensure flexibility and scalability. 🔹 What You’ll Learn: ✅ How to create new "Types" of buttons ✅ Adding new button variants with multiple states (default, hover, etc.) ✅ Using component properties to define button types and states ✅ Improving color tokens for better button management ✅ Best practices for prototyping button interactions 📌 Perfect for: UX/UI designers, product designers, and teams looking to build a scalable and efficient design system! 🔥 Like, subscribe, and hit the bell 🔔 to stay updated with our Figma Design Systems series! #Figma #DesignSystems #ButtonVariants #UXDesign #UIDesign

Building a Flexible Field Component in Figma | Design System Tutorial

In this episode, we take a big step forward in our form design by turning a basic input into a fully functional field component. This new component supports labels, helper text, icons, and accessibility—all while remaining scalable and easy to manage within your Figma design system. We’ll walk through creating the structure, applying layout and spacing tokens, setting up props, and making it flexible for different use cases. 🔹 What You’ll Learn: ✅ The difference between a simple input and a full field component ✅ How to build a label + input + helper text pattern ✅ Using Auto Layout and spacing tokens effectively ✅ Creating component props for flexible visibility (label, helper text, icons) ✅ Improving accessibility with persistent labels and placeholders ✅ Updating your prototype with the new components 📌 Perfect for: UX/UI designers and product teams looking to build accessible, flexible form components inside a robust design system. 🔥 Like, subscribe, and hit the bell 🔔 to stay up to date with the full Figma Design Systems series. #Figma #DesignSystems #FormComponents #UXDesign #UIDesign #Accessibility #FieldComponent

Creating a Simple App Icon & Accent Color in Figma | Design System Series

🎨 Title: Creating a Simple App Icon & Accent Color in Figma | Design System Series from Monospace.Studio 📝 Description: In this episode, we design a minimal app icon component and introduce a reusable accent color token to bring personality and clarity to your design system in Figma. You’ll see how to set up a flexible brand color system that can scale across forms, buttons, and UI elements. 🔹 What You’ll Learn: ✅ How to design a basic app icon with reusable styles ✅ Creating and applying accent color tokens ✅ Updating your design system documentation ✅ Using layout and spacing tokens to refine login/signup screens ✅ Preparing for branded call-to-action buttons in your UI 📌 Perfect for: Product designers, design system builders, and UX/UI teams looking to add brand flexibility and polish to their Figma workflows. 🔥 Like, subscribe, and hit the bell 🔔 to keep learning with the full Figma Design Systems series! #Figma #DesignSystems #AppIcon #AccentColor #UXDesign #UIDesign #Branding

Creating Accent Buttons & Social Logins in Figma | Design Systems Tutorial

In this video, we take our login UI to the next level by designing a bold accent button, refining our layout with Auto Layout, and adding social login options. You’ll also learn how to expand your color token system for hover states and use naming conventions that keep your system clean and scalable. For info see http://monospace.studio 🔹 What You’ll Learn: ✅ How to build an accent-colored button variant ✅ Adding a new hover state with tokenized colors ✅ Managing component states and properties in Figma ✅ Creating and styling social login buttons (Google, GitHub) ✅ Improving structure with Auto Layout and spacing tokens This is a practical, end-to-end episode perfect for designers building real-world apps with a professional design system in Figma. 🔥 Like, subscribe, and hit the bell 🔔 to follow the full Figma Design Systems course. #Figma #DesignSystems #UXDesign #UIComponents #SocialLogin #Buttons #FigmaTutorial #ProductDesign

Finish Your Figma Login Form – Social Icons & Error States

We’re wrapping up the login form today with all the final touches to get it ready for development. In this video, you’ll learn how to: ✅ Add brand icons for Google and GitHub social login ✅ Create a basic icon system with dark/light variants ✅ Design an error state with accessibility in mind ✅ Tidy up component naming and layout spacing ✅ Prep your components for hand-off with smart defaults We’re keeping things clean, practical, and easy to extend later. Next up—we start building the actual app with this design system foundation! Timestamps: 00:00 – Intro 00:48 – Adding Google & GitHub icons 02:40 – Setting up icon variants 04:10 – Swapping icons in the login form 05:00 – Creating an error state variant 07:00 – Accessibility: why icons matter 08:15 – Spacing, layout, and cleanup 09:05 – Final thoughts and what’s next Tags: #figma #uxdesign #designsystems #loginform #uiux #sociallogin #componentlibrary

Building the AppLayout and AppBar | PIPs Design System

In this episode, we move past the login screen and start building the main app layout. We create a reusable App Layout component, build a top bar with our logo and user account button, and connect it to our login flow with Figma’s prototyping tools. This sets the foundation for all future screens and demonstrates how a scalable design system makes changes easy and consistent. What you’ll learn: • Creating a reusable app layout frame • Building a top navigation bar using components • Setting up Figma auto layout and spacing tokens • Prototyping the login-to-home screen transition • Best practices for scalable design system components Chapters: 00:00 – Intro: moving into the app 00:28 – Creating the App Layout component 01:20 – Building the top bar (logo + account button) 02:45 – Nesting layout and spacing with auto layout 04:10 – Component hygiene and reusability tips 05:15 – Setting up prototype interaction (login → home) 06:30 – Using dissolve transition and preview 08:10 – What’s next: logout and user menu #FigmaDesignSystem #UIDesign #AppLayout #FigmaComponents #ProductDesign #FigmaTutorial

Log Out Menu with Figma Components & Overlays (Design System Tutorial)

In this Figma design system tutorial, we build a clean, reusable log out menu using atomic components. We fix icon styling bugs, create MenuItem and Menu components, and prototype the log out flow using Figma’s overlay feature. This is a must-watch for anyone building scalable UI patterns in Figma!

Figma Design System: Creating a Profile Page Component

In this video, we’re adding a Profile Page to our Figma design system app! You’ll learn how to build a flexible, token-driven profile form using our AppLayout component, and how to prototype the navigation from your account menu to the profile page. We’re keeping it lean and functional, and always building with scalability in mind. 🧩 What we cover: • Duplicating and renaming app screens • Creating a form with name, email, and password fields • Using tokens for color, spacing, and typography • Inserting and replacing layout placeholders • Adding a simple prototype interaction • Best practices for naming and organizing Figma components ✅ Don’t forget to: 👍 Like the video 🔔 Subscribe for more Figma system lessons 💬 Drop a comment if you want more examples on layout or form structure

Building a Figma Dashboard with Cards | PIPs Design Systems

In this video, we take the next step in building our lean Figma design system—adding real content to the homepage! Learn how to create a clean dashboard layout using cards, build a grid pattern with rows, and apply spacing tokens for consistent layout. 🔥 What’s Inside: • Creating a reusable card component with icons and titles • Nesting a content instance inside cards • Designing a flexible grid layout using Auto Layout • Building and wiring up page.home for your prototype 📦 This lesson is part of our ongoing Design System in Figma by Building an App course—real UI, real patterns, real results. 🔗 Don’t forget to subscribe & hit the bell to stay updated with future lessons! #FigmaDesignSystem #UIDesign #FigmaTutorial #DashboardUI #DesignTokens #AutoLayout

Designing KPI Cards in Figma | Dashboard UI Polish

Time to level up our design system by making the dashboard actually look better! In this video, we: ✅ Improve the visual style of our card components ✅ Add subtle shadows and modern white backgrounds ✅ Create dynamic KPI card components with flexible text blocks ✅ Polish our grid layout for better spacing and flow Whether you’re building a SaaS dashboard, admin panel, or client app, these simple tricks bring your UI to life without breaking your system. 💡 Learn how to think in patterns, not pages. This is part of my “PIPs Design System” playlist in Figma, which is part of the course I am creating on how to build design systems from scratch on my website: https://monospace.studio/handcrafted-design-systems-in-figma #FigmaDesign #DashboardDesign #FigmaComponents #UIDesign #DesignSystem #FigmaKPI

Figma Prototype Hack: Shared Layouts Across Pages | Figma Workarounds

Ever been frustrated by Figma’s one-page-only prototyping? Us too. In this video, we show you a clean workaround: ✅ Build a local app layout that inherits your global component ✅ Add prototype interactions to that local version ✅ Use it across all artboards—without duplicating anything! You’ll learn how to: • Maintain a clean component system while prototyping • Use naming conventions to exclude local components from publishing • Link multiple pages in your prototype using smart component structure Perfect for anyone building a multi-page app UI in Figma that needs functional prototypes without breaking your design system. 🔗 Subscribe for more advanced design system tips and real-world workflows. #FigmaPrototype #FigmaDesignSystem #FigmaTips #UIDesign #AppLayout #DesignWorkflow

How to Build Light & Dark Mode in Figma with Tokens | PIPS Design System

In this quick tutorial, we’ll show you how to use Figma’s new Mode feature to build a flexible Light & Dark theme system — all using tokens. You’ll learn how to assign colors to multiple modes, test your UI instantly, and prep your design system for production. 🔑 What You’ll Learn: • The fastest way to create a theme switch in Figma • How to structure your tokens for light/dark design • Tips for real-world usage in dashboards and apps • A clean, scalable method for theme support Whether you’re designing a SaaS app, mobile UI, or website, this is a must-have skill for modern UI systems. Subscribe for more design system tutorials!

Using Apple Fluid Glass in Figma

Bring your UI to life with this fast and easy tutorial on adding Fluid Glass (Glassmorphism) effects in Figma. Learn how to apply blur, transparency, and layering to create beautiful, modern UI elements that feel light, layered, and dynamic. 🎯 In this short tutorial, you’ll learn: • What “Fluid Glass” means in design • How to set up background blur + transparency • Why using frames is essential for clean layering • How to combine color + effect for depth This technique is perfect for dashboards, cards, or overlays that need a modern polish — and it fits perfectly into your design system too. 📌 Don’t forget to subscribe for more real-world Figma and design system lessons every week.