Screen Layout

Layouts are reusable content components for URL paths, used in Navigation Menus, Tabbars, or similar elements with repetitive elements.

Overview

In React, Figma and most component-based design systems is normal to use content wrappers or common elements that are used repeatedly in different parts of your application or website, to address this use case Uncodie uses the "Screen Layout" component that will allow other elements to render around the Content Wrapper using other components as Parents or rendering contextual data accordingly.

In opposite to "Screens" components, "Screen Layouts" won't manage custom URL params and are normally used in combination with "Screens" to render a complete app section.

Quickstart

"Screen Layout" requires a children layer named Content where the content will be replaced by other "Screen" Components using the same URL Path

Setup

1. Open the IDE

2. Select the Figma component you want to make a screen

3. Navigate to the Components Section

4. Select Screen Layout Component

5. Inside your component children layers select a layer and set this layer as a Screen Content component. This will be the replaced layer for your component children's

6. Select the path for your Screen Layout to render

7. Click Save

8. Compile and publish your app

Use Cases

Rendering contextual data

Whenever you require to display different elements or information around a URL or component you can use content wrappers as an efficient way to handle contextual screen rendering

Creating a Menu

Design a menu including your content area to make a dynamic screen navigation application

Creating a Tab Bar Controller

Design your Tab Bar including your content area to make a dynamic screen navigation application

Creating a Navigation Controller

Design your Navigation component including your content area to make a dynamic screen navigation application

Requirements

To create a Screen Layout, first create a Figma component see:

🧩Components