Flowstep et Figma sont des outils complémentaires, pas des concurrents. Flowstep vous aide à générer et à explorer rapidement des idées de conception d’interface; Figma sert à peaufiner, à collaborer et à élaborer des travaux prêts pour la production. Utiliser les deux ensemble vous offre le meilleur des deux.
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-en plusieurs pour les copier tous d’un coup. Assurez-vous que la sélection est en surbrillance dans le canevas.
2
Copiez la sélection
Appuyez sur **Cmd+**⇧+C sur Mac ou **Ctrl+**⇧+C sur Windows. Flowstep affiche le message « Preparing your design. Stay on the current tab. » (« Préparation de votre conception. Restez sur l’onglet actuel. ») pendant le traitement; la copie se termine en quelques instants.
3
Collez dans votre fichier Figma
Passez à Figma et ouvrez le fichier où vous voulez 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 modifiés.
La copie vers Figma utilise le presse-papiers de votre navigateur; le navigateur doit donc autoriser Flowstep à y accéder. Si vous voyez une erreur d’autorisation, autorisez l’accès au presse-papiers dans les paramètres de votre navigateur, puis réessayez. Passer à un autre onglet pendant la copie interrompt le transfert; gardez l’onglet Flowstep actif jusqu’à la fin de la copie.
Importer une conception depuis Figma
Vous pouvez aussi faire le trajet inverse et apporter un cadre Figma dans Flowstep sous forme d’écrans modifiables. L’importation est offerte à tous : connectez votre compte Figma une seule fois, puis importez à partir d’un lien vers un cadre.1
Connectez Figma
Connectez votre compte Figma à Flowstep depuis vos paramètres. Flowstep utilise l’autorisation de Figma pour lire les fichiers auxquels vous avez accès.
2
Copiez un lien vers un cadre dans Figma
Dans Figma, faites un clic droit sur le cadre voulu et choisissez Copy link to selection. Vous pouvez aussi copier un lien vers une page entière pour importer tous ses cadres de premier niveau à la fois.
3
Importez dans Flowstep
Utilisez l’option d’importation Figma dans la barre d’outils de Flowstep et collez le lien. Flowstep convertit le cadre en éléments modifiables sur votre canevas. Chaque importation ajoute un nouvel écran : importer de nouveau le même cadre ne remplace pas l’importation précédente. Supprimez donc l’ancien écran si vous n’en avez plus besoin.
Ce qui est importé
Flowstep recrée un cadre Figma sous forme d’éléments natifs et modifiables, et non d’une image aplatie. Une importation transfère :- Les cadres et leurs calques imbriqués
- Le texte, y compris la mise en forme caractère par caractère, comme l’épaisseur, la couleur et le gras
- Les couleurs de vos variables Figma
- Les remplissages d’image, ainsi que les icônes et formes SVG
- Les ombres portées et intérieures, ainsi que les flous de calque et d’arrière-plan
- Les contours en tirets et en pointillés
L’organisation propriétaire du fichier doit avoir Figma connecté. Si un cadre ne s’importe pas, Flowstep affiche un message exploitable qui indique quoi faire ensuite. Par exemple, reconnectez Figma si votre autorisation a expiré, attendez puis réessayez si Figma limite le débit ou répond lentement, ou, pour un modèle Community, dupliquez-le d’abord dans votre équipe, puis collez le nouveau lien.