FCT-1306 Code Connect POC #3019
Open
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
tylermorrisford
commented
Dec 12, 2024
tylermorrisford
commented
Dec 12, 2024
packages/components/buttons/link-button/src/link-button.figma.tsx
Outdated
Show resolved
Hide resolved
tylermorrisford
force-pushed
the
FCT-1306-code-connect
branch
from
6644d36 to
cce888e
Compare
tylermorrisford
requested review from
stephsprinkle,
jaikamat,
ddouglasz,
ByronDWall and
misama-ct
and removed request for
a team
tylermorrisford
force-pushed
the
FCT-1306-code-connect
branch
from
b504935 to
cd0c297
Compare
tylermorrisford
force-pushed
the
FCT-1306-code-connect
branch
from
cd0c297 to
a865d3e
Compare
|
Putting this into 'on hold' status until there is a decision on expanding access to Figma Dev Mode. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
This PR is a POC of both Figma's code connect CLI tool and a homegrown script meant to assist with the creation and auditing of Figma connect files. The script is only a starting point meant to show a POC of how we would maintain the proper coverage of code connect files after they are generated. Inline comments point out the difference in the results of these two methods.
Description
In testing the Figma's code connect CLI we learned that it is largely a manual process; the user must supply the figma design component url(as in manually copy it out of the Figma UI) and then manually map the props(the largest part of this effort) before making a few other updates to the file before it is ready to be 'published' to Figma, which results in the 'connection' we want.
The decision was made to ignore the mapping of props between components and figma assets, and to focus on linking the components to the figma design components as this still provides a much easier method for understanding the component tree of a given design.
The script added in 5b5bf19 requests component information and returns a map to be used in the
scan-figma-connectionscript, which attempts to crawl the./packages/components/directory and locate the root component file, then if a.figma.tsxfile is not found, it checks the aformentioned map for a matching figma component and generates the figma connect file based on a template. If the.figma.tsxfile is found, the content is read and checked for strings like 'TODO' and `<placeholder> '. The intent here is to give us an easy way to know what figma connect files we have that are incomplete.From there, we use
npx figma connect publishto register the connection between code and figma assets.Challenges
-Some components (DataTableManager, Icon Master) are difficult to map to figma assets due to differences in the way they are named in this codebase vs. composed in the design system.