Flowstep et Figma sont des outils complémentaires, non des 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. L’utilisation des deux ensemble vous donne le meilleur des deux.
Comment copier un design Flowstep vers 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 d’un coup. 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 « Préparation de votre design. Restez sur l’onglet actuel. » tandis qu’il fonctionne ; la copie se termine en un instant.
3
Collez dans votre fichier Figma
Passez à 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, de sorte que 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 ; gardez l’onglet Flowstep actif jusqu’à ce que la copie se termine.
Importer un design à partir de Figma
Vous pouvez également faire l’inverse et amener un frame Figma dans Flowstep en tant qu’écrans modifiables. L’importation est disponible pour tous — connectez votre compte Figma une fois, puis importez à partir d’un lien de frame.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 frame dans Figma
Dans Figma, faites un clic droit sur le frame que vous souhaitez et choisissez Copy link to selection. Vous pouvez également copier un lien vers une page entière pour importer tous ses frames de niveau supérieur à la fois.
3
Importez dans Flowstep
Utilisez l’option d’importation Figma dans la barre d’outils Flowstep et collez le lien. Flowstep convertit le frame en éléments modifiables sur votre canevas. La réimportation du même frame le met à jour sur place.
Ce qui est importé
Flowstep recrée un frame Figma comme éléments natifs modifiables — non pas comme une image plate. Une importation apporte :- Des frames et leurs calques imbriqués
- 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
- Des ombres internes et externes, et des flous de calque et d’arrière-plan
- Des traits pointillés et pointés
L’organisation du fichier doit avoir Figma connecté. Si un frame n’importe pas, Flowstep affiche un message exploitable qui vous indique quoi faire ensuite — par exemple, reconnecter Figma si votre autorisation a expiré, attendre et réessayer si Figma limite le débit ou répond lentement, ou, pour un modèle communautaire, le dupliquer dans votre équipe d’abord et coller le nouveau lien.