Skip to main content

Design System: Collaborating in Figma

The Figma Design System file is a central library of design components and elements, essential for building consistent RaidGuild applications and ensuring smooth collaboration between designers and developers.

The design elements in Figma are connected to Storybook, providing developers with live references and ensuring design consistency across projects.

How to Contribute to the Design System​

There are two primary ways guild members can contribute to the design system, depending on their access to the RaidGuild Figma team.

1. Contributing Within the RaidGuild Figma Team​

When the design system is published, it’s available to all members of the RaidGuild Figma team for use across RaidGuild applications, ensuring uniformity and brand consistency.

If you have edit access, you can:

  • Update existing components
  • Add new components
  • Publish updates to make them available across the team

Tip: It’s best practice to duplicate the component artboard before making changes. After edits are reviewed and approved by a team manager, the changes can be applied to the original component and published.

2. Contributing Outside the Figma Team​

For new or external contributors, follow these steps:

  1. Access the Figma Design System file
  2. Create a duplicate of the file
  3. Make your component edits or additions
  4. Submit the file for review, with details about the changes
  5. Upon approval, the updated components will be integrated into the main file and published

Using the RaidGuild Design Library in Your Projects​

As a RaidGuild Figma team member, you’ll have direct access to the published design library. You’ll receive prompts when updates are available, ensuring your project library remains up-to-date.

To pull the design library into your project file:

  1. In Figma, go to the Assets panel and select the Team Library icon.

    Enable Library

  2. From the pop-up, choose the Raid Guild design library and toggle it on to enable access in your file.

    Select Library

  3. All design elements and components will then be accessible in your Assets panel.

For Non-Team Members​

If you’re working outside the RG Figma team, here’s how to enable the design library:

  1. Duplicate the main design system file to your Drafts.

  2. Create a new Figma team project (requires a Figma paid plan).

  3. Move your duplicate file into the team project.

  4. Go to Assets > Team Library icon > Publish Library.

    Publish Library

  5. Once published, open or create a Figma file to work in.

  6. Go to Assets > Team Library icon > Select the RG design system library > Toggle it on.

You’re now set to use the RaidGuild Design System in your projects!

Testing Design Components in Figma​

The latest Figma Dev Mode allows for live testing of components in a playground, viewing dev resources, and even inspecting code.

  1. Select the component you want to test
  2. Enable Dev Mode
  3. Choose Open in Playground to explore

Refer to this tutorial for details on using Figma Dev Mode:

Figma Dev Mode