Flowstep et Figma sont des outils complémentaires, pas concurrents. Flowstep vous aide à générer et explorer rapidement des idées de conception d’interface utilisateur ; Figma est l’endroit où vous affinez, collaborez et construisez un travail prêt pour la production. Utiliser les deux ensemble vous donne le meilleur des deux mondes.
Comment copier une conception Flowstep dans Figma
1
Sélectionnez un ou plusieurs écrans dans Flowstep
Cliquez sur un écran pour le sélectionner — ou sélectionnez plusieurs écrans pour les copier tous en une seule opération. Assurez-vous que la sélection est mise en surbrillance sur le canevas.
2
Copiez la sélection
Appuyez sur **Cmd+**⇧+C sur Mac ou **Ctrl+**⇧+C sur Windows. Flowstep affiche « Preparing your design — stay on this tab and keep the screen selected » pendant qu’il fonctionne ; la copie se termine en un instant.
3
Collez dans votre fichier Figma
Basculez vers Figma et ouvrez le fichier où vous souhaitez placer la conception. Appuyez sur Cmd+V sur Mac ou Ctrl+V sur Windows pour coller. Les écrans Flowstep apparaissent sur votre canevas Figma, prêts à être édités.
La copie vers Figma utilise le presse-papiers de votre navigateur, donc le navigateur doit autoriser l’accès au presse-papiers de Flowstep — si vous voyez une erreur de permission, autorisez l’accès au presse-papiers dans les paramètres de votre navigateur et réessayez. Changer d’onglet pendant la copie interrompt le transfert ; maintenez l’onglet Flowstep au premier plan jusqu’à ce que la copie se termine.
Importer une conception depuis Figma
Vous pouvez aussi faire le contraire et importer un écran Figma dans Flowstep comme écrans modifiables. L’importation est disponible pour tous — connectez votre compte Figma une fois, puis importez à partir d’un lien d’écran.1
Connectez Figma
Connectez votre compte Figma à Flowstep depuis vos paramètres. Flowstep utilise l’autorisation Figma pour lire les fichiers auxquels vous avez accès.
2
Copiez un lien d'écran dans Figma
Dans Figma, cliquez avec le bouton droit sur l’écran que vous souhaitez et choisissez Copy link to selection. Vous pouvez également copier un lien vers une page entière pour importer tous ses écrans de haut niveau en une seule fois.
3
Importez dans Flowstep
Utilisez l’option d’importation Figma dans la barre d’outils Flowstep et collez le lien. Flowstep convertit l’écran en éléments natifs et modifiables sur votre canevas. Réimporter le même écran le met à jour sur place.
Ce qui est importé
Flowstep recréé un écran Figma sous forme d’éléments natifs modifiables — pas comme une image plate. Une importation apporte :- Les écrans et leurs couches imbriquées
- Le texte, y compris le style par caractère comme le poids, la couleur et le gras
- Les couleurs de vos variables Figma
- Les remplissages d’images, et les icônes et formes SVG
- Les ombres portées et internes, et les flous de couche et de fond
- Les traits en pointillés et pointés
L’organisation du fichier doit avoir Figma connecté. Si un écran n’importe pas, Flowstep affiche un message actionnable qui vous dit quoi faire ensuite — par exemple, reconnectez Figma si votre autorisation a expiré, attendez et réessayez si Figma limite la fréquence ou répond lentement, ou, pour un modèle communautaire, dupliquez-le d’abord dans votre équipe et collez le nouveau lien.