Building a Design System In Figma for Beginners

Building a Design System In Figma for Beginners, using Pixellink Design System Lite | Step-by-step Tutorial In this beginner-friendly series, we dive into the world of design systems. More specifically, we focus on leveraging the Pixel Ink Design System Lite to create and use components and variables and learn how to merge them together. As we build assets for our projects, we’ll cover everything from the essential elements to setting up animations and interactions. This lesson focuses on creating interactive buttons with multiple states and styles, utilizing semantic collections, layering, and setting up animations. Additionally, we introduce our upcoming beta for the Variable Toolkit, which assists in applying variables directly to your assets. Sign-up links for the Pixel Ink Design System Lite and Pixellink Variable Toolkit beta test can be found in the description box below. This series is perfect for anyone looking to understand and implement the design to development pipelines and behaviour of items inside a design system while keeping in mind the human experience in design. #designsystems #pixelInk, #figma #atomic #designthinking #humanexperiences #designtutorial #figmatutorial #tutorial #beginners #designcommunity #figmatips #figmacomponents Pixellink Design System Lite: 👇 Pixellink Variable Toolkit beta:👇 00:00 Introduction to Design System Building 01:04 Overview of the Pixel Ink Design System Lite 01:57 Exploring the Design System in Figma 02:35 Understanding the Design Process and Human Experience 04:10 Color Sets and Styling in the Design System 05:13 Setting Up Variables and Scaling in the Design System 08:20 Building the First Component in the Design System 18:40 Creating Button Variants and Interactions 26:47 Building Additional Button Styles 34:30 Introduction to the Variable Toolkit 36:28 Conclusion and Next Steps