Docs

Code Injection

Frontier’s Code Injection feature allows you to seamlessly integrate generated components from Figma directly into your project. By automatically detecting missing components and generating the necessary files, this feature eliminates manual steps, making your workflow faster and more efficient.

Suggest Edits

Benefits of Code Injection:

  • Efficiency: Automatically generate components and inject them directly into your project, reducing manual coding.

  • All-in-One Solution: Get all required component files—TSX/JSX, CSS, assets—generated with a single click.

  • Consistency: Ensure that all necessary elements for each component are correctly generated, reducing implementation errors.

  • To use code injection you must first start by providing a Figma design, you can find more info about this step here

  • Once the link provided, you will see the list of components on the right panel, you must then select the component that you wish to inject, for example: a button, a modal or checkbox.

  • After finding the component that you wish you inject, click on the “Inject Component” button

  • You will then be asked to provide a name and path for your injected component, a default name and path are also provided by Frontier.

  • Any missing components (e.g., button, checkbox) will be generated based on your selection, along with all necessary files and assets (TSX/JSX, CSS, etc.). For frames with nested components, a checkbox will appear, allowing you to decide whether to inject those nested components as well.

  • Assets Handling: If your selected frame includes assets, Frontier will prompt you with a checkbox to include those assets during the injection process, streamlining the process of managing images, icons, and other resources.

  • For Tailwind Users: You can choose to inject the Tailwind config file using a checkbox option when generating components, ensuring full compatibility with your Tailwind setup.

  • Now the code has been generated! Frontier will directly inject the code into your codebase, combining your existing components (e.g. input fields) with your existing components; non-component elements, like texts or icons, are automatically included inline.

  • Frontier will intelligently integrate components, however it is also possible to manually adjust the inject code if needed to perfectly fit your specific needs and requirements.

Updated 9 days ago