RFC: Component Instance Handling

[MiguelFranken]

Status: Work in Progress

RFC: Efficient Handling of Figma Component Instances for Vue Code Generation

Summary

This RFC outlines a proposed method for converting Figma designs into Vue code, focusing specifically on the treatment of Figma component instances. Figma's design system is component-based, mirroring the modular architecture of modern web frameworks such as Vue. Our approach involves recognizing and appropriately structuring these Figma component instances within the generated Vue codebase, ensuring each Figma component (and its instances) translates into distinct Vue components.

Background

Figma operates on a component-instance model where the main component acts as a template, and instances are copies that inherit its attributes but can also override them. This model is beneficial for maintaining consistency across designs while allowing variations. Our goal is to replicate this model in Vue to maintain design integrity, enhance code maintainability, and simplify project scalability.

Objectives

• Preserve Component Hierarchies: Maintain the structured hierarchy of Figma components in the Vue code to keep the component logic and relationships clear.
• Facilitate Code Maintenance: Automatically generate separate Vue files for each component and instance to make updates more manageable.
• Promote Reusability: Enable components to be reused across the application without code duplication.
• Synchronize Updates: Automatically propagate changes from master components to instances, mirroring Figma's update flow.

Proposed Solution

Step-by-Step Process:

1. Component and Instance Identification:

   • Upon selection of a Figma node, scan its entire node tree to identify any component instances.
   • Generate Vue components for the selected node and for each identified instance. The main Vue file for the selected node will import its child components as needed.

2. Example of Generated File Structure:

   • ButtonGroup.vue: Represents the selected main component, which includes Button.vue as a child component (imported instance).
   • Button.vue: Stands as a reusable component instance.

3. Customization Options:

   • Provide settings to customize the naming conventions and other generation parameters through the plugin's user interface. This flexibility helps adapt the output to various project standards or personal preferences.

Alternatives Considered

• Single File Approach: Generate one Vue file containing all component definitions. While this might simplify initial setup, it could complicate future maintenance and reduce modularity, which are critical for larger projects.