Feature Request: Add exclusion syntax for `figma.children()` to filter out specific components

[doliva891124]

Description

Currently, figma.children() in Code Connect allows capturing children by inclusion (specific names, wildcards, or arrays), but there's no way to exclude specific children while capturing all others. This limitation makes it difficult to handle common patterns where we want "all children except X".

Current Problem

When building a page template component that contains both fixed elements (like headers) and dynamic content slots, we need to capture all children except certain fixed components.

Real-world example:

Figma Component Structure:
├── Template_Overview
│   ├── Frame 47994
│   │   ├── Page-Header    // Fixed component, always present
│   │   └── swapper        // Dynamic slot for Table, Panel, etc.

Current Workaround Limitations

1. Listing all possible children explicitly:

figma.children(['Table', 'Panel', 'Card', 'Form', 'Widget'])

Problem: Requires knowing all possible components upfront and updating the list when new components are added.

2. Capturing all and documenting:

figma.children('*') // Captures Page-Header too

Problem: Includes unwanted components that developers must manually filter.

3. Restructuring Figma files: Problem: Not always feasible in established design systems or when working with shared libraries.

Proposed Solution

Add exclusion syntax to figma.children():

// Option 1: Exclusion with '!' prefix
figma.children(['*', '!Page-Header'])

// Option 2: Options object
figma.children('*', { exclude: ['Page-Header'] })

// Option 3: Exclusion in wildcard patterns
figma.children('*:not(Page-Header)')

Expected Usage

figma.connect(
    'https://www.figma.com/design/[...]',
    {
        props: {
            // Capture all children except Page-Header
            mainContent: figma.children(['*', '!Page-Header']),
            // Or
            mainContent: figma.children('*', { exclude: ['Page-Header', 'Footer'] }),
        },
        example: (props) => html`
            <template>
                <fd-page-header>
                    <!-- Fixed header -->
                </fd-page-header>
                
                <div class="dynamic-content">
                    ${props.mainContent}
                </div>
            </template>
        `,
    },
)

Benefits

1. Maintainability: No need to update Code Connect files when new child components are added
2. Flexibility: Better support for template/layout patterns common in design systems
3. Developer Experience: More intuitive API that matches common use cases
4. Consistency: Similar to CSS :not() selector and other exclusion patterns in web development

Alternative Considerations

If full exclusion syntax is complex to implement, even a simple negation operator would help:

figma.children(['!Page-Header', '!Footer']) // Capture all except these

Additional Context

This pattern is extremely common in:

• Page templates with fixed headers/footers and dynamic content areas
• Card components with optional but excluded decorative elements
• Layout components where certain children need different treatment
• Dashboard templates with fixed navigation but dynamic widget areas

Current Impact

Without this feature, teams must either:

1. Maintain brittle lists of allowed components
2. Restructure their Figma files (not always possible)
3. Add manual filtering notes in code comments
4. Create overly complex Code Connect configurations

This feature would significantly improve the developer experience when working with component-based design systems.

---

Environment:

• @figma/code-connect version: latest
• Use case: HTML/Vue/React components with dynamic slots
• Design system: Enterprise-level with 100+ components

[karlpetersson]

Thanks for bringing this up @doliva891124! This makes a lot of sense and we'll look into how to best support this.

[adbutterfield]

I also just hit a case where this would be the perfect solution.