![]() ![]() TrailingIcon: Icon displayed on the rightĬontent: Group containing the Input text and Label Input: Group containing the Suffix, Icons, and Input text Line: Horizontal line under the text box (only in filled type text box) 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).Ĭhoose a new icon from the drop-down menu in the components control panel (right side of the screen).Īssistive text: Text displayed under the text box ![]() Make the Assistive label invisible if you are not using it. Once selected, use your keyboard to enter new text. 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). You should see a purple outline around the component.Ĭustomize the look and content of the Text Box with the options you need from the variants control panel (right side of your screen).Īdjust 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)Įdit the text of the Text Box. Not part of the actual app, but it's only for presentation purposes.ĭrag the Text Box from the Text components library (left side of your screen) into your Figma project. ![]() If this layer is invisible, this component is not relevant to the actual page, and it could be deleted from the layers.Īpp bar: iOS or Android top app bar. Navigation Bar: The sticky bottom navigation bar. Section Placeholder (2): We added 2 section placeholder to help you insert content faster into your design Scrollable layers and the Top App Bar component.Ĭontent.Scrollable: Contain all the scrollable content. If this layer is invisible, this component is not relevant to the actual page, and it could be deleted from the layers. Top App Bar: The sticky top bar that contains the commands and page title. Not part of the actual app, but it's only for presentation purposes.īody: Contain the Bottom Navigation Bar component and the Page layers. Rename the page by double-clicking the layer's name directly from the layers panel (right side of your screen).Īpp bar: iOS or Android bottom app bar. You should see a purple outline around the page.ĭetach the page component from his instance by right-clicking directly on the page or the page's layers), and choosing the Detach Instance option Step 1: Setting the page templateĭrag the Page Template from the Page Templates components library (left side of your screen) into your Figma project. To get started with the Uno Figma plugin, review the guide.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |