Efficient way to connect a lot of components

[origami-z]

Great idea of the code connect!

• Code Connect CLI version 1.2.0
• Operating system MacOS
• Code Connect file, doesn't matter here

I have a large Figma file (300+ components), most of which can't be automatically matched (280+). Using the CLI menu takes too much time to go through multiple levels. I wish I can export all Figma components from the list (with page, name, URL) and edit them against my source code, then feedback to the CLI to create files for me.

Additional feedbacks:

1. First level "Select a link to edit" doesn't support filter like secondary menus, so I have arrow up / down hundreds times...
2. There are components named the same from different Figma pages, which means I can't distinguish them. Would be good to see the page name, maybe with a flag?
3. There are a bunch of ~~them~~ Figma components (e.g. . prefixed local components) will never match, is there a way to hide them, maybe through figma.config.json?
4. I have the reserve of Variant restrictions where multiple Figma components (collections) mapped to a single component with different prop. CLI skips creating .figma.tsx files after the first match. Would be good to consider this use case, maybe append multiple figma.connect blocks in a single file?

[slees-figma]

Hi @origami-z, this is all great feedback, thanks for the write up! We'll take this into consideration as we're planning upcoming improvements.

You should be able to exclude files you're not interested in matching via the config, though we should make this clearer in the CLI. See: https://github.com/figma/code-connect/blob/main/README.md#include-and-exclude

[origami-z]

You should be able to exclude files you're not interested in matching via the config, though we should make this clearer in the CLI. See: https://github.com/figma/code-connect/blob/main/README.md#include-and-exclude

I wasn't clear on my question, I want some way to exclude Figma components (e.g. . prefix in Figma means internal components), maybe it can be addressed similarly with a more efficient first level menu (search / filter / etc.)

[tomduncalf-figma]

Hi @origami-z, thanks for the clarification. That makes sense. It's not something we support right now but I'll discuss this with the team!

[adbutterfield]

I was in a similar situation, way too many components and CLI menu just didn't cut it. What I did was just make a node script, taking some inspiration from import-icons.ts, to grab all the components and filter out the ones I don't want.

I'm using the script to generate the documentUrlSubstitutions in my figma.config.json, but could easily take the same approach for generating the mapping files as well.