Modifying Behavior of Components Imported From Figma to Amplify

AWS Amplify Studio allows you to import components from Figma directly into React components generated using the amplify-ui primitives.

Like most code generation tooling, it is one-directional. If you modify the generated React component, the amplify CLI will overwrite your changes.

/***************************************************************************
 * The contents of this file were generated with Amplify Studio.           *
 * Please refrain from making any modifications to this file.              *
 * Any changes to this file will be overwritten when running amplify pull. *
 **************************************************************************/

Fortunately, the Amplify team built a straightforward method for modifying the properties of generated components. You can pass an object to the overrides property when using a generated component to change component behavior.

<ProfileDisplay overrides={{ UserName: { color: 'red' } }} />

The parameter consists of a selector, in the above example, 'UserName', and an object with the property and value you want to modify. Inspect the generated components' source code. You will see that every internal component calls the getOverrideProps method, which returns an array of properties to override based on the selector, "NavBar" for the Flex component and "UserName" for the Text component in the example below.

export default function ProfileDisplay(props) {
  const { overrides, ...rest } = props;
  return (
    <Flex
      gap="20px"
      direction="row"
      {...rest}
      {...getOverrideProps(overrides, "NavBar")}
    >
      <Text {...getOverrideProps(overrides, "UserName)}>
        Josh
      </Text>
    </Flex>
  )

The names of the selectors come directly from Figma. You should use a consistent descriptive naming scheme when creating components in Figma.

The Amplify documentation for overrides is available here: https://docs.amplify.aws/console/uibuilder/override/#extend-generated-components-via-overrides-prop

You can view the source for getOverrideProps here: https://github.com/aws-amplify/amplify-ui/blob/2c929cfba6ba387130e50bd04c486cb4da5de541/packages/react/src/studio/getOverrideProps.ts