Figma Sites a été lancé en version bêta ouverte à l'occasion de Config 2025. Il est actuellement disponible sur tous les forfaits payants, avec une expérience limitée du forfait de base qui sera bientôt disponible. En savoir plus sur ce qui est inclus dans la version bêta.
Qui peut utiliser cette fonctionnalité
Disponible pour tous les forfaits payants
Requiert un accès éditeur au fichier
Figma Sites vous permet de créer et de publier des sites Web en utilisant les mêmes outils puissants disponibles dans Figma Design.
Créer des designs dans Figma Sites
Lorsque vous travaillez dans Figma Sites, vous pouvez concevoir des designs directement dans une page web ou utiliser le plan de travail comme espace pour donner vie à vos idées.
- Créez des éléments de design. Tout comme dans un fichier de design, commencez par ajouter des cadres, des formes, du texte ou tout autre élément de design au fichier.
- Rendez-les interactifs. Utilisez la disposition automatique et les contraintes pour adapter votre site aux différentes tailles d’écran.
- Réutilisez les éléments de design. Maintenez la cohérence de votre site en créant des composants, des styles ou des variables, ou en utilisant des ressources existantes issues d'une bibliothèque.
- Publier une bibliothèque. Partagez des composants, des styles ou des variables pour que les utilisateurs puissent y accéder dans d'autres fichiers.
- Ajoutez de l'interactivité. Comme le prototypage dans Figma Design, utilisez des interactions pour ajouter du mouvement et des animations aux éléments de design.
Une fois que vous avez ajouté des designs à une page Web, vous pouvez les prévisualiser et les publier (sans aucun codage).
Que se passe-t-il lorsque j'effectue un copier-coller entre Figma Design et Figma Sites ?
En général, transférer vos projets entre Figma Design et Figma Sites devrait être simple.
Les designs apparaissent exactement de la même manière sur les deux produits, et les fonctionnalités plus complexes sont automatiquement traduites entre eux. Par exemple, les connexions de prototypes dans Figma Design sont automatiquement converties en interactions correspondantes dans Figma Sites.
En savoir plus sur le passage d’un produit à l’autre.
Outils pris en charge entre Figma Design et Figma Sites
Lorsque vous créez des designs dans Figma Sites, vous avez accès à la plupart des fonctionnalités disponibles dans Figma Design. Vous trouverez la documentation sur l'utilisation de chaque fonctionnalité dans les liens ci-dessous.
Outils de design
|
|
Disponible dans Figma Design |
Disponible dans Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
Les polices personnalisées installées sur votre ordinateur ne sont pas actuellement disponibles pour une utilisation dans Figma Sites, mais elles le seront à l'avenir. |
|
|
✓ |
✓ |
|
|
Modifier les chemins vectoriels, y compris les opérations booléennes |
✓ |
✓ |
|
✓ |
✓ |
|
|
✓ |
Figma Sites propose des fonctionnalités supplémentaires d'édition sur plusieurs points d'arrêt. |
|
|
✓ |
Disponibles prochainement. |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
✓ |
✓ |
|
|
✓ |
Certaines fonctionnalités communes avec Figma Design. En savoir plus. |
|
|
✓ |
✓ |
|
|
✓ |
Les sections peuvent contenir des designs, mais pas de pages web. |
|
|
X |
✓ |
|
|
X |
✓ |
|
|
✓ |
X |
|
|
✓ |
X |
|
|
X |
✓ |
Outils de collaboration
|
|
Disponible dans Figma Design |
Disponible dans Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
Spotlight ne suivra pas une personne si elle est dans une vue plein écran comme Make ou Paramètres. |
|
|
✓ |
X |
Design systems et publication
|
|
Disponible dans Figma Design |
Disponible dans Figma Sites |
|---|---|---|
|
✓ |
Vous pouvez créer et gérer des composants comme dans Figma design. Seules les instances peuvent être utilisées dans une page web. |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
X |
Propriétés prises en charge entre Figma Design et Figma Sites
|
|
Disponible dans Figma Design |
Disponible dans Figma Sites |
|---|---|---|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
✓ |
✓ |
|
|
X |
✓ |
|
|
X |
✓ |
|
|
✓ |
✓ |