Exporter

L'un des points forts de Moqups est que tous les intervenants peuvent collaborer en ligne, en temps réel, depuis n'importe où et depuis n'importe quel appareil. Mais il existe encore de nombreux scénarios où il est judicieux de revenir à la méthode classique et d'exporter une partie – ou même la totalité – de vos projets Moqups.

L'exportation vous permet de partager votre travail avec des personnes qui pourraient travailler dans un environnement hors ligne, n'ont pas un accès complet à un projet particulier, ou n'ont pas de compte Moqups.

Et sur des projets complexes, l'exportation d'une seule partie du projet peut parfois aider à focaliser la discussion ou à simplifier la navigation.

Qui peut utiliser cette fonctionnalité ?

Vous pouvez exporter des projets Moqups en...

Une série d'images au format PNG ou PDF

ou

Une version HTML hors ligne du Visionneur lui-même

Moqups vous permet également d'exporter des objets individuels ou des groupes d'objets.

L'article suivant vous montre comment accéder à la fonction d'exportation. Il explique également chaque format d'exportation, ainsi que les options d'exportation disponibles pour chaque type.

Accéder à l'exportation

Vous pouvez accéder à la fonction d'exportation depuis...

• La Barre d'Outils Supérieure
• Le Menu Principal de Moqups
• Le Panneau des Pages (en utilisant le Menu Contextuel par clic droit)

Chacune de ces méthodes d'accès ouvre la Boîte de Dialogue d'Exportation de Projet, affiche les pages/dossiers que vous avez sélectionnés, vous permet de choisir votre Format & Options d'exportation, et vous demande de choisir une Destination pour vos fichiers exportés.

Exporter en PNG, PDF et Visionneur HTML

En haut de la Boîte de Dialogue d'Exportation de Projet, vous pouvez choisir d'exporter en format PNG, PDF, ou en tant que Visionneur HTML. Chacun de ces types d'exportation présente des avantages spécifiques et des options d'exportation.

Exporter en PNG

• Exporte une série de fichiers image PNG individuels.
• Est une bonne solution si vous souhaitez intégrer ces images dans des pages web, ou les modifier davantage dans d'autres logiciels graphiques.
• Exporte sous le nom mon_projet_nom.zip.

Exporter en PNG offre cinq Options d'exportation dans la Boîte de Dialogue d'Exportation de Projet :

• Toutes les pages ou Pages sélectionnées :

  Si vous souhaitez exporter des pages et/ou des dossiers sélectionnés, vous devez les sélectionner avant d'accéder à la fonction d'exportation.

• Inclure les pages masquées :

  La sélection de cette option inclut les pages qui sont définies comme invisibles dans l'Arborescence de Pages du Panneau des Pages.

• Rogner selon les limites du contenu :

  L'activation de cette option redimensionne et repositionne automatiquement vos images exportées afin qu'elles correspondent exactement au contenu visible de vos pages. Ce gain de temps permet d'intégrer les images exportées dans des pages web ou des wikis – ou de les ouvrir dans d'autres applications – sans avoir à rogner chacune manuellement.

• Fond transparent :

  Cocher cette option crée des pages d'exportation avec des fonds transparents, permettant aux images résultantes d'être intégrées de manière transparente dans d'autres designs et œuvres d'art.

• Échelle :

  Choisissez 1x pour des images en résolution standard avec une taille de fichier plus petite ; 2x pour des images haute résolution suffisamment nettes pour imprimer et s'afficher parfaitement sur la plupart des écrans ; 3x pour la compatibilité avec les écrans des appareils les plus récents.

Exporter en PDF

• Est idéal pour partager ou imprimer des projets avec plusieurs pages.
• Préserve les liens et les hotspots dans le PDF lui-même, faisant du fichier PDF un prototype interactif qui peut être envoyé par e-mail.
• Inclut une Table des Matières hiérarchique qui offre un aperçu clair de la structure de vos pages et facilite la navigation.
• Vous permet de protéger votre fichier par un mot de passe
• Exporte sous le nom 'mon_projet_nom.pdf'.

Exporter en PDF offre trois Options d'exportation dans la Boîte de Dialogue d'Exportation de Projet :

• Toutes les pages ou Pages sélectionnées :

  Si vous souhaitez exporter des pages et/ou des dossiers sélectionnés, vous devez les sélectionner avant d'accéder à la fonction d'exportation.

• Inclure les pages masquées :

  La sélection de cette option inclut les pages qui sont définies comme invisibles dans l'Arborescence de Pages du Panneau des Pages.

• Protégé par mot de passe :

  La sélection de cette option vous permet d'ajouter une couche de sécurité supplémentaire en définissant un mot de passe pour votre PDF exporté. Moqups n'enregistre pas le mot de passe que vous choisissez.

Exporter en Visionneur HTML

• Télécharge un prototype entièrement interactif qui peut être consulté hors ligne.
• Inclut toutes les Interactions et Commentaires de votre projet, et affiche la Barre d'Outils Supérieure du projet, ainsi que les Panneaux Pages et Commentaires.
• Les fichiers exportés du Visionneur HTML peuvent être hébergés dans des environnements restrictifs comme des serveurs intranet derrière un pare-feu – ou diffusés via des solutions de gestion documentaire d'entreprise comme Microsoft SharePoint.
• Exporte sous le nom mon_projet_nom.zip.
• L'archive zip contient tous les fichiers dépendants. Pour visualiser, extrayez l'archive et cliquez sur le fichier Visionneur HTML pour l'ouvrir dans votre navigateur.

Sélectionner des pages pour l'exportation

L'exportation en PNG et PDF vous permet d'exporter l'intégralité de votre projet, ou de sélectionner des pages spécifiques. Si vous souhaitez exporter des pages et/ou des dossiers sélectionnés, vous devez les sélectionner avant d'accéder à la fonction d'exportation :

• Pour sélectionner une page ou un dossier individuel, cliquez sur cet élément dans l'Arborescence de Pages.

ou

• Pour sélectionner une série consécutive de pages ou de dossiers à exporter, cliquez sur le premier élément de la liste. Ensuite, maintenez la touche Shift enfoncée tout en cliquant simultanément sur le tout dernier élément que vous souhaitez inclure dans cette série séquentielle.

ou

• Pour sélectionner plusieurs pages ou dossiers non consécutifs, maintenez la touche Ctrl/Cmd enfoncée et effectuez votre sélection un élément à la fois.

Sélectionner la destination d'exportation

Dans la Boîte de Dialogue d'Exportation, choisissez une destination pour votre projet exporté :

• Télécharger :

  Exporte vers le dossier Téléchargements de votre ordinateur.

• Google Drive :

  Exporte directement vers le dossier Mon Drive de votre Google Drive. (La première fois que vous utilisez cette fonctionnalité, Moqups vous demandera d'autoriser et de vous connecter à Google Drive). En savoir plus sur notre intégration Google Drive.

• Dropbox :

  Exporte votre projet directement vers le dossier Applications → Moqups de votre compte Dropbox. (La première fois que vous utilisez cette fonctionnalité, Moqups vous demandera d'autoriser et de vous connecter à Dropbox.) En savoir plus sur notre intégration Dropbox.

• Box :

  Exporte votre projet directement vers le dossier Tous les fichiers de votre compte Box. (La première fois que vous utilisez cette fonctionnalité, Moqups vous demandera d'accorder l'accès et de vous connecter à Box.) En savoir plus sur notre intégration Box.

Lien d'exportation

Si vous souhaitez partager un lien direct vers la page ou le projet exporté – plutôt que d'envoyer le fichier exporté en pièce jointe – faites simplement un clic droit sur le lien de téléchargement et copiez l'URL. Le lien S3 sécurisé expirera après 4 heures.

Exporter un Objet ou une Sélection d'Objets

Vous pouvez exporter des objets simples ou multiples au format PNG. Cette fonctionnalité est extrêmement utile si vous souhaitez exporter uniquement une partie de votre page – par exemple, télécharger les différents états d'un bouton en une seule fois.

Et, si vous créez un site web ou une application, cela signifie que les ressources que vous créez dans Moqups peuvent être incluses dans votre produit final – prolongeant leur utilité bien après la fin de vos prototypes temporaires.

Pour exporter un objet ou un groupe d'objets :

1. Sélectionnez le ou les objets que vous souhaitez exporter.

2. Faites un clic droit sur votre sélection et choisissez Exporter la sélection dans le Menu Contextuel.

3. Sélectionnez l'échelle de votre exportation :

• PNG@1x (images en résolution standard avec une taille de fichier plus petite)
• PNG@2x (images haute résolution prêtes à imprimer)
• PNG@3x (compatible avec les écrans des appareils les plus récents)

4. Notez que l'Exportation de sélection fusionne les couches d'un groupe d'objets et exporte le groupe comme un seul fichier, plutôt que comme plusieurs fichiers.

Transfert des propriétés d'objets et du code CSS/JSX

Le Panneau de Transfert au Développement vous permet de récupérer les Propriétés et le code CSS ou JSX pour un ou plusieurs objets sur la page.

Cela est utile lorsque vous travaillez sur une preuve de concept avec des designers graphiques et des développeurs. Ces spécifications peuvent aider à démarrer le développement et donner une idée de l'apparence des éléments de page une fois implémentés.

La section Propriétés affiche les spécifications (coordonnées, taille, hauteur de ligne, polices et couleurs) pour un seul objet lorsque vous le sélectionnez, ou pour l'ensemble du groupe lorsque vous sélectionnez plusieurs objets.

La section Code affiche le CSS ou JSX pour un ou plusieurs objets lorsque vous les sélectionnez – et inclut une classe de groupe si les objets ont été formellement groupés.

Utilisez le bouton Paramètres en haut à droite du panneau pour choisir votre :

• Format de couleur (RVB ou Hex)
• Unité de longueur (pixels ou rem)
• Format de code (CSS ou JSX)

Pour copier le code CSS ou JSX :

1. Sélectionnez un ou plusieurs objets sur la page
2. Cliquez sur le bouton Transfert dans le Menu Supérieur pour ouvrir/fermer le panneau
3. Utilisez le menu Paramètres pour choisir entre le code CSS et JSX
4. Cliquez sur le bouton Copier dans le presse-papiers pour récupérer le code

Vous pouvez également copier le CSS pour un ou plusieurs objets en les sélectionnant et en utilisant l'option Copier le CSS du Menu Contextuel par clic droit, puis coller là où vous avez besoin du code.

Questions et réponses

L'exportation inclut-elle les objets en dehors de la page – sur le canevas ?

Pour les formats PNG et PDF, l'exportation recadre tout contenu en dehors de la marge de page. En revanche, l'exportation en Visionneur HTML fonctionne comme le Visionneur de l'application ; il affichera les objets en dehors des marges de page sauf si vous avez sélectionné Masquer le contenu en dehors des pages dans vos options d'Espace de travail → Paramètres de Page.

Quelles interactions fonctionnent dans un PDF exporté ?

Toutes les Interactions de Page fonctionnent normalement, à l'exception de Retour en arrière, qui s'appuie sur l'historique de votre navigateur pour la direction. Les Interactions d'Objet ne fonctionnent pas dans les PDF.

Si vous souhaitez fournir aux intervenants un prototype entièrement fonctionnel, invitez-les comme invités du projet, ou partagez un lien de projet. Apprenez à faire les deux dans Partage. Pour exporter toutes les interactions, utilisez l'exportation en Visionneur HTML.

Existe-t-il un moyen d'inclure les commentaires de page lors de l'exportation ?

L'exportation en Visionneur HTML inclut les Commentaires et le Panneau de Commentaires. Il n'est pas possible d'exporter les commentaires en format PDF ou PNG, mais si vous souhaitez inclure un commentaire essentiel dans ces formats, vous pouvez toujours ajouter un stencil Note ou Accroche à la page avant d'exporter.