Posted On: Apr 21, 2022
Today, AWS announces the general availability of AWS Amplify Studio Figma-to-React code capabilities, giving frontend developers a faster workflow for building full-stack apps. These new capabilities add to existing Amplify Studio backend creation and management capabilities, helping developers accelerate UI development. Typically, there is a lot of back and forth between frontend developers and designers, which can lead to suboptimal end-user experiences because of compromises made to ship on time. With Amplify Studio, developing UI as per design is as easy as “import from Figma, export to code, and extend code with custom logic.”
Amplify Studio uses Figma designs to automatically generate pixel-perfect React components that can be wired to your backend in a few clicks. Figma-to-React capabilities were launched in preview at re:Invent 2021, and new features have since been added to include interactivity, an enhanced experience to modify child UI element in code, and new theming capabilities.
The Amplify Studio component editor now allows developers to add interactivity to their UI components, such as saving data from a form to their backend or navigation actions like going to a URL. The generated components are familiar to any React developer and offer the same flexibility as hand-authored components with mechanisms to modify component properties, element styling, and event handlers. All these components follow accessibility best practices and are also themeable using a Figma plugin to match your brand’s look and feel in minutes.
Amplify Studio UI development capabilities are generally available in 17 AWS Regions: US East (Ohio), US East (N. Virginia), US West (N. California), US West (Oregon), Asia Pacific (Mumbai), Asia Pacific (Seoul), Asia Pacific (Singapore), Asia Pacific (Sydney), Asia Pacific (Tokyo), Canada (Central), Europe (Frankfurt), Europe (Ireland), Europe (London), Europe (Paris), Europe (Stockholm), Middle East (Bahrain), and South America (São Paulo).
Check out our AWS News blog to get started with the latest features in Amplify Studio.