Build it in Figma: Create a design system — Components

TL;DR

Learn how to create components and grids in Figma to build a cohesive design system.

Transcript

uh let's build a design system asterisk uh and if any of you are wondering what that asterisk is for it's because i talked last time about how uh design systems aren't aren't just the figma file there's always so much more to it there's communication rules documentation where do you put your documentation is it all in figma do you have it sitting s... Read More

Key Insights

• Design systems are not just about the design file in Figma, but also include communication rules, documentation, and code that accompanies the design system.
• Figma's automatic version history allows you to see the changes made to a design system over time.
• Creating helper components with underscore names can help structure your design system and make it easier to publish to your team.
• Grids and spacing are important considerations in design systems, and there are various techniques and tools to implement them.
• Naming conventions for components, frames, and styles can help organize and navigate your design system.
• Using components and auto layout in Figma can make it easier to create and maintain consistent and scalable designs.
• Documentation is crucial for design systems, and it can be added to text styles, components, and notes components within Figma.
• Experimenting with different states and variations of components can help make your design system more robust and versatile.

Questions & Answers

Q: How do you create components in Figma?

To create components in Figma, select the elements you want to turn into a component and click on the "Create Component" button. Name the component and it will be saved in your assets panel for reuse.

Q: How can grids be used to ensure consistent spacing in a design system?

By using grids in Figma, you can set up columns, margins, and gutters to ensure consistent spacing and alignment across your design system. This helps maintain visual harmony and organization.

Q: What is the purpose of using underscore naming for design system components?

Underscore naming convention is used to differentiate design system components from other components in Figma. It helps organize and categorize components within your design system for easier management and collaboration.

Q: How can you create different states for components in Figma?

To create different states for components in Figma, you can duplicate the original component and modify its properties to represent different states such as active, disabled, filled, or error. This allows for more flexibility in designing and using components within your design system.

Q: Can you explain the benefits of using auto layout in components?

Auto layout in Figma allows components to adapt to different content sizes and layout changes. It ensures consistent spacing and responsiveness within components, making them more versatile and adaptable for various design needs.

Summary & Key Takeaways

• Design systems are more than just a Figma file, they include communication rules, documentation, and code.

• Start by creating design system components and use underscore naming to differentiate them from other components.

• Use grids to ensure consistent spacing and alignment across your design system.