Skip to content

Team Settings

Introduction

The Team Settings panel is the central hub for administrating your Grails team. Here, you can invite colleagues, manage access roles, monitor your storage capacity, and configure essential integrations like the Figma Plugin to ensure a smooth design-to-code workflow.

Depending on your role (Admin, Editor, or Viewer), you will have access to different tabs and actions within this panel.

Open it with the team button in the top bar — your team’s name and plan, next to your avatar. To go to another team, open the user menu and choose My Teams.

Overview

The panel is organized into three main tabs:

  • Settings (Admins only): Change the team name, view storage limits, and delete the team.
  • Members: Invite new people, manage pending invitations, and update member roles.
  • Integrations (Admins and Editors): Manage Figma tokens necessary for the plugin to sync variables.

Settings Tab

This section is restricted to Team Admins and provides high-level control over the team’s lifecycle:

  • Team Name: Update the display name of your team.
  • Storage & Limits: Only admins see this breakdown; editors and viewers see the banner described below. A visual breakdown of what your team is using, in three segments — Components (thumbnails, variants and graph snapshots), Docs (documentation images and files) and Other (everything else, derived by subtraction from the total, so nothing goes uncounted).
  • Danger Zone: Allows you to permanently delete the team. Use this with caution, as it will erase all projects, synced components, and documentation.

Team Settings on its Settings tab: the team name, Storage & Limits and the Danger Zone

Storage & Limits: what the team uses of its plan, by kind, and its counts

Members Tab

Collaboration requires the right people. From the Members tab, you can control who has access to your team’s vault:

The Invite Team Member dialog: the email address and the role

Active Members

See everyone currently in the team along with their roles:

  • Admin: Full access, including billing and destructive actions.
  • Editor: Can sync from Figma, create flows, and edit variables.
  • Viewer: Read-only access to browse components and documentation.

Admins can use the options menu (•••) next to any member to change their role or remove them from the team.

Pending Invitations

View all sent invitations that haven’t been accepted yet. You can see the email, assigned role, and expiration date. If an invitation gets lost, you can resend it or revoke it entirely.

Integrations Tab

Grails relies on an active connection to your Figma workspace. In this tab, you configure the necessary tokens for syncing:

Plugin Token

This is the authentication token you must paste into the Grails Figma Plugin. It securely links your Figma file directly to this specific team project in Grails. Without this token, the plugin cannot export components or variables to your vault.

Figma Personal Access Token (PAT)

Setting up a Figma Personal Access Token enables advanced automated synchronization features directly from the web platform.

What is it for? The PAT allows Grails server to securely communicate with the Figma API on your behalf. It is required if you want Grails to automatically subscribe to Figma library updates (webhooks). When you publish changes in Figma, Grails will be notified and can automatically sync the updates in the background.

How to configure it:

  1. Click Manage PAT in the Integrations tab. (Only Team Admins can perform this action).
  2. Follow the link to your Figma account settings to generate a new Personal Access Token.
  3. Paste the token into the input field and click Validate & Save.
  4. Once validated, Grails will fetch all the Figma Teams you have access to.
  5. Toggle the switch next to any Figma Team to subscribe to its library updates.

Code Sync

The repositories that upload their tokens and components to this project with Grails Code Sync. Admins and Editors see it here, under API Keys.

Each repository has a card with its last component sync and its last token sync: the commit, the branch, how long ago, whether it ran in CI or locally, and whose API key ran it. If the person who owns that key has left the team, it says a former member; if they are in the team but have no name on their profile, a teammate. A component sync is Complete, Incomplete (some components did not arrive), In progress or Abandoned. A repository that has uploaded tokens has Open in Tokens, which opens the Code side of the Tokens page on that repository.

If your plan no longer includes Code Sync, the repositories that were already connected keep their cards, under a warning that new syncs are refused.

If the read fails, this section says it could not load the repositories. It never says there are none, because that would send you to connect one that is already connected.

To connect a repository:

  1. Code Sync on the team’s plan. If your plan does not include it, this section says so and offers nothing else.
  2. An API key with the write:code scope. Create key opens the API keys panel on its form with that scope already picked. Someone who cannot create API keys is not offered the button.
  3. In your component library’s repository, grails-cli init --write, then grails-cli sync, with the key in GRAILS_API_KEY. Install the CLI there with npm i -D grails-cli (it needs Node 20 or newer), or write npx before each command. init writes grails.code.json, which says which branch syncs: without a branch declared there, a sync is refused, and on any other branch it uploads nothing. To run it on every push, Run it from GitHub Actions shows the workflow to copy into .github/workflows/grails-cli-sync.yml, with the key saved as a repository secret and the same branch under branches:. The workflow uses npx --yes grails-cli, which fetches the latest release from npm on every run; pin a version in it to choose when a new release reaches your pushes.