Using the Component Library with Figma:
A Collaborative Workflow for Designers and Developers

The Component Library is a powerful tool designed to streamline website development by providing ready-to-use components with corresponding Figma designs.
This guide will walk you through the process of effectively utilizing the Component Library and its associated Figma resources.

For Designers: From Discovery to Prototype

Explore Components

  1. Visit the Component Library website.
  2. Navigate to a page (e.g., Layouts, Navbars, Headers) to preview components in a live environment.
  3. Evaluate the component's layout, responsiveness, and animation to see if it aligns with your design requirements.

Find and Use the Corresponding Figma Component

  1. Click on Open Figma Component Library to access the Figma file.
  2. Navigate to the Folder that matches the components name that you desire (e.g, Layout4 will be located in the Layouts Folder).
  3. Use the search function (CTRL-F for Windows / CMD-F for Mac) in Figma to locate the matching wireframe component by name (e.g., Layout4).
  4. Copy the selected wireframe component into your own Figma file.

Style the Component for Prototyping

  1. Customize the wireframe component in Figma to match your design requirements.
  2. Apply your project's branding, typography, colours, and other stylistic elements.
  3. Create a finalized prototype to pass on to the developer.

For Developers: From Design to Implementation

Getting Started

  1. Visit the Component Library homepage.
  2. Click on View Documentation for Installation.
  3. Follow the provided steps to install the required dependency and configure Tailwind CSS in your application.

Locate the Required Component

  1. Refer to the design handed over by the designer and identify the component name (e.g., Layout4).
  2. Visit the Component Library website, navigate to the relevant page (e.g., Layouts), and use the search function to locate the corresponding component (e.g., Layout4).
  3. Preview the component to understand its layout, responsiveness, and animation.

Access and Copy the Code

  1. Click 'View Code' to open the source code of the selected component.
  2. Click 'Copy Code' to copy the component's code.

Integrate the Component

  1. In your project, create a new file for the component (e.g., Layout4.tsx).
  2. Paste the copied code into the file.
  3. Apply custom styling to the component to match the finalized Figma design using Tailwind CSS or another preferred method.
  4. Import the component into the page.

Collaborative Workflow: Example

  • Designer's Steps: Open the Figma Component Library, locate Layout4 in the Layouts folder, and copy it into your Figma file. Style the wireframe to align with the project's branding and create a prototype.
  • Developer's Steps: Use the Component Library website to locate Layout4, preview the component, copy its code, and integrate it into the project. Style the component to match the designer's finalized prototype.

Key Features of the Component Library

  • Live Previews: View components on the website to evaluate their layout, responsiveness, and animation before integrating them.
  • Figma Integration: Each code component is paired with a wireframe version in Figma, ensuring consistency and easy handoff.
  • Search Functionality: Quickly find components in both the website and Figma file by name.
  • Customizability: Components are built for seamless adaptation to your project's needs.

Tips for a Smooth Workflow

For Designers:

  • Share your styled Figma file with the development team, clearly linking each component by name to its code equivalent.
  • Regularly explore new components in the library for inspiration and updates.

For Developers:

  • Collaborate closely with designers to ensure alignment between the Figma design and implementation.
  • Preview the compnent on the website to confirm layout, responsiveness, and animation.