Getting Started with Figma Components

The 88 Component Library is designed to help you build clean, consistent interfaces directly in Figma. Whether you’re starting from scratch or adding to an existing file, our system gives you a structured foundation so you can move faster and avoid design drift.

1. Open the Library

Before you begin, make sure the 88 Components Library file is published as a team library in Figma.

1. In Figma, go to the Assets panel.
2. Click Library (book icon).
3. Enable the 88 Components Library toggle.

This will make all components, colors, and text styles available in your project.

2. Explore the Pages

When you open the 88 Figma Kit, you’ll see a set of pre-organized pages in the left sidebar:

• Design System: Core foundations such as Colors, Typography, Spacing & Grids, Shadows, Iconography, and Buttons & Inputs.
• Sections: Prebuilt layout sections including Navigations, Hero Headers, Features, Testimonials, FAQs, Contact Forms, Footers, CTAs, and more.

3. Customize with Variables

Most components are powered by variables, which means you can adapt them to your design system without breaking consistency.

• Colors: Swap brand colors or apply alerts (success, warning, error).
• Typography: Change headings, body text, or labels with predefined text styles.
• Spacing: Adjust padding and layout using tokens that scale across breakpoints.

4. Work with Instances

When you place a component, Figma creates an instance. Instances allow you to:

• Change text, images, and icons.
• Resize components while maintaining structure.
• Swap between variations (e.g., button sizes, input states).
  

‍

If you need deeper edits, use Detach Instance — but only if necessary, as detached components lose their connection to updates.

5. Best Practices

• Always use variables instead of custom colors or fonts.
• Build layouts with the grid system to keep spacing consistent.
• Avoid detaching unless you’re creating a new master component.
• Reuse, don’t rebuild — copy and paste from the library whenever possible.

‍

You’re now ready to start designing with the 88 Component Library. Next, explore Colors & Styles to keep your projects consistent and cohesive.