The Top Bar

The top bar which is found at the top of the editor contains a number of features.

  • Add Page
  • Clone Page
  • Page Settings
  • Zoom

The page settings allows you to control all features related to the page you are working on.

The difference between screens and pages

What are screens in Fluid UI?

project settings

When we talk about screens in Fluid UI we are talking about the device screen you are designing for. You can read all about choosing the right screen resolution for your app design here.

You can choose which device screen resolution you are designing for when you create a new project and by choosing project settings in the home menu.

What are pages in Fluid UI?

A page in your project corresponds to a page in the app you are designing. You can change the page's height, width, orientation and set it as the starting page for when you're previewing your app prototype.

Next: Read about managing page settings in your projects.

Changing page settings in Fluid UI

page settings fluid ui

  • Chose a title for your page which will show up on the canvas in edit mode. You can change this title as many times as you like.

  • Choose the start page for your project, this will automatically start your app preview on this page.

  • Choose the page orientation, portrait or landscape.

  • Set the width and height of your page and make scrolling pages.

  • You can also access project settings from page settings.

Next find out about changing project settings.

Fluid UI Guide and Tutorials (Page 1)

Increasing the page width or height in the page menu will automatically cause any pages to scroll (horizontally, vertically or both) when you preview.

Page settings menu

The dashed blue and white screen boundary marker will indicate where the page will start scrolling.

Screen boundary markers

Pinned widgets are frequently used with scrolling pages to make some content static while other content scrolls.

You may also want to know more about changing your resolution/device type or the difference between the screen size and page sizes to set your project up to your liking.

Changing screen orientation and resolution in Fluid UI

Choose your default screen orientation and resolution when you are creating a new project. You can also choose a custom size if your size is not in the presets.

create a new project

Use project settings which is in the home menu to change the device orientation as well as the default gestures and transitions for your project.

screen resolution and orientation settings

Next: Find out more about managing your project settings and managing your page settings.