Flowstep et Figma sont des outils complémentaires, pas des concurrents. Flowstep vous aide à générer et explorer rapidement des idées de design UI ; Figma est l’endroit où vous affinez, collaborez et construisez des travaux prêts pour la production. Utiliser les deux ensemble vous offre le meilleur des deux.
Comment copier un design 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 à la 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 this tab and keep the screen selected » pendant qu’il travaille ; la copie se termine en un instant.
3
Collez dans votre fichier Figma
Basculez vers Figma et ouvrez le fichier où vous souhaitez placer le design. 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 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. Basculer d’onglet pendant la copie interrompt le transfert ; gardez l’onglet Flowstep actif jusqu’à ce que la copie se termine.
Importer un design depuis Figma
Vous pouvez aussi faire l’inverse et importer un cadre Figma dans Flowstep comme écrans modifiables. L’importation est disponible pour tous — connectez votre compte Figma une fois, puis importez à partir d’un lien de cadre.1
Connectez Figma
Connectez votre compte Figma à Flowstep à partir de vos paramètres. Flowstep utilise l’autorisation Figma pour lire les fichiers auxquels vous avez accès.
2
Copiez un lien de cadre dans Figma
Dans Figma, cliquez avec le bouton droit sur le cadre que vous souhaitez et choisissez Copy link to selection. Vous pouvez aussi copier un lien vers une page entière pour importer tous ses cadres de niveau supérieur en même temps.
3
Importez dans Flowstep
Utilisez l’option d’importation Figma dans la barre d’outils Flowstep et collez le lien. Flowstep convertit le cadre en éléments modifiables sur votre canevas. Réimporter le même cadre le met à jour sur place.
Ce qui est importé
Flowstep recrée un cadre Figma en éléments natifs et modifiables — pas en image plate. Une importation apporte :- Des cadres et leurs couches imbriquées
- Du texte, y compris le style par caractère comme le poids, la couleur et le gras
- Des couleurs à partir de vos variables Figma
- Des remplissages d’image et des icônes et formes SVG
- Les ombres portées et intérieures, ainsi que les flous de couche et d’arrière-plan
- Les traits pointillés et pointés
L’organisation du fichier doit avoir Figma connecté. Si un cadre n’importe pas, Flowstep affiche un message clair qui vous dit quoi faire ensuite — par exemple, reconnecter Figma si votre autorisation a expiré, attendre et réessayer si Figma vous limite ou répond lentement, ou, pour un modèle de communauté, le dupliquer à votre équipe d’abord et coller le nouveau lien.