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 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.
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 surbrillance sur le canvas.
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. » 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 le design. Appuyez sur Cmd+V sur Mac ou Ctrl+V sur Windows pour coller. Les écrans Flowstep apparaissent sur votre canvas Figma, prêts à être modifié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. Le basculement d’onglets au milieu de la copie interrompt le transfert ; gardez l’onglet Flowstep en focus jusqu’à ce que la copie soit terminée.
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 depuis vos paramètres. Flowstep utilise l’autorisation de Figma pour lire les fichiers auxquels vous avez accès.
2
Copiez un lien de cadre dans Figma
Dans Figma, faites un clic 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 à 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 cadre en éléments modifiables sur votre canvas. La réimportation du même cadre le met à jour en place.
Ce qui est importé
Flowstep recrée un cadre Figma en tant qu’éléments natifs et modifiables — pas une image plate. Une importation apporte :- Cadres et leurs calques imbriqués
- Texte, y compris le style par caractère comme le poids, la couleur et le gras
- Couleurs de vos variables Figma
- Remplissages d’images et icônes SVG et formes
- Ombres internes et externes, et flous de calque et d’arrière-plan
- Traits pointillés et pointés
L’organisation du fichier doit avoir Figma connecté. Si un cadre ne s’importe pas, Flowstep affiche un message exploitable qui vous dit quoi faire ensuite — par exemple, reconnecter Figma si votre autorisation a expiré, attendre et réessayer si Figma est limité en débit ou lent à répondre, ou, pour un modèle Community, le dupliquer dans votre équipe d’abord et coller le nouveau lien.