Write Your Own Code with AWS Amplify Studio

AWS Amplify Studio enables developers to go from Figma designs to pixel-perfect React components. Since it’s built for developers, the code is one of the most important parts of the story. In this post, we’ll go through the ways you can write your own code combined with Amplify Studio-generated components.

If you’re new to Amplify Studio, read this tutorial first!

Overrides

The first way to modify components generated by Studio is to use overrides. When Studio generates components, it uses Amplify UI components as their subcomponents. These components all have many props exposed to modify their attributes, which you can find within the linked documentation. In order to change any of these props, you can pass an object to the `overrides` prop exposed in each component. The keys in that object will be the names of the subcomponent you would like to modify – these are set within Figma and can also be viewed in any component’s generated file. The values will be the properties you would like to change.

For example, in the following component the key to override the `Image` component would be `timelineImage`. In Figma, when you create groups or elements, each has a name which can be viewed on the left hand navigation. You can rename things there as well!

function Ampligram () {
  return (
   <Flex>
     <Image
      width="65px"
      height="65px"
      shrink="0"
      position="relative"
      borderRadius="160px"
      padding="0px 0px 0px 0px"
      {...getOverrideProps(overrides, "timelineImage")}
      ></Image>
    </Flex>
  )
}

Then, in the parent component when you want to override a property, you would do the following:

function App() {
return (
   <Ampligram
     overrides={{ timelineImage: { objectFit: 'cover' }}}
    />
 )
}

Customize Collections

Within Amplify Studio, you can also create collections, or list views that create instances of a component for each piece of data within a dataset. You can override attributes of items within a collection, and you can even do so conditionally based on the data instance the component represents. You can provide a function to the `overrideItems` prop, and it will receive the arguments “item” and “index” similar to many higher order functions in JavaScript such as map or reduce.

If I had a collection of hikes and I wanted to color code a button on each one to match the difficulty of the hike, I could do the following:

<Hikes overrideItems={(item, index) => {
  if (item.difficulty === 'easy') {
    return { overrides: { 'Button' : { backgroundColor: 'green' }}}
   } else if (item.difficulty === 'difficult') {
     return { overrides: { 'Button' : { backgroundColor: 'darkGrey' }}}
   }
 }}/>

Moving files out of the ui-components directory

Amplify Studio generates components in a folder called `ui-components`. When a component changes in Studio due to an accepted change in Figma or changes to the data displayed, the component file is regenerated overwriting any changes a human authored within the file.

Normally, you would use overrides to change anything that you need to within a component, but if for some reason you wanted to write code directly within the component file, you could move the component outside of the `ui-components` directory. The component would no longer regenerate and you could author code within the component directly.

Using just the UI Components

If you want to add other UI components to your application that match your theming and the Studio-generated components, but you don’t want to use Studio for them, you can use the Amplify UI componentsdirectly in your application, just like you’d use any React component library.

Theming

You can add theming to your Amplify Studio apps within either Figma or code. You can use the Figma extension, or you can use a JS object with design tokens or CSS to add a theme to your app within code.

Conclusion

Amplify Studio was built to make developers’ lives easier and smooth the designer-developer handoff. The code being easy to modify and extend is critical – there are multiple ways for developers to do so with Amplify Studio-generated components. You can create an Amplify Studio application via the Amplify Console, we’d love to see what you build!