Flowstep et Figma sont complémentaires, et non concurrents. Flowstep vous aide à générer et explorer rapidement des idées de conception d’interface ; Figma est l’endroit où vous affinez, collaborez et finalisez un travail prêt pour la production. Utiliser les deux ensemble vous offre le meilleur des deux outils.
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 fois. Assurez-vous que la sélection est mise en évidence 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 the current tab. » pendant le traitement ; la copie se termine en quelques instants.
3
Collez dans votre fichier Figma
Passez à Figma et ouvrez le fichier dans lequel 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 une erreur d’autorisation s’affiche, 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 au premier plan jusqu’à la fin de la copie.
Importer une conception depuis Figma
Vous pouvez aussi faire l’inverse et importer un cadre Figma dans Flowstep sous forme d’écrans modifiables. L’importation est disponible pour tous : connectez votre compte Figma une seule fois, puis importez à partir d’un lien de cadre.1
Connecter 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
Copier un lien de cadre dans Figma
Dans Figma, faites un clic droit sur le cadre souhaité, puis choisissez Copy link to selection. Vous pouvez aussi copier le lien d’une page entière pour importer d’un coup tous ses cadres de premier niveau.
3
Importer dans Flowstep
Utilisez l’option d’importation Figma dans la barre d’outils de Flowstep, puis 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 à plat. Une importation transfère :- Les cadres et leurs calques imbriqués
- Le texte, y compris le style appliqué caractère par caractère, comme le poids, 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 pointillés et en tirets
L’organisation du fichier doit avoir Figma connecté. Si un cadre ne s’importe pas, Flowstep affiche un message exploitable qui vous indique la marche à suivre. Par exemple, reconnectez Figma si votre autorisation a expiré, patientez puis réessayez si Figma limite le nombre de requêtes ou répond lentement, ou, pour un modèle de la communauté, dupliquez-le d’abord vers votre équipe puis collez le nouveau lien.