Implement selective import of Variable Collections and Modes

[Copilot]

This PR implements selective import functionality for Figma Variable Collections and Modes, addressing the issue where users previously had to import all variables without any filtering options.

Changes Made

Core Functionality

• New Collection Selection Dialog: Created ImportVariablesDialog component that allows users to select specific variable collections and modes before importing
• Enhanced Import Logic: Updated pullVariables function to filter variables based on user selections
• New API Handler: Added getAvailableVariableCollections async message handler to fetch available collections from Figma

Technical Implementation

• Type Definitions: Added VariableCollectionSelection and SelectedCollections types for type safety
• Extended Options: Enhanced PullVariablesOptions to include selectedCollections parameter
• Filtering Logic: Implemented collection and mode filtering in both variable processing and theme creation
• UI Integration: Updated StylesDropdown component to use the new selection dialog

User Experience

• Users can now see all available variable collections with their modes
• Granular selection: choose entire collections or specific modes within collections
• Visual feedback with checkboxes and clear collection/mode hierarchy
• Maintains existing options (Convert to dimensions, Use rem values)
• Backwards compatible: when no selections are made, imports everything as before

Testing

• Added comprehensive tests for the new filtering functionality
• Tests cover collection filtering, mode filtering, and edge cases
• All existing tests continue to pass

Example Usage

When users click "Import variables" from the Styles dropdown, they now see a dialog like:

Variable Collections:
☑ Design System
  ☑ Light Mode
  ☑ Dark Mode
  ☐ High Contrast
☐ Brand Colors
  ☐ Primary
  ☐ Secondary

Only the selected collections and modes will be imported, creating token sets accordingly.

Fixes #3379.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: a08d961b047cf384b48ae3f69d852ea1b5cde9f8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[six7]

Seems to work fine, however the UI doesnt display the collection or mode names

[github-actions[bot]]

⤵️ 📦 ✨ The artifact was successfully created! Want to test it? Download it here 👀 🎁

[github-actions[bot]]

Commit SHA:a3b63453c1e75219ec9bff6a7a7bf83138171746

Test coverage results :test_tube:

Code coverage diff between base branch:main and head branch: copilot/fix-3379 

Status	File	% Stmts	% Branch	% Funcs	% Lines
:red_circle:	total	65.46 (-0.18)	57.31 (0.04)	62.68 (-0.47)	65.81 (-0.16)
:sparkles: :new:	packages/tokens-studio-for-figma/src/app/components/ImportVariablesDialog.tsx	27.58	16.66	8.69	30.18
:red_circle:	packages/tokens-studio-for-figma/src/app/components/StylesDropdown.tsx	81.25 (-7.63)	83.33 (8.33)	25 (-25)	81.25 (-7.63)
:sparkles: :new:	packages/tokens-studio-for-figma/src/app/hooks/useImportVariables.tsx	25.92	100	16.66	28
:red_circle:	packages/tokens-studio-for-figma/src/app/store/useTokens.tsx	52.13 (-0.58)	34.37 (-0.24)	55.55 (-0.7)	52.96 (-0.61)
:green_circle:	packages/tokens-studio-for-figma/src/plugin/controller.ts	98.21 (0.03)	100 (0)	75 (0)	100 (0)
:green_circle:	packages/tokens-studio-for-figma/src/plugin/pullVariables.ts	79.01 (-0.09)	61.93 (9.6)	82.6 (0)	79.6 (-0.23)
:sparkles: :new:	packages/tokens-studio-for-figma/src/plugin/asyncMessageHandlers/getAvailableVariableCollections.ts	100	50	100	100
:sparkles: :new:	packages/tokens-studio-for-figma/src/types/VariableCollectionSelection.ts	100	100	100	100

[github-actions[bot]]

Commit SHA:a3b63453c1e75219ec9bff6a7a7bf83138171746 Current PR reduces the test coverage percentage by 1 for some tests

[Copilot]

Seems to work fine, however the UI doesnt display the collection or mode names

Fixed in c29fad1. The variable collection and mode names were present in the data but not properly styled for visibility. I've improved the styling using Box components with proper text colors to make them clearly visible and added fallback display for any collections that might have missing names.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

[sonarqubecloud[bot]]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[six7]

@copilot getting some lint errors

[six7]

@copilot getting some lint errors

[six7]

Works fine! i get some linting errors on running yarn lint

--

@tokens-studio/figma-plugin:lint: cache miss, executing 749ae712cdb89c2a @tokens-studio/figma-plugin:lint: $ eslint . --quiet --fix @tokens-studio/figma-plugin:lint: @tokens-studio/figma-plugin:lint: /Users/six7/development/figma-plugin/packages/tokens-studio-for-figma/src/app/components/ImportVariablesDialog.tsx @tokens-studio/figma-plugin:lint: 118:15 error JSX props should not use arrow functions react/jsx-no-bind @tokens-studio/figma-plugin:lint: 128:15 error JSX props should not use arrow functions react/jsx-no-bind @tokens-studio/figma-plugin:lint: 151:21 error 'allModesSelected' is assigned a value but never used. Allowed unused vars must match /^/u @typescript-eslint/no-unused-vars @tokens-studio/figma-plugin:lint: 159:25 error JSX props should not use arrow functions react/jsx-no-bind @tokens-studio/figma-plugin:lint: 173:29 error JSX props should not use arrow functions react/jsx-no-bind @tokens-studio/figma-plugin:lint: @tokens-studio/figma-plugin:lint: /Users/six7/development/figma-plugin/packages/tokens-studio-for-figma/src/app/store/useTokens.tsx @tokens-studio/figma-plugin:lint: 72:9 error 'proUser' is assigned a value but never used. Allowed unused vars must match /^/u @typescript-eslint/no-unused-vars @tokens-studio/figma-plugin:lint: @tokens-studio/figma-plugin:lint: /Users/six7/development/figma-plugin/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts @tokens-studio/figma-plugin:lint: 64:9 error Unexpected use of continue statement no-continue @tokens-studio/figma-plugin:lint: @tokens-studio/figma-plugin:lint: ✖ 7 problems (7 errors, 0 warnings)

---

Also: test coverage report shows we've not covered enough of the new code to pass quality gates. lets make sure we cover that. you can check how we run test coverage in the package json

[six7]

try again on my last comment

[akshay-gupta7]

core is imported back as core/core, dark as dark/dark, etc.

https://github.com/user-attachments/assets/a8d93961-5e28-4566-a721-976078bc8709