11.6 Update and Overwrite

This topic provides information on Update and Overwrite

If a component of the same type (individual page, business, transaction, or widget) and same name already exists, you will be prompted to either update the existing component or overwrite it.

Figure 11-26 Update and Overwrite



  1. Update

    Only selective updates are applied, with the following rules:

    • The Hooks.js file remains unchanged.
    • Custom attributes from the new metadata are appended to the existing ones.

      If the conditions for the component differ between the existing and new metadata, you'll be prompted with two options:

    • Merge with Figma Conditions:

      Allows the user to choose how to combine the old and new conditions:

      • Use the old condition
      • Use the new condition
      • Combine both with an AND operator
      • Combine both with an OR operator
      • Write a custom condition manually

      Figure 11-28 Update - Merge with Figma Conditions



    • Overwrite by Figma Conditions:

      Replaces all existing conditions with the ones from the new metadata.

      Merge Summary:

      As part of this process, a Merge Summary step is shown to help users understand what has changed between the design in Figma and the existing application logic.

      Merge Summary Categories

      1. New: Conditions that didn’t exist previously and have been added in the current design.
      2. Modified: Existing conditions that have been updated or changed in the current design.
      3. Removed: Conditions that were present earlier but have been removed in the current design.
      4. Retained: A condition that existed in the old design and was not present in the new Figma design, but the user chose to retain it without any changes during the merge process.

      Figure 11-29 Update - Overwrite by Figma Conditions



  2. Overwrite:

    The entire metadata of the existing component will be completely replaced with the new metadata.

  3. For different device types:
    • Desktop and mobile attributes are merged.
    • If there’s a conflict between attribute, mobile attribute values take precedence.