Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1265 add support for asset tokens #1337

Merged
merged 15 commits into from
Oct 14, 2022
Merged

Conversation

swordEdge
Copy link
Contributor

@swordEdge swordEdge requested review from six7 and LiamMartens October 11, 2022 23:13
@vercel
Copy link

vercel bot commented Oct 11, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
figma-tokens ✅ Ready (Inspect) Visit Preview Oct 14, 2022 at 1:13PM (UTC)
ft-storybook ✅ Ready (Inspect) Visit Preview Oct 14, 2022 at 1:13PM (UTC)

if (values.asset && typeof values.asset === 'string') {
if ('fills' in node && data.asset) {
const imageUrl = values.asset;
const newPaint = await fetch(imageUrl).then((response) => response.arrayBuffer());
Copy link
Contributor

Choose a reason for hiding this comment

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

Does this work? I didn't think the Figma plugin sandbox supported sending network requests (as per https://www.figma.com/plugin-docs/making-network-requests/)

Copy link
Contributor Author

@swordEdge swordEdge Oct 12, 2022

Choose a reason for hiding this comment

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

It works. I'll suggest the related information if I find.
image

}

if (!matchingStyleId || (matchingStyleId && !(await trySetStyleId(node, 'fill', matchingStyleId)))) {
setImageValuesOnTarget(node, { value: new Uint8Array(newPaint), description: data.description });
Copy link
Contributor

Choose a reason for hiding this comment

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

Regardless we should probably not fetch the image itself until this point anyways. Because otherwise we'll be fetching the image and then setting a style (so not using the image buffer at all) - and then we're making a redundant request to the resource.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2022

Commit SHA:35149b8dd04bd5397effce1ecac602def945c7e7

Test coverage results 🧪

Code coverage diff between base branch:next and head branch: 1265-add-support-for-asset-tokens 
Status File % Stmts % Branch % Funcs % Lines
🟢 total 71.43 (0.16) 63.48 (0.32) 68.35 (0) 71.75 (0.17)
🟢 src/app/components/createTokenObj.tsx 100 (41.18) 88.57 (50.33) 100 (0) 100 (41.18)
✨ 🆕 src/plugin/setImageValuesOnTarget.ts 71.43 60 66.67 71.43
🟢 src/plugin/setValuesOnNode.ts 81.15 (0.3) 77.15 (0.28) 100 (0) 81.15 (0.3)
✨ 🆕 src/types/tokens/SingleAssetToken.ts 100 100 100 100

@github-actions
Copy link
Contributor

github-actions bot commented Oct 12, 2022

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

Copy link
Contributor

@LiamMartens LiamMartens left a comment

Choose a reason for hiding this comment

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

@six7 I'm wondering a little bit here what the actual behavior should be as to the combination of styles and assets. We can't really match on anything to find an existing style because the byte objects will always be different and the paint will have no reference as to what the image source is. I think we will just need to forego any style matching here because we can't check the equality of values

if (stylePaint.imageHash) {
const image = figma.getImageByHash(stylePaint.imageHash);
const bytes = await image?.getBytesAsync();
return bytes === imageArrayBuffer;
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe this will always return false since 2 objects created from different sources can never be identical. This would require a byte per byte comparison I think which - in my opinion - is not worth the performance trade off

FYI @six7

@six7
Copy link
Collaborator

six7 commented Oct 12, 2022

@six7 I'm wondering a little bit here what the actual behavior should be as to the combination of styles and assets. We can't really match on anything to find an existing style because the byte objects will always be different and the paint will have no reference as to what the image source is. I think we will just need to forego any style matching here because we can't check the equality of values

You're right, I feel we can do what you said and not do any style matching. We should still be able to apply a style if name matches, and in the future we could store asset tokens in non-local styles as well.

So then lets remove the parts of the code that do the matching and the style id backup parts?

@swordEdge swordEdge linked an issue Oct 12, 2022 that may be closed by this pull request
Copy link
Collaborator

@six7 six7 left a comment

Choose a reason for hiding this comment

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

Few things:

  • When we apply a token and we fail to fetch, can we show an ErrorNotification in the Figma UI? we do this in other places already (notifyTo..)

@six7 six7 merged commit 017e890 into next Oct 14, 2022
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.

Add support for Asset tokens
4 participants