gravity-apply-tokens

Apply Gravity design system tokens to Figma screens.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/codesour-design/gravity --skill gravity-apply-tokens
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gravity-apply-tokens
Source: https://github.com/codesour-design/gravity/tree/main/.agents/skills/gravity-apply-tokens
Command: npx skills add https://github.com/codesour-design/gravity --skill gravity-apply-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent Gravity designs in Figma by ensuring screens use approved design system tokens instead of manually entered values that can drift from the source library.

Core Features & Use Cases

  • Design Token Application: Applies Gravity component, typography, color, and spacing tokens when creating or updating Figma screens.
  • Library-Based Building: Guides designers and agents to import shared components, styles, and variables from the official Gravity design system.
  • Validation Workflow: Enforces discovery, screenshot verification, and final checks to keep Figma output aligned with the intended design system.

Quick Start

Use the gravity-apply-tokens skill to update this Figma screen using the correct Gravity design system components, styles, colors, and spacing tokens.

Frequently Asked Questions about gravity-apply-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Gravity design tokens consistently in Figma?

Yes, you can use Gravity design system tokens to update existing Figma screens by importing shared components, styles, and variables from the official library. The workflow also includes screenshot verification and final checks to validate alignment.

How do I validate Figma screens against the Gravity design system?

Validating Figma screens against the Gravity design system involves a workflow of discovery, screenshot verification, and final checks. This ensures all typography, color, and spacing variables match the approved design tokens without manual overrides.

What happens if I use hard-coded properties instead of Gravity design tokens?

Using hard-coded properties instead of Gravity design tokens causes inconsistent Figma designs that drift from the source library. The skill prevents this by enforcing the binding of library resources for all component, color, and spacing values during screen construction.

Do I need to import the Gravity library before styling typography in Figma?

Yes, you need to import the official Gravity design system library into Figma before styling typography. Binding these shared library styles and variables is required to maintain consistent screen construction and ensure updates reflect approved tokens.