TUTORIAL: Build a responsive pricing component with Amplify Studio Figma-to-React code

Contending with different screen sizes is something every front-end or full-stack developer has to handle, one way or another. Modern applications are not just expected to be functional across devices – users except an elegant, quality experience, from a phone screen to a 40“ ultrawide monitor.

In this tutorial, you’ll learn how to leverage Figma’s variant functionality to design a component that looks great on all screen sizes while remaining clean and reusable.

A fully responsive component, with only a few lines of code

Prerequisites

Some developers are working with teams of designers who can provide Figma mockups with variants, but many developers fill designer and UX roles in addition to their own role. To help everyone start on even footing, we’ll go through the Figma variant process as well.

Before starting this tutorial you will need:

1. An AWS Amplify app with Studio
2. A Figma account
3. The AWS Amplify Theme Editor plugin for Figma installed
4. A copy of the AWS Amplify UI Kit for Figma

Decide your breakpoints

When designing your component, you may have pre-defined breakpoints that you want to use, or you may not have an opinion on your specific breakpoints yet. While this is a good place to start, it isn’t necessary to decide your breakpoints right away, and they can be changed at any time.

By default, the AWS Amplify Theme Editor sets your breakpoints to commonly used values. You can customize this upfront before designing, or any time later on in your design process.

To adjust your breakpoint values, make sure you are logged into Figma, and then right-click anywhere and select Plugins > AWS Amplify Theme Editor.

Then, select the Breakpoints tab, and click on any of the breakpoints to adjust the value.

The border around the grey rectangle represents a standard 1920 resolution display, and the grey rectangle provides an indication of how wide this pixel value is in relation to that display. Then, click, “Update theme” to update your breakpoint definition. This will apply to all Figma components in this file – no need to repeat the process across components.

Design your component

Not everybody enjoys component design, and we won’t be diving into the basics of Figma here in this tutorial. If you’d prefer not to build these component variants yourself, you can find a copy of these variants in this Figma doc – just clone it to your account, and it’s ready to go.

If you are using the pre-configured Figma file, you can skip to the Sync and render stage. Otherwise, continue below to build and configure your Figma component.

Step 1: Select your component

To start with designing your component, first log into your Figma account and navigate to your copy of the AWS Amplify UI Kit. Don’t worry about making mistakes while designing – you can make as many copies of the UI Kit as you want.

Pro tip: rename the UI Kit file immediately to help keep things organized!

Once in the Amplify UI Kit, navigate to the left-hand bar and select “My Components”

Here, you will see all of the components that Amplify provides. Browse through the components and select one you want to make responsive. For this tutorial, we will be using the “MarketingPricing” component – this component appears as 3 cards, but is one long component, making it a prime option for a responsive variant on smaller screens.

*Important note: some Amplify UI Kit components, like HeroLayout1, already have variants. If you customize a component that already has variants, the steps outlined in this tutorial may not work as intended.

Step 2: Copy and detach your component

First, make a copy of this component – that way, if design goes awry, you can easily start over. To make a copy, select the component name from the left-hand bar and use ctrl+c or cmd+c to copy, and ctrl+v or cmd+v to paste.

On the canvas, your copy will be placed directly on top of the original component, so you will need to click-and-drag it elsewhere on the canvas. Drag and drop the component somewhat further away from other components, to make space during design.

Before you can begin customizing your component, a few steps need to be taken to separate the copy from the original. First, double-click the name in the left-hand nav bar to rename the component. Here, we’ve used the name “ResponsivePricing”

Next, when you select ResponsivePricing, you should see a reference the original component on the right-hand toolbar. Click the triple-dot icon, and select “Detach Instance”

Lastly, with ResponsivePricing selected, click the diamond icon at the top of the screen to convert ResponsivePricing into its own component. This will add a purple outline to the component, and give it a diamond icon by the name.

Step 3: Add a variant

After converting ResponsivePricing to a component, the diamond icon at the top will be replaced by a diamond with a + sign. Click this icon to generate a variant of your component.

As soon as a variant is created, you’ll see a couple things happen:

1. A copy of your component appears below the original on the canvas
2. A property is created in the “Current variant” toolbar on the right-hand side

IMPORTANT: make sure to double click on “Property 1” and rename it to “breakpoint” – this is how Amplify knows to apply your breakpoint preferences!

Finally, remember to update the value of “breakpoint” to match each variant you create. For example, for your Small variant, set breakpoint to “small”.

This value is case sensitive, and must be one of the breakpoints in the Amplify Theme Editor. The available options are:

• base
• small
• medium
• large
• xl
• xxl

Step 4: Design your variant

Now we can begin customizing variants to match different screen sizes. For this tutorial, we will design two additional variants, for medium and small screens.

When modifying and designing your component variants, the structure of your component will be shown in a tree on the left-hand toolbar. Keep careful note of this structure – in order for your variants to sync with Amplify, the structure must be identical across all variants!

For our Medium sized variant, we have changed the layout of each card so it is horizontal instead of vertical, which will work much better on a medium-sized screen. Although the layout of these cards is different from the original variant, the structure is identical – this is very important to prevent errors while syncing.

For the Small sized variant, we want the same card shape at the original, but in a column instead of a row. In order to reduce customer scrolling on small screens, we also want to remove all of the Feature Rows (the checkmark and lorem ipsum text).

Removing the Feature Rows poses an interesting problem – we can’t simply delete the Figma element, because that would mean the structure of this variant is different from the others, which will cause sync errors. To bypass this problem, we can use the “hide layer” function in Figma.

Hover over the element, and click the “eye” icon. This will cause the “eye” to close, and the element will not be visible in this variant. In this example, three dividers and three frames are hidden.

As a result, our final component does not include the content in those frames or the dividers. Using the Hide Layer function lets you build components that appear drastically different while preserving the same underlying component structure, adding lots of flexibility to your responsive components!

Sync and render your component

Now that your component has variants, it can be imported to Amplify through Studio, and rendered into your application.

Step 1: Log into Studio

First, you’ll need to open Studio for your Amplify app. Once logged in, select the UI Library tab on the left-hand nav bar.

Step 2a: Connect to Figma and sync

If you’ve never connected your app to Figma, you’ll need to take a few preliminary steps before your components can be imported. First, click “Get Started” on the banner.

When prompted, enter the URL for your Figma file. If you are working from the browser version of Figma, you can use the URL in your browser. If you are using the Desktop version of Figma, you can get the URL by clicking the “Share” button.

Next, you’ll be prompted to connect your Figma account to Amplify. Click “Allow access” to authorize Amplify Studio to connect to your Figma account.

Finally, click “Sync with Figma” in the upper right-hand corner to review and import each component from your Figma file into Amplify.

Step 2b: Update your Figma connection and sync

If you have connected to Figma in the past with this account, you’ll need to change which file is syncing with your application. Amplify Studio can only import components from a single Figma file, so if you want to keep your current UI components, you will need to consolidate to a single file.

Important note: Figma allows you to copy and paste components between files, but if your component uses any primitives, it will fail to render in Amplify! Instead, import the content of one file into another.

From the UI Library, click the “UI Library Settings” link in the upper right-hand corner

When prompted in the modal, replace the current URL with the one for your new Figma file, and click “Save Changes”

Click the “Sync with Figma” button to review and import each component from your Figma file. Finally, review and import each component from your Figma file into Amplify.

Step 3: Pull your components

Now that you have successfully imported your new component with variants, you can pull the newly generated React code to your local application. You should already have a Studio application, but if you don’t, make sure to set up your app, and configure it for UI development.

Head to your command line, navigate to your app’s root directory, and run amplify pull to bring the most recent changes from Amplify to your device. If this is your first time running amplify pull in this application, you may want to include the app ID – you can copy and paste a code snipped from the Amplify Studio by selecting Local setup instructions in the upper right-hand corner.

Once amplify pull is complete, your new responsive component will populate in your ui-components directory.

Step 4: Import and render your component

The only step remaining is to import and render your component in code! You can use your component however you want, but for this example, we will keep it very simple. Add the following code to your app.js file.

import { 
  ResponsivePricing
} from './ui-components';

function App() {
  
  return (
    <div>
      <ResponsivePricing />
    </div>
  );

}
export default App;

Note that our component is named ResponsivePricing – if you are using a different name, make sure to update your code accordingly.

Next, run npm start to load your web app on your localhost server, and your component should render in your web browser!

To test your component’s responsiveness, you can resize the window, or, if you are using Google Chrome, you can open the developer tools with F12 or by right clicking anywhere on your app and selecting Inspect. Then, click and drag the left border of your developer tools window to see the exact pixel size of your screen. The breakpoints for this component were set to 1400 and 850 pixels.

Congratulations! You’ve successfully created a reusable, responsive component using Amplify Studio’s Figma-to-code functionality.

Do you have ideas on how to use this responsive functionality in your apps? Share your ideas with us on Twitter, or get inspired by other community members in our Discord channel. You can also find documentation on Responsive Components here, and share your feedback with us on Github.