(This is a sponsored post.)
We’re going to go over details on how designer ↔️ developer collaboration in AWS Amplify Studio can make app building easier, but let’s cover one of those things right at the top here.
Say your designer (or you!) like to work in Figma, the predominant tool in UI design these days. The whole design system is there, from colors and fonts, to atomic components like buttons and forms, to larger layout components like Cards and Collections. The designs in Figma evolve, and when they do, it’s a developer’s job to port the changes over to the site. What if… that didn’t need to be manual work? With AWS Amplify you can now suck over those updated Figma designs directly without any work other than reviewing and accepting the changes. That’s some pretty magical stuff that people have only theorized would be possible one day with design tooling. Now it’s here.
We will get more into that in a minute, I just wanted to make sure you caught that upfront.
Setting the Stage
Designers often struggle to work with developers and vice versa, even though both are usually passionate about delivering great app experiences. If you’re a designer, if you’ve ever had to hand off your visual wonder to a developer, then you know the dread that sometimes follows. Will your developer know how to implement your design fully? Will pixels get removed? Will I be happy with the final iteration?
If you’re a developer, you may think of design implementation and iteration as a tedious and manual process. You may not feel equipped to think about design, even though you do care about delighting your customers and end-users and growing your business.
There are a lot of tools that are intended to help facilitate the handoff process. However, most don’t fully address the implementation of the design.
The AWS Amplify team recently launched AWS Amplify Studio, a new visual development environment that lets front-end developers build full-stack apps with minimal coding while integrating Amplify’s powerful backend configuration and management capabilities. Amplify Studio helps automate the design implementation process, helping designers and developers to work better together, and ensuring that designs are implemented into the final product. Let’s dive in and check out the new capabilities.
Let’s build an app
In the previous post, we outlined Amplify Studio’s functionality. Now let’s walk through how to build and deploy a web app quickly, on AWS. Amplify Studio contains backend creation and management capabilities, simplifying setup and management of app backend infrastructure, such as database tables, user authentication, and file storage, without requiring cloud expertise.
Use the visual development environment to define a data model, user authentication, and file storage without backend expertise. Amplify Studio helps you do the heavy lifting. Let’s focus on the UI and data binding.
This whole demo was done by Ali Spittel, a Senior Developer Advocate for AWS Amplify.
For demonstration’s sake, imagine it’s a home rental app.
First, let’s create a data model so that we can link data to my UI components. Then create a component with an image of the rental, a name, price, and location.
Then, we can save and deploy.
Next, let’s go over to Figma. Amplify Studio helps developers and UX designers work better together. In addition to the significant time it takes for developers to implement designs and iterations, often, the UX designs aren’t implemented accurately, which frustrates designers and leads to a sub-optimal end-user experience. With Amplify Studio, developers can import custom UI components created by their designers from Figma, or they can use the UI component library provided by Amplify Studio, and customize them to fit their style guide.
The Amplify team launched a Figma file called the AWS Amplify UI Kit.
The styling correlates with the Amplify UI library, which includes primitives, components (which are combinations of the primitives), cards, and collections.
Duplicate the file as a starter then edit away!
You can customize the components however you wish. If you’re working with a UX designer, both of you can work with the Figma project and import the UX designs into Amplify Studio.
Amplify Studio’s Figma-to-code plugin lets me import UX designs directly from Figma, which are automatically translated into clean React code that can be further customized.
To import the UX components, paste the link to the Figma file and paste it into Amplify Studio.
All of my components from my Figma file will be imported into Amplify Studio. You’re able to review the imported components in Figma and decide whether to accept or reject them, as an added quality check. If you are importing a design iteration, this helps you to see what the design changes are before you implement them.
This process helps me save time from not having to write thousands of lines of code, since Amplify Studio autogenerates it for me. It creates human readable, credible React code. Later, if needed, you can extend this code for additional control over the components.
We can then link the UI components to data from the data model, and can add child properties like rental price, name, and location.
We can create a collection of components, and customize the layout. Say we want to display them as a list or a grid or change the direction that it goes in, adjust spacing, and so on. We can choose the data that is displayed on my page.
Now, let’s need to integrate this into the app. Studio gives me code snippets to use to get my components into my app.
Run the command amplify pull, which runs some code generation from all the Figma components we pulled into Amplify Studio. Then we can use these React components like you would any other in the code base.
We’ll have an Amplify directory with information about the API, and also have a models directory with data that is created on the front end. We also have a full UI components directory, which has all of the UI components that we created in Figma and imported into Amplify Studio.
Say we’ve installed the Amplify JavaScript libraries and React UI components. We’ll use a couple of lines of code to configure Amplify for this app. We can use the Amplify Provider component which will be at the top level. It will allow us to have the right styling for my UI components.
In the component below, we import the CSS file, then import the rental collection. Then we can see my React code for the app. This is the code that was generated by Amplify.
Here are the properties that we can change in the Amplify UI documentation.
We can also add overrides to items in the generated components.
A lot of companies have their own style guides, and that’s great! We can use Amplify Studio to details of these style guides to Figma and ultimately our entire app.
There’s a new Figma plugin you can install: AWS Amplify Theme Editor. If you want to add a custom theme to the UI, you can use the plugin for that. This happens via CSS custom properties, with JavaScript objects, or design tokens within Figma using the Amplify UI Theme Editor plugin. You can use it to change the color palette, component colors, and brand colors.
One of the great things about Amplify Studio is it works with the tools that designers and developers use, but helps to centralize and streamline their workflow while facilitating tighter collaboration.
Designers can be assured that their UX designs and iterations are being fully implemented. Developers can be assured that they are incorporating design implementations as a part of their CI/CD process. As developers, we can save time not needing to translate designers’ ideas and changes into code, and we can focus on building a better app experience and the end users’ needs while making sure we haven’t missed the design details.
Once this app is ready to deploy, we can host the app with Amplify Hosting. It offers hosting for any React, Vue, or Next.js web app with built-in continuous integration and continuous deployment (CI/CD) workflows, testing, pull request previews, and custom domains.
Amplify Studio’s frontend UI capabilities are in preview (its app backend capabilities are generally available). You can go to the sandbox to try it out.
