Skip to content

add figma guide #24

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.

Sign up for GitHub

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

Open
anishpdoshi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

add figma guide #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7621c72
add figma guide
anishpdoshi Jan 22, 2026
b181592
add icon
anishpdoshi Jan 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
"guides/ways-to-show-paywall",
"guides/third-party-analytics",
"guides/custom-events",
"guides/storekit-testing"
"guides/storekit-testing",
"guides/importing-from-figma"
]
},
{
Expand Down
20 changes: 20 additions & 0 deletions guides/importing-from-figma.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
title: "Importing designs from Figma"
description: "You can import paywall designs from any Figma file you have view or edit access on. This is useful to get Helium to recreate pixel-perfect designs and use your assets."
icon: "figma"
---

Click "Create a paywall" and click "Connect to Figma".

- This will open up a new tab asking if you'd like to let Helium connect to your Figma account. (Note: Helium uses OAuth to connect to figma to read files/metadata). Click "Yes" to sync your account and be redirected back to Figma.
- Next you'll be prompted to paste in a layer link to import. To find this URL, go to your figma file and click on the layer you'd like to import into Helium. You can do by clicking the layer on the sidebar, clicking "Copy/Paste".
- Important: make sure to copy the link to the entire layer, and not a specific image/asset in figma.
Comment on lines +9 to +11

@coderabbitai coderabbitai Bot Jan 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix grammar and text issues in this section.

Several issues found:

  1. Line 9: "connect to figma" — capitalize "Figma" for consistency.
  2. Line 9: "redirected back to Figma" — should this be "redirected back to Helium" since the OAuth flow returns you to the app that initiated it?
  3. Line 10: "You can do by clicking" — missing word; should be "You can do this by clicking" or "You can do so by clicking".
📝 Proposed fix 
-- This will open up a new tab asking if you'd like to let Helium connect to your Figma account. (Note: Helium uses OAuth to connect to figma to read files/metadata). Click "Yes" to sync your account and be redirected back to Figma.
-- Next you'll be prompted to paste in a layer link to import. To find this URL, go to your figma file and click on the layer you'd like to import into Helium. You can do by clicking the layer on the sidebar, clicking "Copy/Paste".
+- This will open up a new tab asking if you'd like to let Helium connect to your Figma account. (Note: Helium uses OAuth to connect to Figma to read files/metadata). Click "Yes" to sync your account and be redirected back to Helium.
+- Next you'll be prompted to paste in a layer link to import. To find this URL, go to your Figma file and click on the layer you'd like to import into Helium. You can do this by clicking the layer on the sidebar, then clicking "Copy/Paste".
🤖 Prompt for AI Agents 
In `@guides/importing-from-figma.mdx` around lines 9 - 11, Fix capitalization and
clarity in the three sentences: change "connect to figma" to "connect to Figma"
and "Helium uses OAuth to connect to figma to read files/metadata" to use
"Figma"; change "redirected back to Figma" to "redirected back to Helium" to
reflect the OAuth return destination; and insert the missing word in the second
sentence by replacing "You can do by clicking the layer on the sidebar, clicking
"Copy/Paste"." with "You can do this by clicking the layer in the sidebar and
selecting 'Copy/Paste'." Ensure the rest of the wording remains intact and
capitalization of "Figma" is consistent throughout.


![Copy link to selection](/images/guides/figma/copy-link-to-selection.png)

- Add in product ids and an optional description. Text added to the description will also be fed to Helium's AI to help guide the figma import. You can add things like:
- "Make sure to use relative layouts"
- "Make a dark version of this paywall"
- "Make sure to use mobile friendly versions of the fonts"

@coderabbitai coderabbitai Bot Jan 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Hyphenate compound adjective.

"mobile friendly" should be hyphenated as "mobile-friendly" when used as a compound adjective before a noun.

📝 Proposed fix 
-  - "Make sure to use mobile friendly versions of the fonts"
+  - "Make sure to use mobile-friendly versions of the fonts"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- "Make sure to use mobile friendly versions of the fonts"
- "Make sure to use mobile-friendly versions of the fonts"
🧰 Tools
🪛 LanguageTool

[grammar] ~18-~18: Use a hyphen to join words.
Context: ...is paywall" - "Make sure to use mobile friendly versions of the fonts" - After...

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents 
In `@guides/importing-from-figma.mdx` at line 18, Update the copy that reads "Make
sure to use mobile friendly versions of the fonts" by hyphenating the compound
adjective to "mobile-friendly" so it becomes "Make sure to use mobile-friendly
versions of the fonts"; locate and edit the exact string in
guides/importing-from-figma.mdx (the quoted line) to apply the change.


- After submitting, Helium's AI will get to work recreating your paywall perfectly, regardless of what layout settings are applied to the layer. The paywall will be available to view/edit in the editor. Happy paywall testing!
Binary file added images/guides/figma/copy-link-to-selection.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.