Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible pour tous les forfaits 

Toute personne ayant l'accès peut éditer peut modifier le rayon d'angle et le lissage

Dans le design d'interface, les écrans, les icônes, les boutons et les cartes possèdent des coins arrondis. Les yeux suivent plus facilement les cercles et les courbes, tandis que les angles vifs perturbent notre vision.

Figma représente le rayon d'angle en pixels (indépendants de la densité). Vous pouvez ajuster le rayon d'angle pour une forme entière ou pour chaque point d'un objet vectoriel.

Figma dispose de deux fonctionnalités pour créer des angles arrondis :

• Rayon d'angle : permet d'arrondir l'angle où deux lignes se rencontrent. Utilisez cette fonctionnalité pour créer des formes aux angles arrondis.
• Lissage des angles : permet d'ajuster un angle arrondi pour créer une courbe continue. Utilisez ce paramètre pour créer des « squircles ».

Vous pouvez utiliser le rayon d'angle et le lissage avec les éléments suivants :

• Cadres
• Rectangles, polygones et étoiles
• Réseaux vectoriels qui sont des formes fermées
• Opérations booléennes contenant des rectangles

Régler le rayon d'angle pour une forme entière

Il existe plusieurs façons de régler le rayon d'angle d'un objet ou d'une forme vectorielle.

Onglet Design

1. Sélectionnez le calque.
2. Saisissez une valeur de pixels dans le champ Corner radius dans la barre latérale sur la droite ou passez votre curseur sur l'icône, puis cliquez et faites glisser vers la gauche pour réduire le rayon ou vers la droite pour l'augmenter.

Plan de travail

Vous pouvez également modifier le rayon d'angle des rectangles, des étoiles et des polygones sur le plan de travail. 

1. Sélectionnez la forme que vous souhaitez mettre à jour.
2. Passez votre curseur sur l'angle que vous souhaitez ajuster jusqu'à ce que la poignée en forme de rayon apparaisse.
3. Glissez pour ajuster le rayon.

Modifier le rayon d'un seul angle

Par défaut, Figma applique le rayon d'angle à l'ensemble de la forme. Il existe plusieurs façons d'ajuster le rayon d'un seul angle. 

Régler individuellement des angles (rectangles et frames uniquement)

Le paramètre Independent corners est disponible pour les rectangles et les frames. 

1. Sélectionnez le rectangle ou la frame que vous souhaitez mettre à jour.
2. Cliquez sur Independent corners dans la barre latérale droite.
3. Dans le panneau  Corner radius details, vous pouvez :
   • Saisir une valeur de pixels pour chaque angle
   • Cliquer sur Apply variable dans l'un des quatre champs de rayon d'angle pour appliquer une variable numérique
   • Utiliser le curseur pour ajuster le lissage des angles

1.  

Plan de travail (rectangles uniquement)

Vous pouvez également ajuster le rayon de l'angle pour un seul angle du plan de travail. Ceci ne s'applique qu'aux rectangles.

1. Sélectionnez la forme que vous souhaitez mettre à jour.
2. Maintenez la touche de modification enfoncée pour ajuster un seul angle.
   • Mac : ⌥ Option
   • Windows : Alt
3. Passez votre curseur sur l'angle que vous souhaitez ajuster jusqu'à ce que la poignée en forme de rayon apparaisse.
4. Glissez pour ajuster le rayon.

Mode Modification de vecteur (formes et réseaux vectoriels fermés uniquement)

1. Sélectionnez la forme que vous souhaitez mettre à jour.
2. Cliquez sur Edit object dans la barre d'outils ou appuyez sur Entrée ou Retour pour activer le mode Modification de vecteur.
3. Sélectionnez un point sur le plan de travail.
4. Ajustez le rayon de l'angle en utilisant le champ dans la barre latérale droite.
5. Saisissez une valeur de pixels dans le champ Corner radius ou passez votre curseur sur l'icône , puis faites glisser vers la gauche pour réduire le rayon ou vers la droite pour l'augmenter.

Lisser les angles des squircles

Les designers ont remarqué une différence avec les angles arrondis des icônes des applications iOS 7. Le lissage des angles a permis de créer une courbe continue et homogène, ce qui n'était pas possible avec des angles arrondis classiques.

Nous nous référons aux formes qui utilisent cet effet squircle particulier, une forme à mi-chemin entre un carré et un cercle. Nous voyons toujours des squircles dans les derniers modèles d'Apple, y compris iOS 14.

De nombreux calculs entrent dans la conception d'un squircle. En savoir plus sur la recherche d'un ingénieur Figma en matière de squircles.

Ajuster le lissage des angles

Vous pouvez lisser les angles de n'importe quelle forme sur laquelle vous pouvez appliquer un rayon d'angle. Contrairement au rayon d'angle, vous pouvez uniquement lisser tous les angles d'une forme.

1. Sélectionnez le calque sur le plan de travail ou dans le panneau des calques.
2. Ouvrez le Panneau de design dans la barre latérale située à droite.
3. Cliquez sur l'icône Independent corners pour ouvrir le panneau Corner radius.
4. Utilisez le curseur pour régler le lissage des angles ou cliquez sur iOS pour définir le lissage des angles à 60 %, la valeur par défaut pour iOS.