🕓 6 MIN Two years ago, we …
Building a Login Page with Uno Platform and Figma
Nowadays, the majority of mobile, web, and desktop applications require some form of authentication to access their features and content. The intent for developers is always to create a simple page with an input field for email/password, and a login button that still reflects the brand’s image. However, it can start to get complicated once we start to accommodate the various use-cases and conditions.Â
Uno Platform’s plugin and toolkit offer a large library of ready-to-use components that allows developers and designers to take advantage of a set of higher-level UI Controls designed specifically for multi-platform, responsive applications. Thus, making it easier for you to build different screens while still extending the freedom of customization of how you want your components or elements to look.
Let’s jump in and learn how you can build a beautiful and responsive login page for your Uno Platform application.
To get started with the Uno Figma plugin you will first need to Install the Uno Platform Plugin for Figma and Download (“Duplicate”) Uno Platform Material Toolkit from the Figma community.Â
Setting the Page Template
Creating a new page
The first thing you will need to do is create a new page so you can have a work canvas for your project. (+ icon top of the left hand menu). We also suggest after duplicating the Figma file that you rename it right away and change the cover image to avoid any confusion.
Next, to build out your first screen, Uno Toolkit provides page templates that include all the proper layer structures to generate XAML and preview designs through the Uno plugin.Â
Drag the Page Template from the Page Templates components library (left side of your screen) into your Figma project.
Select the page by clicking on it. You should see a purple outline around the page.
Detach the page component from his instance by right-clicking directly on the page or the page’s layers), and choosing the Detach Instance option
Rename the page by double-clicking the layer’s name directly from the layers panel (right side of your screen).
Page instances must always be detached from their Template Masters to function properly with the UnoToolkit. Read more about page templates.
Understanding Layers Structure
Every object in the canvas will have a corresponding layer in the Layers Panel. It is important to understand which layers to use when dragging components to your canvas and to make sure you place them in their respective layer for the Uno Plugin to recognize them.
Scrollable Content: anything expected to scroll must be inside this layer. Anything that stays put like AppBars, NavigationBars and often TabBars must be left outside Contentscrollable.
Body Layer: It is important that all components be nested in the Body layer so that all elements on the page will be rendered.
Click the Layers tab in the left sidebar to open the layers panel. Then Click the arrow next to a Frame, Group, or Component to view any child layers. If you hover over the layer in the panel, a blue box will highlight that layer’s location on the Canvas.
What Are the Layers in a Page Template?
App bar:Â iOS or Android bottom app bar. Not part of the actual app, it’s for presentation purposes.
Body: Contains the Bottom Navigation Bar component and the Page layers.
Top App Bar:Â The sticky top bar that contains the commands and page title. If this layer is invisible, this component is not relevant to the actual page, and it could be deleted from the layers.
Page: Contains all the Content. Scrollable layers and the Top App Bar component.
Content.Scrollable: Contains all the scrollable content.
Section Placeholder (2):Â We added 2 section placeholder to help you insert content faster into your design
Navigation Bar:Â The sticky bottom navigation bar. If this layer is invisible, this component is not relevant to the actual page, and it could be deleted from the layers.
App bar:Â iOS or Android top app bar. Not part of the actual app, but it’s only for presentation purposes.
Creating a Form
How to add a textbox
Drag the Text Box from the Text components library (left side of your screen) into your Figma project.
Select the Text Box by clicking on it. You should see a purple outline around the component.
Customize the look and content of the Text Box with the options you need from the variants control panel (right side of your screen).
Adjust the width of the Text Box by changing the value from “fixed width” to “fill container” in the Resizing panel (right side of your screen)
Edit the text of the Text Box. To do so, you could click on the label until the text becomes highlighted or select the label layer from the layers panel (left side of the screen). Once selected, use your keyboard to enter new text.
HOW TO CHANGE THE ICON OF A TEXTBOX
Select the icon from a Text Box by clicking directly on the icon multiple times until the icon becomes highlighted (1b) or by selecting the Icon layer from the layer panel (left side of your screen – 1a).
Choose a new icon from the drop-down menu in the components control panel (right side of the screen).
What Are the Layers in a Text Box?
Template:Â Link to the main template
Line:Â Horizontal line under the text box (only in filled type text box)
Input:Â Group containing the Suffix, Icons, and Input text
TrailingIcon:Â Icon displayed on the right
Content:Â Group containing the Input text and Label
Input text:Â Group containing the Cursor, Text, and Prefix
Cursor:Â Vertical bar on the right of the text (used only for illustrative purposes)
Text:Â Text input by the user
Prefix:Â Text displayed on the left
Label:Â Name of the text box
LeadingIcon:Â Icon displayed on the left
How to Add a Password Box?
Drag the Password Box from the Text components library (left side of your screen) into your Figma project.
Select the Password Box by clicking on it. You should see a purple outline around the component.
Customize the look and content of the Password Box with the options you need from the variants control panel (right side of your screen).
Also customize the look and content of the Text Box template with the options you need from the variants control panel (right side of your screen). To have access to these options you must select the second . Template in the layer panel (left side of your screen)
Adjust the width of the Password Box by changing the value from “fixed width” to “fill container” in the Resizing panel (right side of your screen).
Edit the text of the Password Box. To do so, you could click on the label until the text becomes highlighted or select the label layer from the layers panel (left side of the screen). Once selected, use your keyboard to enter new text.
How to Change the Icon of a Password Box?
Select the icon from a Password Box by clicking directly on the icon multiple times until the icon becomes highlighted (1b) or by selecting the Icon layer from the layer panel (left side of your screen – 1a).
Choose a new icon from the drop-down menu in the components control panel (right side of the screen).
What are the layers in a Password Box?
Template 1:Â Link to the main Password Box template
Template 2: Link to the Text Box template.
Line:Â Horizontal line under the text box (only in filled type text box)
Input:Â Group containing the TraillingIcon, and content
TrailingIcon:Â Group containing the Suffix, and Icon
Suffix:Â Text displayed on the right
Icon:Â Icon displayed on the right
Content:Â Group containing the Input text and Label
Input text:Â Group containing the Cursor, Text, and Prefix
Cursor:Â Vertical bar on the right of the text (used only for illustrative purposes)
Text:Â Text input by the user
Prefix:Â Text displayed on the left
Label:Â Name of the text box
LeadingIcon:Â Icon displayed on the left
How to Add a Button
Drag the Button from the Basic Input components library (left side of your screen) into your Figma project.
Select the Button by clicking on it. You should see a purple outline around the component.
Customize the look and content of the Button with the options you need from the variants control panel (right side of your screen).
Adjust the width of the Button by changing the value from “fixed width” to “fill container” in the Resizing panel (right side of your screen). You will also need to repeat this action on the . Template_Button (6).
Edit the text of the Button. To do so, you could click on the label until the text becomes highlighted or select the label layer from the layers panel (left side of the screen). Once selected, use your keyboard to enter new text.
Adjusting the Layout
How to Edit the Spacing Between the Elements?
Select the layer group from the layer panel on the left side of the screen.
Go to the Auto layout panel on the right side of the screen. Change the value of the spacing between elements.
How to Edit the Padding Around the Items
Select the layer group from the layer panel on the left side of the screen.
Go to the Auto layout panel on the right side of the screen. Change the value of the padding around the items.
How to Make the Content Centered Vertically?
For this example, I suggest you first delete the unused Section Placeholder from the layer panel (left side of your screen).Â
Adjust the height of the form section by changing the value from “fixed height” to “fill container” in the Resizing panel (right side of your screen).
You Did It!
Your page is now complete and should look like this.
Now that you’ve got a better understanding, why not take it one step further? Try to customize the login screen to match your brand or with social login rapidly becoming the way users login, why not see if you can add that feature to your login screen using what you’ve learned.
Documentation Improvements
We spent significant time on improving our Uno Platform for Figma documentation – both on creating more samples and documenting the new platform additions, but also increasing usability through better information organization.Â
Share this post:
Related Posts
🕓 3 MIN In the spirit of …
🕓 10 MIN Today’s release is a …
