Introducing Component Slots for Figma-to-React code in Amplify Studio

This blog post was written by Wesley Peck, Senior Product Manager – Technical at AWS Amplify.

AWS Amplify Studio is excited to announce a new feature for the Amplify Studio UI Library called “Component Slots”! Component Slots allow you to pass React components or any JSX elements as children of a component generated by Figma. Component Slots can be applied to both single components and collections, and you can pass static or dynamically generated content.

This guide will detail the basics on how to add a slot to a component, and how to pass content to that slot.

What are Component Slots?

Component Slots give you a quick and easy way to pass custom values into your component via a prop. This way, you can use a single component design for multiple use cases without needing to modify or duplicate the original Figma file.

Today, when you generate a component using Amplify Studio, Studio generates custom code for your component that you then pull down to your project. Until today, customers needed to “eject” from the automatic code generation process to enable component nesting.

Component Slots give you the ability to customize your UI components while maintaining the benefits of Amplify Studio-generated components. You can assign a component slot as a prop to any Figma frame in your component, and pass content to this prop directly in your code.

How To Use Component Slots

Pre-Requisites

• An Amplify Studio app with at least 1 component in your UI Library. Follow this guide to generate your first React component from Figma designs.

Customize a component

The first step in using Component Slots is to create a slot in one of your existing UI components. You will configure your UI component, assign the slot to a frame within your component, and name the slot.

First, navigate to the Amplify Console, and select your App.

Next, select the “Launch Studio” option to open Amplify Studio in a new tab.

Then, on the left-hand navigation bar, select the “UI Library” option.

Select one of your components. If you don’t have any components, you can import our Figma file to generate some.

Click the “Configure” button in the upper right-hand corner to view your component’s Element Tree.

Add a Slot

At this point, you will see the Element Tree for your UI component on the left-hand side. Each element has a different icon based on its type. Component Slots can only be applied to a Frame element, which has a icon.

In the left-hand navigation bar, select the frame you want to convert to a slot. In this example, the “Main Text” frame is selected
Note: you can also click directly on parts of your component!

On the right-hand action bar, select the “Convert to a slot” button.

Once clicked, a new Component Property will be created in the upper right-hand corner. In this example, a prop named “mainText” was created

(Optional) Click the name of your new property in the upper right-hand corner and change it to something memorable.

• By default, your slot will inherit the name of the Frame you selected
• You’ll be prompted to confirm that you want to rename your component – click the “Rename properties” button to proceed, or “Cancel” to keep the name unchanged

Render your component

Once a slot has been assigned to a frame within your component, you need to pull that component’s updated code to your development environment, and add it to your code.

First, navigate to your terminal or command prompt and run amplify pull.

• Your component with its new slot will be added to the “ui-components” directory in your project
• Make sure you are in your application’s root directory before pulling your project!

Import the component to your primary app page, and add the component to your code. This example imports a component named “ActionCardWithSlot.”

Note: that the slot is rendered empty. Your application won’t render any content inside a slot.

import { ActionCardWithSlot, } from './ui-components'; function App() { return ( <div> <ActionCardWithSlot /> </div> ); } export default App;

Finally, add a React element (any JSX component) to your slot by setting the designated prop.

In this example, note that the image is still missing. To generate an image, you would need to override the “image” prop, since the image is not within the mainText slot.

import { ActionCardWithSlot, } from './ui-components'; function App() { return ( <div> <ActionCardWithSlot {/*Add content to the mainText prop*/} mainText={ <div> <h2>Fancy Hat</h2> <p>A hat with a very nice feather</p> </div> } /> </div> ); } export default App;

Congratulations, you’ve successfully used your first Component Slot!

This covers the basics of how to configure and use Component Slots, but this post only scratches the surface. Keep an eye out for a future post, where we will combine slots with the power of Collections.

Do you have some great ideas on how to use Component Slots? Share your ideas with us on Twitter, get inspired by other community members in our Discord channel, or build your vision as part of the September Amplify hackathon!

You can also find documentation on Component Slots here, and share your feedback with us on Github.