
Replicating Pet Adoption UI with Uno Platform and Figma
Figma is notably regarded as a design tool. However, it is also easy for developers to learn and use, even with limited design experience. Furthermore, the Uno Platform for Figma plugin allows you to export your designs directly into code, saving time, streamlining the development process and improving the consistency of designs. This tutorial will walk you through creating a Pet UI mobile screen and exporting your Figma designs into code, including setting up your Figma file and designing using Uno Material Toolkit components. By the end of this tutorial, regardless of being a developer or designer, you will have a solid understanding of using Figma to create and export designs into code. Let’s get started! Pet Adopt UI https://uno-website-assets.s3.amazonaws.com/wp-content/uploads/2022/12/20102237/Uno__PETUI.webm Before Getting Started Install the Uno Platform Plugin Copy the Uno Material Toolkit Set up your Canvas and Screen Start by opening your file, selecting the cover page, and renaming it. 2. Continue to the Getting Started page. This is where you will want to set up all aspects of your app’s theme (Color styles, Font styles). These can always be changed later, but best practice would recommend you do it at the onset of your project. Note: all the