Flowmo Editor | Flowmo App Help Center

Setting up your project

Welcome to Flowmo's Editor If you have prior experience with standard design software, you'll find the interface quite intuitive and easy to start!

On the main dashboard page, click the "New Design" button.
A "New Project" window will open, where you can design your website.

Left sidebar

The left sidebar in most modes is where you can select layers, spaces and global elements of your project.

At the top you can see the project name

and below that you can see the 2 tabs:

Layers tab, in which you can see all of your spaces and layers of the elements you created in your project. A Space is another editor canvas.

In the second tab you can find anything related to your Design System

When clicking on the Flowmo icon, you have the functionality to navigate back to the dashboard, as well as options to save, export, or alter the theme of your workspace.

Back to projects - will take you back to Dashboard
Project settings - opens advanced settings for your project (such as project type, your website's page title, description and favicon, and more)
Export - saves the current project as an FMO file
Restore – Opens the auto-backups dialog to let you work from an earlier version of your project.
Add a Backup – Manually save a version of your project, which will later appear in the Restore dialog.
Toggle theme – Switch between light and dark mode.
Turn on low performance – Enable low performance mode to improve stability on slower devices.
Help Center – Open the Flowmo Help Center in a new tab.

Top Tool bar

At the top of the interface, you'll find essential design tools such as frames, shapes, images, text, and video.

Create a new Frame

Create a new Rectangle

Create a new Text layer

Insert a new image

Flowmo plugins and helpers:

Zoom level select

Preview mode

On preview mode you can see how the selected page looks on different screen sizes:

Right sidebar

Transform

You can snap the object to any position you want

2D / 3D

you can set the perspective of any object for it to appear as 3D

X, Y

you can set the X and Y position of the object.

Constraints

you can set the constraints of each object, to Left, Center, Right and Top, Center, Bottom.

Angle

set the angle of the object, where 0 in the positive X axis, and it is CW.

Position: if you want you can set the object position to be fixed position or to keep it sticky.

Sizing

You can change the sizing to be one of the following:

Fixed - when it is fixed size you can set the width and height in px/rem/%/vw/custom.
Hug - meaning that it will hug the content and will be in that size.
Fill - when you choose this, it means that the object will fill the parent

Min and max

here you can set the maximum and minimum width and height values of the object (good practice for responsive design)

Radius

here you can set the radius of each corner of the object

Clip Content

when you mark this, it will clip the content of objects that are not supposed to visible, for instance, in a frame, you don't want to see objects or part of objects that are outside of the frame

Fill

You can add multiple fills layers Each layer can be of the following:

Solid color

Gradient

Image

Video

You can adjust the opacity of each fill layer