Découvrir PandaSuite Studio

Bienvenue dans PandaSuite Studio ! Cet outil vous permet de créer vos écrans, d'ajouter des composants et de personnaliser le parcours utilisateur très simplement. Créez une application vraiment unique grâce à cet outil très flexible et créatif et exportez la en format web/PWA ou natif (iOS, Android, Windows).

Installer PandaSuite Studio 

PandaSuite Studio est votre éditeur en drag & drop pour créer visuellement vos écrans.

👉 Téléchargez PandaSuite Studio pour Mac, Windows ou Linux gratuitement via le lien suivant :  http://studio.pandasuite.com/

L’outil est disponible hors connexion mais vous avez besoin d’une connexion Internet pour sauvegarder et mettre à jour votre projet. 

Créer un projet

🤷 Qu’est-ce qu’un projet ? Un projet est une application qui n’a pas encore été publiée, ni exportée. C'est au moment de sa diffusion que vous choisissez son nom officiel, son icône, son écran de chargement et son format (web ou natif).

Pour commencer, il faut créer un nouveau projet. Vous avez le choix entre créer un projet vierge ou bien partir d’un template existant. Les templates sont des petites applications constituées de quelques écrans. Elles vous permettent de comprendre concrètement comment structurer une application. 

Lorsque vous créez un projet vierge, vous pouvez choisir entre plusieurs layouts : Mobile, Tablette ou Grand écran

💡Par défaut, votre app est construite selon un ratio fixe, mais vous pouvez activer le redimensionnement automatique (responsive) grâce aux paramètres Taille & Position dynamiques ou créer un nouveau layout

Avec le compte Gratuit, vous ne pouvez travailler qu’avec un seul projet actif, les autres doivent être archivés.

Se repérer dans l'interface 

La zone de travail

La zone au centre de votre écran correspond à la zone visible de votre application. Vous pouvez vous déplacer et zoomer facilement à l’aide des outils situés en bas à gauche de la zone de travail (outil main et zoom +/-).

Interface_Zoom.pngVous avez également la possibilité d'afficher une grille et de la personnaliser pour servir de repères.

Les écrans

Interface_ecrans.png

Les écrans sont comme des pages, c’est l’unité de base de votre application. 

Le bouton  + Ajouter écran  vous permet de créer un nouvel écran. 

Par défaut, tous vos écrans sont indépendants, c'est à vous de créer les liens entre écrans et de mettre en place votre navigation.

💡 Chaque écran a un seul état. Si vous souhaitez animer votre écran à l'aide de transitions, il vous faut créer de nouveaux états de votre écran. Sélectionnez votre état et cliquez sur le bouton vert + Ajouter état ... pour créer un état lié. 

Le fil d’Ariane

Fil_d_ariane.png

En haut de votre écran, le fil d’Ariane vous permet de savoir à quel niveau vous vous situez. 

🤷 Il est important de comprendre la notion de profondeur dans PandaSuite. Pour éditer un composant, il est nécessaire de rentrer à l'intérieur de ce composant. Or plusieurs composants peuvent être imbriqués les uns dans les autres, ce qui engendre de multiples niveaux de profondeur. 

Le niveau courant apparaît en couleur dans le fil d'Ariane. Pour accéder au niveau supérieur, il vous suffit de cliquer dessus dans le fil d'Ariane. 

Les objets

Fene_tre_des_objets.png

La fenêtre  Objets indique tous les objets, graphiques ou système, qui sont situés à votre niveau. Les objets graphiques (texte, image, pop-up...) sont en haut de la liste et sont isolés des objets système (capteur Beacon, HTTP..) par un séparateur. Par ailleurs, l'ordre des objets indique leur position en termes de profondeur : ceux du haut de la liste sont situés au-dessus des objets du bas. 

Pour sélectionner un objet, cliquez dessus. Double-cliquez sur un composant pour rentrer à l'intérieur. Vous pouvez verrouiller ou cacher vos objets. Lorsque une action est créée sur un objet, une icône éclair apparaît.

Le projet 

A la racine du fil d'Ariane, vous pouvez sélectionnez le Projet

C'est ici que vous accédez aux propriétés du projet, vous pouvez également créer des actions liées au projet et éditer les objets de votre projet (Fournisseur de données).  

L’avant-plan et l’arrière-plan

C'est également au niveau du Projet que vous accédez à l'avant-plan et arrière-plan de votre application. Situé au-dessus et en-dessous de vos écrans, ces plans vous permettent de créer des éléments visuels globaux à votre application (par exemple une barre de navigation) et d'insérer des éléments persistents.

Vous pouvez créer plusieurs avant-plans et plusieurs arrière-plans. 

Les outils de création

outils de création

Texte

Cliquez sur l'icône Texte pour ajouter un bloc de texte. 
Double-cliquez dessus pour éditer son contenu ou cliquez sur le bouton Editer depuis la fenêtre Propriétés.

Images

Cliquez sur l'icône Images pour retrouver les images importées. Vous pouvez également en importer de nouvelles. 

Formes 

Plusieurs formes vectorielles sont disponibles. Vous pouvez changer la couleur et modifier la bordure dans la fenêtre Propriétés.

Composants

Les composants sont des éléments fondamentaux de votre application. Ils vous permettent d'accéder à des fonctionnalités avancées et de donner vie à votre contenu. Tous les composants sont flexibles, ils peuvent être connectés les uns aux autres et synchroniser leurs propriétés.

Il existe plusieurs sortes de composants : 

Cliquez sur l'icône Composants pour accéder à la liste des composants et en insérer un dans votre application. 

Les medias

La fenêtre Médias vous permet d'importer des fichiers depuis votre ordinateur dans votre application : images, vidéo, audios, PDFs, objets 3D etc... Vous pouvez les retrouver facilement grâce à la recherche intégré, appliquer des filtres, suivre le nombre d’utilisations et accéder aux informations.

Pour insérer un media dans votre application, il suffit de double-cliquer sur le nom du fichier ou de le glisser-déposer dans votre écran. Il apparaît alors dans la liste des Objets de votre écran.

Les propriétés

Proprie_te_s.pngLa fenêtre Propriétés indique les propriétés de l'objet sélectionné. Quand aucun objet n'est sélectionné, elle permet d'accéder aux propriétés de l'écran. Elle s’affiche automatiquement à l'insertion d'un élément.

Les actions

Ajoutez une action qui se déclenche à partir de cet objet. Sélectionnez l’événement déclencheur et l’objet de l’action.

La barre d’outils

Barre_d_outils.png

Ces propriétés sont communes à tous les objets :

  • Supprimer vos objets
  • Annuler / Rétablir
  • Changer l’opacité des objets
  • Avancer ou reculer un objet
  • Placer devant / derrière
  • Changer les coordonnées
  • Ajuster à gauche / centrer / ajuster à droite
  • Ajuster en haut / au milieu / en bas
  • Changer les dimensions
  • Adapter à gauche / à droite / en haut / en bas
  • Changer la rotation

Sauvegarde, aperçu et partage

Pensez à sauvegarder régulièrement votre projet : il n'y a pas de sauvegarde automatique. 

En cliquant sur Aperçu, vous visualisez la version web de votre application. Vous pouvez utiliser le menu de gauche pour naviguer entre écrans et les options de redimensionnement pour visualiser votre application sur d'autres appareils.

En cliquant sur Partager, vous obtenez l'URL de partage de votre application. 

Télécharger PandaSuite Viewer iOS et Android

Si votre projet est une application native iOS & Android, utilisez l'application PandaSuite Viewer pour consulter la version native de votre application. 

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous