Building a Profile Page with Uno Platform for Figma
In this tutorial, we’ll build a completely functional Profile Page using Figma and Uno Platform for Figma plugin to generate responsive XAML code that can be built upon and extended quickly. Profile Page – Playground File Breaking Down the UI The screen can be broken down into four sections, each with its own set of components: User Info Image Text Call Log IconButtons TextBlock Action Buttons IconButtons Bottom Menu IconButtons Text Now that we understand the layout of our UI and the components we are using, the next step is picking our theme as an essential design element. It’s best practice to set up your colors at the start of the project. Editing Color Styles in the Figma Toolkit File To edit your colors: In the Styles Panel (right side of the screen when nothing is selected), expand the Colors folder and subfolders to view all color roles used in the document. Select one that needs an update to follow your brand colors. Right-Click and Select Edit. From the Properties section of the Edit Style Panel, input the HEX code you want, which will update throughout the entire document. You can always edit them at any point in the project.
