Skip to main content

How to collaborate on Figma design system file.

The Figma design system file is a library of design elements and components that can be used to design and build RG ecosystem apps. The design system also helps both the designers and developers to collaborate on the same design language.

Reference links:

In the current design system file all the elements and components are linked to the Storybook as references to maintain consistency.

There are two ways in which a guild member can contribute to the design system file.

1. Within the RG Figma Team​

Once the design system is published it will be available within the RaidGuild Figma team for anyone to pull the published components and use it to design RG applications to maintain consistency across the apps.

Any team member with edit access can update the existing components or add new components and publish the updated library.

Note: It is a good practice to duplicate the component artboard that you want to change/update. Once the required changes have been done and reviewed by a team member responsible for its management the changes can then be applied to the original component and pushed to the design library.

2. Outside the Figma team​

For a member who is a new contributor or is outside the Figma team can follow the following steps:

  • Access the file through the Figma link
  • Create a duplicate version of the file
  • Add/make changes to the components
  • Send the file for review with details on the changes made
  • Once approved the updated components will be copied to the main file
  • Publish changes to the library to make it available across the team

How to pull RG design library into a project​

If you are in the RG Figma team you will have access to the published design library. All the future changes made to the main file will prompt you to update the library in your design file.

Following are the steps to pull the design library in a Figma file that you are working on:

  1. On the Assets panel of your Figma file select the Team Library icon
image
  1. From the Library pop-up select the Raid Guild design library option and toggle it to enbale in your file
Screenshot 2023-07-12 at 12 46 17 AM
  1. Once enabled, all the design elements and components from the library will be available on your Assets panel to be able to use in your Figma project.

For members not inside the RG Figma team will have to go through the following steps:

  1. Duplicate the main Figma design system file to your drafts
  2. Create a Figma team project (this will require a Figma paid plan)
  3. Move the duplicate file into the team project created
  4. Go to Assets -> Click on Team Library icon -> Publish Library
Screenshot 2023-07-12 at 12 55 47 AM
  1. Once published, create a new Figma file/select the existing file you want to work on
  2. Go to Assets -> Click on the Team Library icon -> Select the RG design system library -> Toggle it on
  3. Now you're all set to use the RG design system library in your next design project 🎉

How to test RaidGuild design components inside Figma​

The new Figma update offers Dev mode which allows us to test the components in the playground, take references from dev resources and inspect code directly from the Figma.

  • Select the component
  • Toggle Dev mode
  • Select Open in the playground
  • Test it out!

Here is a short tutorial on how you can use Figma dev mode to test components and their variants inside Figma.

figma-dev-mode