Docs

Component Matching

Frontier's advanced component matching feature leverages intelligent algorithms to automatically identify correspondences between your Figma designs and existing code components. This capability enhances efficiency and maintains consistency across your projects.

Suggest Edits

Frontier integrates your design and development environments by first scanning your project's code components when you open the extension and then matching these with your Figma designs

Benefits of Component Matching

  • Efficiency: Significantly reduces the time required to convert designs into code by leveraging existing components.
  • Consistency: Ensures your UI components are consistent across different parts of your application by using a unified component library.

Initial Scan: As soon as you activate Frontier within VS Code, it scans your existing codebase to identify and catalog all available code components. This comprehensive scan ensures that Frontier is ready to match these components with your Figma designs accurately.

Next step is to link your Figma file to start the matching process:

  • From the Left Panel: - Copy Link: Use CMD + L (Mac) or CTRL + L (Windows/Linux) on Figma to copy the link to your intended design.

Once you’ve obtained the URL, paste the link into the “Provide Figma URL” section in the extension and click on “View Code” to load your design.

NOTE: it is also possible to paste a Figma design link on the top right section of the right panel, in the “Generated file” section:

A new window should appear with the content of your Figma project. After completing its analysis, Frontier will provide a Design Scan and also Matching Process:

  • Design Scan: Identifying all the design components in the given Figma file.

  • Matching Process: Matching these Figma components to the most appropriate existing code components cataloged during the initial scan.

You also have the possibility to see Optimal Property Suggestions. For each matched component, Frontier suggests the best properties that align with the Figma design, ensuring functional and fidelity.

If Frontier’s automatic suggestions don’t align with your needs, you can manually override the matches to select a different component.

  • How to Override: Access the override options in the right panel by selecting a component and choosing a different match or modifying properties.

Component matching by Frontier effectively bridges the gap between design and development, automating routine coding tasks and allowing developers to focus on more complex aspects of application development

Updated 9 days ago