Comment utiliser une formule booléenne dans Figma

2023/08/30

Figma est connu comme l’un des meilleurs programmes pour les graphistes au monde. Ses fonctionnalités sont complètes et aident les utilisateurs à créer n’importe quoi, des logos accrocheurs aux pages de destination uniques. Notamment, la fonctionnalité booléenne (qui fait également partie de la mise à jour des propriétés des composants en 2002) vous permet de réaliser des formes personnalisées en combinant leurs calques via plusieurs formules.

Ici, vous apprendrez comment utiliser les fonctionnalités booléennes dans votre prochaine conception.

Les options de formule booléenne pour les formes personnalisées

Avant de créer votre forme personnalisée, vous devez savoir comment fonctionnent les formules booléennes et ce qu’elles permettent. Chaque fois que vous créez un groupe booléen, il compte comme un seul calque de forme avec des propriétés de remplissage et de contour.

Vous pouvez trouver l’icône booléenne avec deux carrés superposés dans la barre supérieure de votre interface. Vous aurez quatre options de formule dans le menu déroulant lorsque vous cliquerez dessus.

Ces options de formule incluent :

Sélection d’union – Cette option transforme vos formes sélectionnées en un groupe booléen. Lorsque vous utilisez Union, les chemins de la sous-forme externe formeront le contour de la nouvelle forme personnalisée. Cependant, il n’inclura aucun des segments internes qui se chevauchent.
Soustraire la sélection – Il est utile de considérer que cette option est à l’opposé de la sélection syndicale. Il supprime toute la zone d’une forme de la forme de base. Cela ne laisse visible que la couche inférieure.
Sélection par intersection – Avec la sélection par intersection, les utilisateurs peuvent créer une forme personnalisée composée uniquement des segments superposés des formes ou sous-couches d’origine.
Exclure la sélection – Exclure les fonctions est l’opposé de l’option de groupe booléen d’intersection. Son utilisation vous donnera une forme personnalisée à partir des parties non superposées des formes originales.

N’oubliez pas que vous devrez sélectionner au moins deux formes avant de pouvoir utiliser efficacement l’option booléenne du menu supérieur. En effet, Boolean combine uniquement plusieurs calques de forme en une seule forme personnalisée et complexe.

Utilisation de la propriété d’échange d’instance Figma

Lorsque Figma a annoncé la mise à jour des propriétés des composants en 2022, la sélection booléenne n’était que l’une des nombreuses nouvelles fonctionnalités disponibles. L’intérêt de la mise à jour des composants est de vous aider à créer des modèles de variantes de manière efficace plutôt que de fouiller dans des options compliquées.

Bien que le booléen soit un élément important, les utilisateurs peuvent également utiliser la propriété d’échange d’instance. Voici comment procéder :

Sélectionnez un élément de votre conception.
Accédez au menu d’échange d’instance sur le côté droit de l’interface et cliquez dessus. L’icône comporte un diamant avec une flèche dessus.
Donnez un nom à la propriété, tel que « icône » dans le menu contextuel, et définissez la valeur sur une coche, par exemple.
Sélectionnez « Créer une propriété ». Figma marquera ensuite la propriété du composant où se trouvait à l’origine le menu d’échange.
Créez une copie de votre conception en la sélectionnant et en utilisant la commande CTRL + C. Ensuite, placez les instances côte à côte.
Sélectionnez une nouvelle icône dans le menu des propriétés du composant marqué en cliquant dessus. Cela changera automatiquement l’élément sur l’instance.

La fonction d’échange d’instance est une question de commodité. Grâce à l’option d’échange d’instances, vous rationaliserez le processus de conception tout en basculant rapidement les variantes (instances) côte à côte.

Utilisation de l’option de propriété de texte pour des modifications d’instance faciles

Supposons que vous conceviez un bouton d’appel à l’action pour une page de destination. Vous disposez de deux variantes côte à côte et vous avez utilisé la propriété d’échange d’instance pour afficher différentes icônes. Cependant, la formulation est un autre élément à prendre en compte.

Habituellement, vous devrez parcourir la section des calques pour terminer le processus. Avec la propriété du composant de texte, vous pouvez plutôt afficher et modifier cela dans la barre latérale. Voici comment utiliser la fonctionnalité de propriété de texte à votre avantage :

Sélectionnez l’élément de texte sur votre conception.
Donnez à votre élément un nom tel que « texte » et la valeur « bouton » avant de cliquer sur « Créer une propriété ».
Vous pourrez alors modifier le texte et expérimenter la formulation de votre appel à l’action.

La propriété text est pratique à utiliser avec les options d’échange d’instance et booléennes.

Comment utiliser les propriétés de variantes sur Figma

Avec les nouvelles mises à jour de composants sur Figma, vous pouvez créer plusieurs variantes et toutes les contrôler depuis la barre latérale droite. Cela vous aidera à modifier le texte et à échanger les icônes plus efficacement. Vous pouvez également contrôler d’autres aspects de la conception de votre variante. Voyons comment procéder :

Sélectionnez votre design et cliquez sur « Ajouter une variante » dans la barre supérieure. Maintenez la touche gauche, cliquez sur votre design et faites glisser la variante juste à côté.
Vous remarquerez comment la deuxième propriété de variante apparaîtra dans la barre latérale droite. Renommez la propriété en « bouton » et la valeur à côté en « rouge ».
Ces propriétés étiquetteront désormais votre variante. Si vous sélectionnez votre conception d’origine, vous remarquerez que la valeur redevient « par défaut ».

FAQ

Puis-je créer des logos en utilisant l’option booléenne ?

Techniquement, la propriété booléenne vous permet de combiner plusieurs formes en utilisant leurs chemins. Bien que cela puisse être un moyen de créer des logos simples, les options sont limitées à des formes simples comme des ellipses. Au lieu de cela, il est préférable d’utiliser l’outil Plume pour des tâches telles que la création de logo. Vous pouvez toujours utiliser les autres mises à jour de composants pour faciliter le processus de superposition.

Puis-je modifier la police à l’aide de l’option de propriété du composant de texte ?

Malheureusement non. La propriété du composant texte vous permet de modifier le texte plutôt que la police. Cependant, vous pouvez toujours sélectionner le texte et trouver la police appropriée via la barre latérale droite.

Quelles sont les instances de conception dans lesquelles je devrai utiliser les propriétés des composants ci-dessus ?

Vous n’avez pas besoin d’utiliser les propriétés des composants pour les variantes. Cependant, cela rend le processus de conception beaucoup plus facile et plus rapide. Des exemples sont des boutons nécessitant des couleurs différentes, principalement similaires avec un seul changement de composant, ou de petites variantes de forme de page de destination. Ils sont également utiles pour créer deux modèles et choisir le meilleur.

Rationalisez votre processus de conception avec les propriétés des composants sur Figma

Avec des options telles que Booléen, vous pouvez créer de nouvelles formes personnalisées à partir d’une combinaison d’anciennes. Cela se fait via la barre latérale supérieure avec quatre options de formule. Ceux-ci incluent l’union, la soustraction, l’intersection et l’exclusion. De même, vous pouvez utiliser d’autres options de propriété de composant, telles que la propriété de texte et l’échange d’instance. Cela facilite la création de variantes avec différents composants. En fin de compte, l’utilisation des propriétés des composants permet de rationaliser le processus de conception.

Quelles formes complexes avez-vous réalisées en utilisant l’option booléenne ? Avez-vous également trouvé les options de propriétés des composants faciles à utiliser ? Faites-nous savoir dans la section commentaire ci-dessous.