Screen Content

Component used to render a screen dynamic content

Overview

This is the area were your content will be added, replaced or rendered in your screen layout, this component can be used inside a Frame or in its own frame.

To use a Screen Content component you need a Screen Layout previously configured to use it as the target for the screen content. See:

Screen Layout

When you use a Screen Content and Layout you get all the power of Progressive Web Applications, also called Single Page Applications, as your site is rendered dynamically on demand, updating only the elements that are required on the screen.

Requirements

To create a Screen Content element, first create a Screen Layout see:

Setup

1. Open the IDE

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

3. Navigate to the Components Section

4. Select Screen Content Component

5. Select the Screen Layout as a target to add your content

6. Select the operation you want for your content, replacing or adding your element as more content for the screen layout.

7. Compile your app

Lazy Loading

Use lazy loading to improve your overall App performance and loading times, when activated the pages will not be loaded until a user navigates to that URL, loading the necessary components.

Lazy Loading is the best option for most applications but it may be better suited for complete screens instead of a simple apps section to avoid unnecessary UX friction to your app.

Setup

1. Open the Uncodie Plugin on Figma

2. Select your Screen Layout

3. Select lazy loading True or False parameter