add figma guide#24
Open
anishpdoshi wants to merge 2 commits into
Open
Conversation
📝 WalkthroughWalkthroughThis pull request adds a new guide page documenting how to import Figma designs into Helium, along with updating the navigation configuration to reference the new page. The guide describes the complete workflow from initiating the import process through OAuth authorization, pasting Figma layer links, adding product IDs, and leveraging AI for paywall recreation. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@guides/importing-from-figma.mdx`:
- 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.
- Around line 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.
Comment on lines
+9
to
+11
| - 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. |
There was a problem hiding this comment.
Fix grammar and text issues in this section.
Several issues found:
- Line 9: "connect to figma" — capitalize "Figma" for consistency.
- 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?
- 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.
| - 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" |
There was a problem hiding this comment.
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.
Contributor
|
📝 Documentation updates detected! New suggestion: Improve Figma import guide with Steps component and polish |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
Adds a new guide and links it in navigation.
guides/importing-from-figma.mdxwith step-by-step instructions for connecting Helium to Figma (OAuth), selecting a layer link, adding product IDs/description, and importing designs; includes a screenshot referencedocs.jsonto includeguides/importing-from-figmaunder the Guides sectionWritten by Cursor Bugbot for commit 7621c72. Configure here.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.