Scope Color
What It Does
The Scope Color node defines specific variable scopes for color tokens in Figma. It allows precise control over where and how color variables can be used within the Figma interface.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| Token | The design token to add scopes to | Token | Yes |
| All Fills | Include all fills scope | Yes/No | No |
| Effects | Include effects scope | Yes/No | No |
| Frame Fill | Include frame fill scope | Yes/No | No |
| Shape Fill | Include shape fill scope | Yes/No | No |
| Stroke | Include stroke scope | Yes/No | No |
| Text Fill | Include text fill scope | Yes/No | No |
Outputs
| Name | Description | Type |
|---|---|---|
| Token | The token with color scopes applied | Token |
How to Use It
- Drag the Scope Color node into your graph.
- Connect a color token to the "Token" input.
- Check the boxes for contexts where the color should be available (e.g., Text Fill, Stroke).
- The output token will be available in Figma only for the selected contexts.
Tips
- Only select the scopes that make sense for your color's intended use.
- Using more specific scopes creates a cleaner variables panel in Figma.
See Also
- Scope All: For making a color available in all possible contexts.
- Scope By Type: For automatically assigning appropriate scopes based on token type.
Use Cases
- Text-Only Colors: Create color variables that only appear as options for text fills.
- Stroke-Specific Colors: Define colors that are only available for strokes but not fills.
- UI Color Organization: Separate colors by their function to create a more intuitive design system.