Principle et Figma
Principle est un outil de design d’interaction qui vous permet de donner vie à vos designs et prototypes numériques.
Un nombre incroyable d’interactions vous est proposé : du défilement au glissement de fichiers, de la gestion de plusieurs états à la création d’animations personnalisées, en passant par des transitions ultra-fluides. Apprenez-en plus sur Principle ici.
Après avoir connecté Figma à votre compte Principle, vous pouvez facilement importer vos designs depuis Figma et commencer à concevoir des animations avancées.
Avec Figma et Principle, vos designs revêtent une véritable authenticité.
Dans cet article, nous allons vous expliquer comment :
- Connecter Figma et Principle
- Importer un design depuis Figma
- Déconnecter votre compte Figma de Principle
Connecter Figma et Principle
Pour connecter Figma et Principle, vous devez avoir créé un compte dans chacun des deux outils. Actuellement, Principle est uniquement disponible sur macOS.
Lorsque vous importez pour la première fois un design depuis Figma, vous êtes invité(e) à saisir vos identifiants Figma pour autoriser la connexion. Vous y serez invité(e) uniquement la première fois que vous utilisez l’option Import from Figma.
- Ouvrez Principle.
- Accédez à File dans le menu principal et sélectionnez Import from Figma:
- Vous pouvez également cliquer sur le bouton Import :
- Sélectionnez Figma dans les options proposées :
- Cliquez sur le bouton Connect to Figma :
- Une fenêtre de navigateur s’ouvre. Si vous n’êtes pas encore connecté(e) à votre compte Figma, vous serez invité(e) à le faire :
- Cliquez sur Allow access pour confirmer :
- Une boîte de dialogue vous invite à retourner dans Principle :
Remarque : si vous n’êtes pas directement redirigé(e) vers Principle, vous pouvez fermer la fenêtre d’autorisation et retourner dans Principle. Même si cela n’est pas clairement indiqué, la connexion a bien été établie.
Importer un design à partir de Figma
Une fois les deux applications connectées, vous pouvez importer directement vos designs dans Principle. Remarque : il n’est pas possible d’exporter un fichier dans Principle depuis Figma..
Vous pouvez importer tous les cadres d’une page dans un fichier, ou une sélection de cadres.
- Ouvrez Principle.
- Accédez à File dans le menu principal et sélectionnez Import from Figma :
- Vous pouvez également cliquer sur le bouton Import :
- Sélectionnez Figma dans les options proposées :
- Vous aurez ensuite la possibilité de sélectionner un Document dans le champ prévu à cet effet. Ce champ affiche tous les fichiers récemment modifiés.
Remarque : tous les fichiers utilisant le mode Multi-utilisateurs (par exemple, les fichiers sur lesquels collaborent plusieurs éditeurs) apparaîtront en tête des suggestionsRecently Edited Files.
- Cliquez sur Import Page pour importer tous les cadres de la page.
- Vous pouvez également cliquer sur Import Selected Frames pour importer les cadres actuellement sélectionnés dans Figma.
Remarque : à ce stade, vous pouvez également basculer sur Figma et sélectionner les cadres spécifiques que vous souhaitez importer. La sélection se met alors à jour dans Principle.
- Un message d’état indique que les calques sont actuellement restitués par Figma :
- Les cadres sont ensuite ajoutés à votre Artboard dans Principle :
- Chaque objet est restitué sous forme de calque individuel, identique à son format dans Figma. Vous pouvez sélectionner des objets individuels dans le panneau Layers sur la gauche, ou directement dans le canevas :
Déconnecter votre compte Figma
Si vous souhaitez modifier le compte Figma associé à votre compte Principle, ou déconnecter complètement les deux comptes, vous pouvez le faire depuis Principle.
- Cliquez sur le menu Principle dans la barre de menu Apple.
- Sélectionnez Disconnect from Figma dans les options proposées :
- Vous pouvez lancer à nouveau le processus d’importation pour reconnecter votre compte ou vous connecter à un compte différent.
Travailler avec les ombres dans Figma et Principle
Les ombres portées et internes se comportent différemment dans Figma et dans Principle. Figma restitue les ombres en fonction de la position de l'objet dans le plan de travail, tandis que Principle affiche l’ombre en fonction de l’objet lui-même.
Cela signifie que la rotation d’un objet dans Principle entraîne également la rotation de l’emplacement de l’ombre de cet objet (alors que cet emplacement reste le même dans Figma).
Remarque : Découvrez davantage d’informations sur Figma et Principle dans notre publication Média:Animez vos designs Figma avec notre intégration Principle.