L'inspecteur
Chaque section et chaque contrôle de l'inspecteur, expliqués un par un.
L'inspecteur est l'endroit où vous façonnez un élément sélectionné — sa taille, sa couleur, ses coins, ses effets, son texte, son animation et plus encore. Chaque section est contextuelle : un panneau n'apparaît que lorsqu'il s'applique à l'élément que vous avez sélectionné, si bien qu'une ligne affiche les options LINE tandis qu'une case à cocher affiche les options CHECKBOX. Cette page passe en revue chaque section et chaque contrôle que vous y trouverez.
Les sections n'apparaissent que lorsqu'elles sont pertinentes pour l'élément sélectionné, si bien que vous les verrez rarement toutes à la fois — l'inspecteur s'adapte à ce que vous avez choisi.
Nom
Le champ Nom renomme l'élément sélectionné. C'est l'étiquette que vous verrez dans la liste des calques, donnez donc aux éléments des noms clairs pour garder les grandes conceptions faciles à gérer. Vous pouvez aussi renommer directement dans le panneau des calques en double-cliquant sur le calque.
Position
La section Position contrôle l'emplacement de l'élément et sa taille. Les valeurs sont exprimées en pourcentages / fractions de l'écran pour que votre mise en page reste responsive sur toutes les résolutions.
| Contrôle | Ce qu'il définit |
|---|---|
| X | Position horizontale en % / fraction de l'écran. |
| Y | Position verticale en % / fraction de l'écran. |
| Largeur | Largeur de l'élément en % / fraction de l'écran. |
| Hauteur | Hauteur de l'élément en % / fraction de l'écran. |
| Rotation | Fait pivoter l'élément — affiché uniquement pour les éléments pivotables. |
Remplissage
La section Remplissage définit la couleur intérieure de l'élément à l'aide du sélecteur de couleur avancé (décrit en détail à la fin de cette page). Elle contient aussi une sous-section Dégradé pour les remplissages multicolores.
Dégradé
- Activer — active le remplissage en dégradé pour l'élément.
- 2 couleurs ou 3 couleurs — choisissez un dégradé à deux ou trois arrêts.
- Direction — réglez le dégradé pour qu'il aille en vertical ou en horizontal.
- Option radiale — passez d'un dégradé linéaire à un dégradé radial.
- Contour en dégradé — appliquez le dégradé également au contour de l'élément.
Contour
La section Contour ajoute une bordure autour de l'élément. Définissez son épaisseur et sa couleur — et comme les contours prennent en charge les dégradés, la couleur peut être un contour en dégradé plutôt qu'une couleur unie.
Coins
La section Coins contrôle la façon dont les coins de l'élément sont dessinés. Définissez un rayon de coin et choisissez un style de coin.
Ombre
La section Ombre projette une ombre portée douce derrière l'élément. Ajustez le décalage de l'ombre (de combien elle est déplacée) et son flou (à quel point le bord est doux) pour ajouter de la profondeur par rapport à l'arrière-plan.
Profondeur 3D
La section Profondeur 3D donne à un élément une impression de dimension physique. Choisissez un style, définissez une direction de lumière et réglez l'intensité de l'effet — ou appliquez un préréglage en un clic.
| Style | Effet |
|---|---|
| Biseau | Bords chanfreinés et surélevés. |
| Estampage | Aspect pressé / gravé en creux. |
| Doux (neumorphique) | Profondeur douce, neumorphique. |
| 3D (extrusion) | Corps 3D extrudé et plein. |
| Long | Effet de profondeur à ombre longue. |
- Direction de la lumière — choisissez d'où vient la lumière : tl (en haut à gauche), tr (en haut à droite), bl (en bas à gauche) ou br (en bas à droite).
- Quantité de profondeur — contrôle à quel point l'effet 3D est prononcé.
- Préréglages — appliquez un aspect de profondeur prêt à l'emploi en un clic.
Texte
La section Texte met en forme tout élément qui affiche du texte. Choisissez une police dans la liste intégrée, définissez l'alignement et l'échelle, choisissez une couleur, et importez vos propres polices de caractères.
| Contrôle | Options |
|---|---|
| Police | Choisissez dans la liste de polices intégrée. |
| Alignement horizontal | gauche / centre / droite |
| Alignement vertical | haut / centre / bas |
| Échelle du texte | Mettez à l'échelle la taille du texte. |
| Couleur | Définissez la couleur du texte via le sélecteur de couleur. |
| Importer une police | Importez une police .ttf / .otf depuis votre PC. |
Utilisez Importer une police .ttf / .otf pour charger une police personnalisée directement depuis votre PC lorsque la liste intégrée n'a pas l'aspect que vous recherchez.
Case à cocher
Pour les éléments de case à cocher, la section Case à cocher définit le Côté de la case — si la case se place à gauche ou à droite de son étiquette.
Ligne
Pour les éléments de ligne, la section Ligne définit le style — plein, tirets ou pointillés — et l'espacement des tirets / points qui contrôle l'écart entre les tirets ou les points.
Volume / progression
Pour les éléments de volume et de progression, cette section choisit entre le mode remplissage et le mode centre pour la façon dont la barre grandit, et définit le placement de l'étiquette.
Animation
La section Animation donne vie à un élément. Les animations se jouent dans l'aperçu et sont exportées avec votre conception, si bien que ce que vous voyez est ce qui est livré.
| Réglage | Options |
|---|---|
| Type | move, rotate, spin, scale, pulse, bounce, shake, orbit |
| Mode | pingpong / loop |
| Accélération | linear / sine / inout |
Image
Pour les éléments d'image, la section Image offre deux façons de définir la source :
- Importer une image depuis le PC — le fichier importé est livré dans la ressource avec votre conception.
- Pointer vers un chemin — référencez une image qui existe déjà dans la ressource.
Panneau Blueprint
Le panneau Blueprint contrôle le comportement d'un élément en tant que conteneur :
- Agir comme fenêtre / panneau — fait en sorte que l'élément se comporte comme un conteneur de fenêtre ou de panneau.
- Commence ouvert — l'élément est affiché dans son état ouvert dès le départ.
Opacité
L'Opacité est disponible par élément, ce qui vous permet de rendre n'importe quel élément individuel plus ou moins transparent indépendamment du reste de votre conception.
Le sélecteur de couleur
Chaque contrôle de couleur dans l'inspecteur — remplissage, contour, texte et arrêts de dégradé — ouvre le même sélecteur de couleur avancé. Il vous donne un contrôle précis à travers plusieurs modes et méthodes de saisie.
| Fonctionnalité | Ce qu'elle fait |
|---|---|
| Roue TSV | Choisissez la teinte et la saturation visuellement sur une roue chromatique. |
| Curseurs de valeur et alpha | Ajustez la luminosité (valeur) et la transparence (alpha). |
| Modes RVB / TSL / HEX | Basculez le modèle de saisie entre RVB, TSL et HEX. |
| Champ hexadécimal | Saisissez une valeur de couleur hexadécimale exacte. |
| Couleur nommée la plus proche | Affiche la couleur nommée la plus proche de votre sélection. |
| Pipette | Prélevez n'importe quelle couleur à l'écran via le sélecteur de couleur du système. |
| Couleurs récentes | Réutilisez les couleurs que vous avez choisies récemment. |
Utilisez la pipette pour extraire une couleur exacte de n'importe où à l'écran, puis vérifiez l'indication de la couleur nommée la plus proche pour confirmer la teinte — et récupérez-la à nouveau plus tard depuis les couleurs récentes.