Skip to content

fix: bind backgroundBlur radius as Figma variable instead of raw value#3899

Open
akshay-gupta7 wants to merge 3 commits into
mainfrom
akshay/fix-background-blur-application
Open

fix: bind backgroundBlur radius as Figma variable instead of raw value#3899
akshay-gupta7 wants to merge 3 commits into
mainfrom
akshay/fix-background-blur-application

Conversation

@akshay-gupta7

@akshay-gupta7 akshay-gupta7 commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Why does this PR exist?

Closes #3886

Background blur tokens applied the radius as a raw number instead of binding it as a Figma variable. Box shadow already handled this correctly via setBoundVariableForEffect — background blur was missing the same logic.

What does this pull request do?

  • Calls figma.variables.setBoundVariableForEffect on the blur radius when a variable reference exists, matching box shadow behaviour in setEffectValuesOnTarget
  • Passes the token name through applyBackgroundBlurValuesOnNodesetBackgroundBlurOnTarget to enable the variable lookup
  • Falls back to raw value if no variable is found or the API throws
  • Adds tests for applyBackgroundBlurValuesOnNode and extends setBackgroundBlurOnTarget tests to cover variable binding and fallback cases

Testing this change

  1. Create a Dimension token (e.g. blur.background = 12)
  2. Export variables so a Figma variable is created for it
  3. Select a frame → right-click token → apply as Background Blur
  4. Check the blur in Figma's design panel — radius should show a bound variable

Additional Notes (if any)

@changeset-bot

changeset-bot Bot commented Jun 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 073ad0a

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 Patch

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

@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

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

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Figma plugin’s background blur application so that the blur radius can be bound to a Figma Variable (when variable/style application mode is enabled) instead of always applying a computed raw numeric radius.

Changes:

  • Updated setBackgroundBlurOnTarget to optionally bind BACKGROUND_BLUR.radius to a Variable resolved from the token name.
  • Updated background blur application flow to pass the token name through and await the blur application.
  • Added unit tests covering variable binding behavior and the updated apply function behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
packages/tokens-studio-for-figma/src/plugin/setBackgroundBlurOnTarget.ts Adds optional variable binding for BACKGROUND_BLUR radius and makes the helper async.
packages/tokens-studio-for-figma/src/plugin/setBackgroundBlurOnTarget.test.ts Adds test coverage for the new variable-binding behavior.
packages/tokens-studio-for-figma/src/plugin/applyBackgroundBlurValuesOnNode.ts Passes the backgroundBlur token name into the blur setter and awaits it.
packages/tokens-studio-for-figma/src/plugin/applyBackgroundBlurValuesOnNode.test.ts New tests ensuring correct invocation and guarding behavior for background blur application.

@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Commit SHA:64a4d5393370004c50a333192b7a435421856c48

Test coverage results 🧪

Code coverage diff between base branch:main and head branch: akshay/fix-background-blur-application 
Status File % Stmts % Branch % Funcs % Lines
🟢 total 59.67 (0.03) 51.34 (0.05) 57.98 (0) 60.15 (0.02)
🟢 packages/tokens-studio-for-figma/src/plugin/applyBackgroundBlurValuesOnNode.ts 100 (50) 100 (40) 100 (0) 100 (50)
🟢 packages/tokens-studio-for-figma/src/plugin/setBackgroundBlurOnTarget.ts 94.44 (3.54) 91.66 (16.66) 100 (0) 94.11 (4.11)

@akshay-gupta7 akshay-gupta7 self-assigned this Jun 17, 2026
@akshay-gupta7 akshay-gupta7 requested a review from six7 June 17, 2026 06:18
@akshay-gupta7 akshay-gupta7 marked this pull request as ready for review June 17, 2026 06:18
@anathaniel-TS

Copy link
Copy Markdown

🛡️ Hyma Compliance Check

No compliance findings — 0 findings across reviewed files.

Categories checked: ROPA · Subprocessor · Access Control · AI Provider Routing · Secrets/Credentials · Policy Gap

Assessment: Binds background blur radius as a Figma variable (setBackgroundBlurOnTarget.ts, applyBackgroundBlurValuesOnNode.ts). Figma internal API only — no backend calls, no personal data, no new subprocessors.

ℹ️ This check is informational.
🛡️ Hyma Compliance Check · automated

@anathaniel-TS

Copy link
Copy Markdown

🛡️ Hyma Compliance Check

No compliance-relevant changes detected

5 file(s) scanned · 0 findings

Changes add Figma variable binding for background blur tokens (setBackgroundBlurOnTarget now calls figma.variables.setBoundVariableForEffect), with new test coverage. Changes are local Figma plugin rendering behaviour — no personal data, new network calls to external services, or access control changes.

ℹ️ This check is informational.
🛡️ Hyma Compliance Check · automated

@anathaniel-TS

Copy link
Copy Markdown

🛡️ Hyma Compliance Check

No compliance-relevant changes detected

Files changed in this PR were reviewed against the compliance taxonomy (ROPA, Subprocessor, Access Control, AI Provider Routing, Secrets/Credentials, Policy Gap). No findings were identified.

🛡️ Hyma Compliance Check · automated

@anathaniel-TS

Copy link
Copy Markdown

🛡️ Hyma Compliance Check

No compliance-relevant changes detected

2 file(s) scanned · 0 findings

ℹ️ This check is informational.
🛡️ Hyma Compliance Check · automated

@anathaniel-TS

Copy link
Copy Markdown

🛡️ Hyma Compliance Check

No compliance-relevant changes detected

Files scanned · 0 findings

No new external calls, personal data processing changes, or authentication/authorization modifications detected. No compliance action required.

ℹ️ This check is informational.
🛡️ Hyma Compliance Check · automated

@anathaniel-TS

Copy link
Copy Markdown

🛡️ Hyma Compliance Check

No compliance-relevant changes detected

5 file(s) scanned · 0 findings

ℹ️ This check is informational.
🛡️ Hyma Compliance Check · automated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Background blur token should bind as Figma variable, not static value

3 participants