Regrouper et organiser des pochoirs

En regroupant des pochoirs individuels, vous pouvez accélérer et simplifier votre flux de travail. Les éléments groupés – ou Pochoirs composés – peuvent être déplacés, ajustés, stylisés et dupliqués comme une seule unité.

À mesure que vous ajoutez et regroupez de nouveaux pochoirs, votre page deviendra une mosaïque complexe d'objets : pochoirs, pochoirs composés, images et icônes. Pour affiner et modifier efficacement votre design, vous devrez identifier et localiser à la fois des objets individuels et des objets imbriqués profondément dans des groupes plus larges.

Vous pouvez le faire rapidement et facilement. Tous les objets sont mis en surbrillance lorsque vous les survolez sur la page ; ils sont également mis en surbrillance lorsque vous survolez leur nom dans le Panneau de contour. Cela facilite la sélection d'objets fins ou petits et réduit les clics manqués.

Le Panneau de contour vous aide à gérer votre page – et à rationaliser votre flux de travail – en gardant tous vos objets organisés dans une liste unique et consultable.

Dans cet article, vous apprendrez comment regrouper, verrouiller, arranger et aligner des objets sur la page. Nous vous montrerons également comment naviguer et utiliser le Panneau de contour pour renommer, rechercher, réorganiser, basculer la visibilité et supprimer des objets.

Regrouper et dégrouper des pochoirs

Lorsque des objets sont regroupés, ils peuvent être déplacés, ajustés, stylisés et dupliqués comme une seule unité. Le regroupement fonctionne pour tous les objets : pochoirs, modèles, images et icônes.

Pour regrouper ou dégrouper des objets, utilisez le bouton Groupe situé dans la Barre d'outils contextuelle.

Pour regrouper des pochoirs :

  1. Sélectionnez des pochoirs :

    • Faites glisser la souris sur plusieurs pochoirs

      ou

    • Utilisez Ctrl/Cmd + Clic pour sélectionner des pochoirs un par un

  2. Regroupez des pochoirs :

    • Accédez à la Barre d'outils contextuelle et cliquez sur le bouton Groupe

      ou

    • Faites un clic droit sur l'un des objets et choisissez Sélection de groupe

Pour dégrouper des pochoirs :

  • Sélectionnez le groupe d'objets que vous souhaitez dégrouper

  • Accédez à la Barre d'outils contextuelle et cliquez sur le bouton Dégrouper

    ou

  • Faites un clic droit sur l'un des objets et choisissez Dégrouper la sélection

Vous pouvez également créer et imbriquer des groupes dans des groupes.

Pour annuler l'imbrication de groupe, le raccourci Ctrl/Cmd + Shift + Alt/Option + G décompresse et aplatit un groupe pour créer un groupe à couche unique.

Modifier des groupes de pochoirs

Une fois que des objets sont regroupés, vous pouvez les déplacer, les formater et les styliser comme un seul élément. Mais vous pourriez toujours vouloir modifier un élément individuel séparément de son groupe.

Pour accéder à un seul objet dans un groupe, double-cliquez sur cet objet. Vous pouvez maintenant formater, styliser ou supprimer cet élément individuel.

Contraintes de redimensionnement

Les contraintes ancrent les éléments dans un design pour rendre l'ajustement et le redimensionnement des mises en page à la fois rapides et faciles. Les contraintes s'appliquent uniquement aux groupes, et ne s'appliquent pas à une sélection d'objets.

Pour appliquer des contraintes, vous devez d'abord activer la fonctionnalité. Ensuite, vous pouvez choisir des contraintes automatiques, ou définir manuellement des ancres pour chaque objet dans le groupe.

Voici comment cela fonctionne :

Les contraintes définissent des règles de redimensionnement pour les objets dans un groupe. Ces règles déterminent comment les objets répondront lorsque vous adaptez le groupe à de nouveaux contextes ou tailles d'écran.

Sans contraintes activées, le comportement par défaut consiste simplement à « étirer » les objets lorsque le groupe est redimensionné.

Avec des contraintes appliquées, vous pouvez redimensionner le groupe avec la certitude que les éléments s'ajusteront de manière logique et prévisible – et ne « briseront » pas la mise en page que vous avez déjà établie.

Étirement par défaut au redimensionnement

Dans Moqups, les Contraintes sont désactivées par défaut. Cela signifie que lorsque vous redimensionnez un groupe, les objets dans ce groupe s'étireront :

  • Les objets avec un format non verrouillé (comme les formes et les espaces réservés) s'étireront dans la direction où vous redimensionnez le groupe.
  • Les objets avec un format verrouillé (comme les icônes et les avatars) maintiendront leurs proportions, mais deviendront plus grands ou plus petits lorsque vous redimensionnez le groupe.

Activer les contraintes de redimensionnement

Notez que vous devez déjà avoir créé un groupe d'objets pour pouvoir appliquer des contraintes de redimensionnement.

Pour activer les contraintes :

  1. Cliquez sur le groupe pour révéler la section Options de groupe du Panneau de format.

  2. Cochez la case Activer les contraintes de redimensionnement.

    ou

    • Dans la barre d'outils contextuelle, cliquez sur le bouton Activer les contraintes de redimensionnement
  3. Cela activera notre fonctionnalité de contraintes Automatiques. Vous pouvez lire plus sur les contraintes Auto vs Manuel ci-dessous.

  4. Ensuite, cliquez sur n'importe quel objet dans le groupe pour ouvrir la section Contraintes du Panneau de format.

Contraintes automatiques

Lorsque vous activez les Contraintes, des ancres sont automatiquement appliquées à chaque objet dans le groupe. Ces ancres automatiques reflètent à la fois la mise en page des objets et leurs comportements les plus attendus et intuitifs lors du redimensionnement.

Pour voir les ancres automatiques :

  1. Cliquez sur n'importe quel objet dans le groupe pour ouvrir les contrôles de Contraintes.
  2. Les boutons d'ancre affichent les contraintes horizontales et verticales qui peuvent être appliquées à l'objet sélectionné.
  3. Les ancres qui ont déjà été appliquées automatiquement sont mises en surbrillance en bleu.
  4. Sur la page, des lignes pointillées bleues indiquent où l'objet sélectionné est ancré.

Lorsque vous redimensionnez le groupe, les contraintes automatiques devraient être suffisantes pour maintenir une mise en page logique pour la plupart des cas d'utilisation.

Contraintes manuelles

Vous pouvez ignorer les contraintes automatiques et sélectionner manuellement des ancres pour chaque objet dans le groupe. Les ancres peuvent être appliquées horizontalement et verticalement.

Si vous cliquez sur n'importe quel objet dans le groupe et survolez les boutons d'ancre, une info-bulle expliquera où ils ancrent cet objet lorsqu'ils sont sélectionnés. Vous verrez également les boutons d'ancre Proportionnels dont nous parlons dans la section suivante.

Si vous ancrez un objet à la fois à Gauche et à Droite (ou en Haut et en Bas), l'objet peut s'étirer en conséquence lors du redimensionnement.

Pour appliquer des contraintes manuelles à un objet :

  1. Cliquez sur n'importe quel objet dans le groupe pour ouvrir les contrôles de Contraintes.
  2. Les boutons d'ancre montrent les contraintes horizontales et verticales qui peuvent être appliquées à l'objet sélectionné.
  3. Cliquez sur n'importe quel bouton d'ancre pour l'appliquer à l'objet.
  4. Les ancres que vous sélectionnez seront visibles sur la page sous forme de lignes pointillées bleues.
  5. Si vous souhaitez revenir aux ancres automatiques pour cet objet, il vous suffit de re-sélectionner la case Ajuster automatiquement.

Ancres proportionnelles

Sans contraintes proportionnelles, les objets restent à leur position fixe depuis leurs ancres (haut, bas, côtés ou centre) lorsque vous redimensionnez le groupe.

La sélection de contraintes proportionnelles maintient les ancres d'un objet – qu'elles soient définies automatiquement ou manuellement – mais ajuste la distance de l'objet par rapport à chaque point d'ancre proportionnellement au redimensionnement.

Pour définir des contraintes proportionnelles pour un objet, cliquez sur le symbole pourcentage à la fin des boutons d'ancre.

Moqups format panel showing the proportional anchors buttons

La vidéo suivante démontre le comportement d'étirement par défaut, comparé aux contraintes automatiques et aux contraintes proportionnelles :

Contraintes pour les groupes imbriqués

Si vous activez des contraintes de redimensionnement pour un groupe parent, les groupes imbriqués sont traités comme des objets individuels, et peuvent avoir des ancres automatiques ou manuelles appliquées.

Si vous souhaitez définir des ancres pour des objets dans ces groupes « enfants », vous devrez activer les contraintes pour eux séparément. Après cela, vous pouvez définir des ancres pour les objets dans le groupe imbriqué, comme vous le feriez pour le groupe parent plus large.

Pour activer les contraintes pour un groupe imbriqué :

  1. Sélectionnez le groupe imbriqué.
  2. Dans la section Options de groupe, choisissez Activer les contraintes de redimensionnement.
  3. Cliquez sur n'importe quel objet dans le groupe imbriqué pour ouvrir les contrôles de Contraintes.
Resize constraints feature for nested groups

Désactiver les contraintes de redimensionnement

Pour désactiver les contraintes :

  1. Cliquez sur le groupe pour révéler la section Options de groupe du Panneau de format.

  2. Décochez la case Activer les contraintes de redimensionnement

    ou

    • Dans la barre d'outils contextuelle, cliquez sur le bouton Désactiver les contraintes de redimensionnement
Disable resize constraints

Verrouiller et déverrouiller des pochoirs

Une fois qu'un objet est verrouillé, il est fixé en place – et ne peut plus être déplacé ni stylisé. Cela vous permet de continuer à modifier le reste des objets sur la page sans perturber les parties terminées de votre design.

Pour travailler avec un objet verrouillé, vous devez d'abord cliquer dessus intentionnellement. Pour éviter la sélection accidentelle d'objets verrouillés, ils ne répondent pas à la sélection par glisser la souris.

Pour verrouiller un pochoir :

  • Sélectionnez le pochoir puis utilisez le Menu contextuel accessible par clic droit pour choisir l'option Verrouiller la sélection, ou utilisez le Raccourci clavier : Ctrl/Cmd + L (ce raccourci fonctionne à la fois pour Verrouiller et Déverrouiller).

    ou

  • En haut du Panneau de format, cliquez sur le bouton Verrouiller à droite du Nom de l'objet ; une fois qu'un objet est verrouillé, toutes les options de formatage pour cet objet seront indisponibles jusqu'à ce qu'il soit déverrouillé.

    ou

  • Dans le Panneau de contour, cliquez sur le bouton Verrouiller à droite du nom du pochoir ; le bouton s'assombrira lorsqu'il est verrouillé.

Lorsqu'il est verrouillé, le pochoir affichera un cadre rouge en survol et, une fois le pochoir sélectionné, un bouton verrou s'affichera dans le coin supérieur gauche du cadre rouge. Ce bouton peut être utilisé pour déverrouiller le pochoir.

Pour déverrouiller un pochoir :

  • Sélectionnez le pochoir et cliquez sur le bouton Verrou rouge dans le coin supérieur gauche de la bordure rouge.

    ou

  • Sélectionnez le pochoir puis utilisez le Menu contextuel accessible par clic droit pour choisir l'option Déverrouiller la sélection, ou utilisez le Raccourci clavier : Ctrl/Cmd + L (ce raccourci fonctionne à la fois pour Verrouiller et Déverrouiller).

    ou

  • Dans le Panneau de contour, cliquez sur le bouton Verrouiller à droite du nom du pochoir ; le bouton sera grisé lorsqu'il est déverrouillé.

Pour verrouiller ou déverrouiller une sélection de pochoirs :

  • Sélectionnez les pochoirs puis utilisez le Menu contextuel accessible par clic droit pour choisir l'option Déverrouiller la sélection, ou utilisez le Raccourci clavier : Ctrl/Cmd + L (ce raccourci fonctionne à la fois pour Verrouiller et Déverrouiller)

Pour déverrouiller tous les objets quand il y a un mélange d'objets verrouillés et déverrouillés sur la page :

  1. Utilisez Ctrl/Cmd + A pour sélectionner tous les objets déverrouillés sur la page
  2. Utilisez Ctrl/Cmd + L pour verrouiller tous les objets
  3. Utilisez Ctrl/Cmd + L une fois de plus pour déverrouiller tous les objets

Arranger et aligner des pochoirs

Le Menu déroulant Arranger dans la Barre d'outils supérieure vous permet de superposer, aligner et distribuer des objets pour créer un design propre et équilibré.

Arranger des objets

La fonctionnalité Arranger vous permet d'empiler des objets, puis de les déplacer en avant et en arrière dans les couches.

Pour arranger un objet :

  1. Sélectionnez l'objet que vous souhaitez arranger
  2. Accédez à la fonctionnalité Arranger :
  • Accédez à la Barre d'outils supérieure et cliquez sur le bouton Arranger pour ouvrir le menu déroulant

    ou

  • Faites un clic droit sur l'objet pour ouvrir le Menu contextuel et survolez l'option Arranger pour ouvrir le menu déroulant

  • Choisissez une action de couche : Mettre au premier plan, Mettre en avant, Envoyer en arrière, Envoyer à l'arrière

Aligner des objets

La fonctionnalité Alignement arrange des objets le long d'un axe vertical ou horizontal commun, et les distribue également dans leur espace partagé.

La Barre d'outils contextuelle est le moyen le plus rapide d'aligner plusieurs objets. Lorsque vous sélectionnez plus d'un objet, la barre d'outils apparaît automatiquement juste au-dessus de cette sélection. En plus de l'alignement, la barre d'outils permet également de regrouper et dégrouper rapidement les objets sélectionnés.

Vous pouvez également définir un objet de référence – ce qui signifie que n'importe quel groupe d'objets sélectionné s'alignera par rapport à cet objet.

Pour définir un objet de référence, sélectionnez plusieurs objets, puis cliquez sur l'un d'eux ; une bordure bleue épaisse apparaîtra immédiatement autour de cet objet. Tous les objets s'aligneront maintenant par rapport à cet objet de référence désigné. Pour désélectionner l'objet de référence, cliquez simplement en dehors de votre sélection.

Il y a trois autres façons d'accéder aux options d'Alignement :

  • Accédez à la Barre d'outils supérieure et cliquez sur le bouton Arranger pour ouvrir le menu déroulant

ou

  • Faites un clic droit sur un objet pour ouvrir le Menu contextuel, et survolez l'option Aligner pour ouvrir le menu déroulant

ou

  • Accédez à la Barre latérale droite et ouvrez le Panneau de format. En haut, vous trouverez les Boutons d'alignement et de distribution rapides

Lorsqu'un objet unique (ou des objets « regroupés ») est sélectionné, les contrôles d'alignement aligneront l'objet par rapport aux limites de la page. Notez que cette fonction n'est pas disponible lors de l'utilisation de la Barre d'outils contextuelle.

Utiliser le Panneau de contour

Le Panneau de contour garde tous vos objets organisés dans une liste unique et consultable.

Parcourez les objets et leurs hiérarchies dans l'Arborescence de contour, ou utilisez le champ de recherche pour localiser rapidement un objet spécifique. Les icônes de contour devant les noms d'objets facilitent la distinction entre les types de pochoirs.

Utilisez l'Arborescence de contour pour renommer, rechercher, réorganiser, verrouiller, basculer la visibilité et supprimer des objets.

Pour ouvrir le Panneau de contour :

  1. Accédez à la Barre latérale gauche
  2. Cliquez sur l'Onglet Contour. L'onglet deviendra bleu et ouvrira le Panneau de contour

Pour sélectionner un objet dans le Panneau de contour :

  • Cliquez sur son nom. Si vous sélectionnez un Groupe, cliquez sur l'icône Flèche gauche pour voir rapidement le contenu et la hiérarchie du Groupe.

Vous pouvez verrouiller et déverrouiller des objets directement depuis le Panneau de contour en cliquant sur le bouton verrou à droite du nom de l'objet. En savoir plus sur le verrouillage des objets ici.

Pour renommer un objet ou un groupe d'objets dans le Panneau de contour :

  1. Le Panneau de contour liste tous les objets sur la page : Pochoirs, Modèles, Images et Icônes
  2. Survolez un élément dans l'Arborescence de contour et, sur la page, une bordure bleue mettra simultanément en surbrillance l'objet correspondant
  3. Après avoir localisé l'objet, double-cliquez sur son nom pour le modifier

Vous pouvez également profiter de la Synchronisation des noms dans le Panneau de contour lorsque vous travaillez avec des pochoirs de diagramme ou de texte :

Lorsque vous saisissez du texte dans un pochoir d'organigramme, ou dans les pochoirs Paragraphe, Titre et Étiquette, ces pochoirs adoptent automatiquement ce texte comme nom. Cela facilite l'identification d'objets spécifiques dans le Panneau de contour, notamment dans des diagrammes de flux et de processus complexes, ou dans des designs détaillés.

Si vous ne souhaitez pas qu'un objet soit étiqueté avec son texte, il vous suffit d'écraser le nom généré automatiquement dans le Panneau de contour ou le Panneau de format et il persistera.

Pour rechercher un objet dans le Panneau de contour :

  1. Sélectionnez le Champ de recherche en haut du Panneau de contour
  2. Saisissez le nom de l'élément que vous souhaitez trouver

Pour réorganiser un objet ou un groupe d'objets dans le Panneau de contour :

  1. Sélectionnez l'objet que vous souhaitez déplacer
  2. Glissez et déposez cet objet vers le haut ou vers le bas dans l'Arborescence de contour
  3. Notez que déplacer un objet vers le haut ou vers le bas dans une hiérarchie de groupe, ou dans l'Arborescence de contour, affectera également son arrangement en couches sur la page

Pour masquer un objet, il vous suffit de basculer la visibilité de l'objet en cliquant sur l'icône Œil de visibilité à droite du nom de l'objet dans l'Arborescence de contour.

Modifier la visibilité d'un objet est essentiel lors de l'ajout d'Interactions. Vous souhaiterez souvent que l'interaction commence avec l'objet dans un état invisible. Pour en savoir plus sur les Interactions et le prototypage, rendez-vous ici.

Pour supprimer un objet ou un groupe d'objets depuis le Panneau de contour :

  1. Sélectionnez l'objet que vous souhaitez supprimer
  2. Utilisez la touche Suppr pour supprimer cet objet