Discover PandaSuite Studio

Welcome to PandaSuite Studio! This editor makes it easy to customize your screens, add components and create a personalized user experience. Build a truly unique web app or native application with this very flexible and creative tool. 

Install PandaSuite Studio

PandaSuite Studio is your drag & drop editor to visually create your screens.

👉 Download PandaSuite Studio for Mac, Windows or Linux for free with this link: http://studio.pandasuite.com/

The tool is available offline but you need an Internet connection to save and update your project. 

Create project

🤷  What is a project? A project is an application that has not yet been published or exported. It is when you publish it that you choose its official name, its icon, its loading screen and its format (web or native app).

To get started, you need to create a new project. You have the choice between creating a blank project or starting from an existing template. Templates are small applications made up of a few screens. They are here to help you understand concretely how to structure an application. 

When you create a blank project, you can choose between several layouts: Mobile, Tablet or Large Screens

💡By default, your app is built with a fixed ratio, but you can enable automatic resizing (responsive) through the Size & Position Scale settings or create a new layout.

With the Free account, you can only work with one active project, the others must be archived.

Find your way in the interface

Work space

The area in the center of your screen is the visible area of your application. You can move and zoom easily using the tools located at the bottom left of the working area (hand tool and zoom +/-).

Interface_Zoom.png

You also can display a grid and customize it to be used as visual guide.

Screens

Screen_window.png

Screens are like pages, they are the basic unit of your application. 
The + Add screen button allows you to create a new screen. 

By default, all your screens are independent, you must create the links between screens and to set up your navigation.  

💡 Each screen has one state. If you want to animate your screen with transitions, you need to create new screen states. Select your state and click on the green + Add State... to create a linked state.

Breadcrumb

breadcrumb

At the top of your screen, the breadcrumb trail lets you know what level you are at. 

🤷 It is important to understand the concept of depth in PandaSuite. To edit a component, you must go inside that component. Now several components can be nested inside each other, which generates multiple levels of depth. 

The current level appears in color in the breadcrumb trail. To access the upper level, simply click on it in the breadcrumb trail. 

Objects

list of objects

The Objects window shows all objects, graphical or system, which are located at your level. Graphical objects (text, image, pop-up...) are at the top of the list and are isolated from system objects (Beacon sensor, HTTP...) by a separator. Moreover, the order of the objects indicates their position in terms of depth: those at the top of the list are located above the objects at the bottom. 

To select an object, click on it. Double-click on a component to go inside. You can lock or hide your objects. When an action is created on an object, a lightning icon appears.

Project

At the root of the breadcrumb trail, you can select the Project. 
This is where you access the project properties, you can also create actions related to the project and edit the objects of your project ( Data provider).  

Foreground and background

It is also at the Project level that you access the foreground and background of your application. These are above and below your screens, to create global visual elements for your application (for example a navigation bar) and insert persistent objects.
You can create multiple foregrounds and backgrounds. 

Creation tools

creation tools

Text

Click on the Text icon to add a text block. 
Double-click on it to edit its content or click on the Edit button from the Properties window.

Images

Click on the Images icon to find the imported images. You can also import new images. 

Shapes 

Several vector shapes are available. You can change the color and modify the border in the Properties window.

Components

Components are fundamental elements of your application. They make it easier to add advanced features and bring your content to life. All components are flexible, they can be connected to each other and synchronize their properties.
There are several types of components: 
Click on the Components icon to access the list of components and insert one in your application. 

Media

With the Media window you can import files from your computer into your application: images, video, audio, PDFs, 3D objects etc... You can find them easily with to the search, apply filters, track the number of uses and access information.
To insert a media in your application, just double-click on the file name or drag and drop it in your screen. It will appear in the list of Objects on your screen.

Properties

properties

The Properties window displays all the properties of the selected object. When no object is selected, it gives access to the screen properties. It is automatically displayed when an element is inserted.

Actions

Add an action that is triggered from this object. Select the triggering event and the object of the action.

Toolbar

toolbarThese properties are common to all objects:

  • Delete objects
  • Undo / Redo
  • Change opacity
  • Move an object forward or backward
  • Define coordinates
  • Adjust left / center / right
  • Adjust top / middle / bottom
  • Change dimensions
  • Adapt left / right / up / down
  • Rotate object

Save, preview and share

Remember to save your project regularly: there is no automatic backup. 

By clicking on Preview, you can see the web version of your application. You can use the menu on the left to navigate between screens and the resizing options to view your application on other devices.

Clicking on Share, you get the sharing URL of your app. 

Download PandaSuite Viewer iOS and Android

If your project is a native iOS & Android app, use  the PandaSuite Viewer app to view the native version of your app. 

Still need help? Contact Us Contact Us