Comment commencer à utiliser Sketch And Framer X

Pour créer un nouveau cadre, accédez au panneau Outil de présentation sélectionnez Cadre et glissez-déposez n'importe quelle partie de la toile; ou appuyez simplement sur F .

Deuxièmement, nous allons définir un périphérique pour le cadre. Sélectionnez le cadre et dans le panneau Propriétés Périphérique choisissez Apple MacBook Pro .

Jetez un coup d’œil à l’image statique que nous avons importée. Nous allons construire les interactions suivantes:

• En-tête: fondu lors du défilement du contenu.
• Bouton d'action flottant (FAB): états par défaut, en survol et enfoncé.
• Navigation: Il est affiché de droite à gauche lorsque en cliquant sur le FAB.
• Contenu: Il est redimensionné en cliquant sur le FAB.

Tout d'abord, créez de nouveaux cadres au-dessus des calques de manière à obtenir un cadre pour chacun des éléments d'interaction susmentionnés. Par exemple, nous allons ajouter un nouveau cadre pour regrouper toutes les couches faisant partie de l'en-tête ( Cmd + Enter ) et nommer le cadre comme en-tête .

Par souci de clarté, remplacez le cadre Apple MacBook Pro par Interactive . Dans la section suivante, nous allons créer un composant Scroll .

Naviguer dans le contenu

Tout d'abord, nous allons dupliquer ( Cmd + D ). Cadre de contenu et retirez-le du cadre statique. Remplacez le nom du nouveau cadre par i_content .

Deuxièmement, nous allons créer un composant Scroll dans notre cadre interactif. Pour ce faire, accédez au panneau Outil interactif et sélectionnez Faites défiler . Glissez-déposez n'importe quelle partie du cadre interactif.

De plus, modifiez la largeur du composant Scroll en lui donnant la valeur 1141px (identique au contenu) et positionnez-le dans les mêmes coordonnées que le contenu se trouve dans le cadre statique ( à gauche: 149px, en haut: 140px). En dehors de cela, augmentez la hauteur du composant Scroll lorsqu'il atteint le bas du cadre Interactif.

Nous allons maintenant connecter le composant Scroll à notre i_content . Pour ce faire, cliquez sur le connecteur et connectez-le à i_content .

Enfin, sélectionnez le cadre interactif et Cmd + P pour passer en mode Aperçu . Vous devriez pouvoir parcourir le contenu maintenant.

Ensuite, je vais expliquer comment positionner l'en-tête et le bouton FAB (bouton d'action flottante) pour les rendre fixes lors du défilement sans nécessiter de codage spécial.

Fixe Eléments

Nous allons positionner les éléments de manière qu’ils restent fixes lors du défilement de la page. Pour ce faire, dupliquez le cadre En-tête et positionnez-le dans le cadre Interactif. Comme auparavant, remplacez le nom par i_header . Faites de même avec le bouton Floating Action Button. Votre panneau Calques devrait ressembler à ceci:

Comme l’en-tête et le FAB sont en dehors du composant Scroll, ils restent fixes pendant le défilement.

Dans la section suivante, je vais expliquer comment construire la transition de l'en-tête.

Header Transition

Pour construire la transition de l'en-tête, nous allons utiliser le composant Scroll away créé par Lukas Guschlbauer . Pour commencer à utiliser ce composant, rendez-vous dans le magasin Framer recherchez Scroll et installez le composant Scroll Away.

Grand aperçu )

Ensuite, accédez au panneau Composants cliquez sur le Scroll Away et déposez-le sur la toile. Retirez le cadre de l'en-tête du cadre interactif et positionnez le composant Scroll away là où se trouvait l'en-tête. Modifiez la taille du composant afin qu'elle soit identique à celle de l'en-tête (1440x80px).

Sélectionnez le composant Scroll Away, puis connectez-le à votre cadre i_header . Vous pouvez modifier plusieurs propriétés du composant, telles que l'alignement, l'effet, la direction, l'accélération ou la synchronisation dans le panneau Propriétés. Nous allons changer l'effet en Fade Move . Ceci fait, les options ci-dessous changent en conséquence:

Pour que l'effet fonctionne, nous avons besoin d'une dernière chose. Sélectionnez le composant Scroll Away, puis cliquez sur le bouton Override dans le panneau Propriétés. Cliquez sur Fichier et sélectionnez Nouveau fichier . Cliquez ensuite sur Override et sélectionnez useScrollData . Ensuite, cliquez sur le composant Défilement de votre cadre interactif. Cliquez à nouveau sur Remplacer et sélectionnez getScrollData dans Remplacer. Pour visualiser le résultat, appuyez sur Cmd + P .

Note: Le concept de substitution est un concept unique pour Framer X . Les remplacements de code sont des fonctions qui permettent aux composants de communiquer entre eux. Vous pouvez les écrire vous-même dans le code et les appliquer à n’importe quel cadre ou composant de votre toile. Ces fonctions vous permettent de remplacer les propriétés visuelles telles que l'opacité et le remplissage, et permettent l'interactivité et l'animation. Les remplacements de code peuvent résider dans n’importe quel fichier de code de votre projet. Framer X les interprète en fonction du type. Vous pouvez appliquer n'importe quel remplacement de code à un cadre ou à un composant du canevas en sélectionnant Remplacer dans le panneau Propriétés.

La transition fonctionne, mais vous remarquerez qu'il y a un espace blanc en haut. En effet, le composant Scroll est positionné sur y: 140. Changeons cela. Augmentez la hauteur du composant Scroll pour occuper toute la hauteur du cadre interactif. Ensuite, accédez à votre cadre i_content et positionnez les éléments à 140 pixels du haut du cadre.

Votre interaction devrait maintenant être similaire à celle-ci.

Note : Si vous en avez besoin, téléchargez le fichier source pour cette étape.

Suivant , Je vais expliquer comment modifier l’état d’un bouton lorsqu’il interagit avec celui-ci.

States For Buttons

Dans cette section, nous allons travailler sur les différents états du bouton d’action flottante (FAB). Nous allons utiliser le composant Magic Move créé par Henrique Gusso . Alors tout d'abord, rendez-vous dans le magasin Framer et installez ce composant. Dans le panneau Composants sélectionnez le composant et déposez-le sur le canevas.

Sélectionnez tout d'abord le cadre Bouton d'action flottant, puis extrayez-le du cadre Interactif. Ensuite, placez le composant Magic Move à l'emplacement du FAB. Changez sa taille en 72 × 72px.

Pour une raison quelconque, le graphique importé depuis Sketch ne fonctionne pas avec ce composant. Nous allons donc créer notre propre cercle. Dans le cadre i_fab supprimez le cadre contenant le graphique et créez un cercle avec la même couleur et les mêmes propriétés.

Pour les différents états de la FAB, nous devons créer un maître et trois instances (par défaut, en vol stationnaire et enfoncé). ). Pour ce faire, sélectionnez i_FAB cliquez dessus avec le bouton droit de la souris et sélectionnez Créer un composant .

Note: Les composants de conception sont similaires aux symboles de Sketch. Donc, si vous souhaitez créer des composants réutilisables pour votre système de conception, c'est un outil très utile. Pour modifier les propriétés de vos instances en une seule fois, il suffit de sélectionner le maître et de modifier les propriétés souhaitées. Pour plus d'informations, consultez le guide Framer X pour la création de composants de conception .

Reproduisez maintenant le cadre maître i_fab trois fois pour obtenir les instances. Modifiez le nom des nouvelles images en i_fab_default i_fab_hover et i_fab_pressed .

Ensuite, nous devons connecter le composant Magic Move aux instances. Connectez Initial à i_fab_default Hover Start à i_fab_hover Appuyez sur pour à Hover End à i_fab_default .

Enfin, nous devons entrer dans chacun des états et en changer la couleur et l’échelle. Allez dans le i_fab_hover et changez sa couleur en # 2244BF. Pour ce faire, double-cliquez jusqu'à ce que l'option Remplissage apparaisse dans le panneau Propriétés. Ensuite, allez dans le i_fab_pressed réduisez sa taille à 56px et changez sa couleur en # 172E80. Vérifiez le résultat en mode Aperçu.

Remarque: Si un écran noir apparaît en mode Aperçu, vérifiez la compatibilité du composant avec votre version de la bibliothèque Framer. Pour ce faire, accédez à la page du composant dans le magasin Framer. Si le package n'est pas compatible avec votre version, un message d'avertissement s'affiche. Pour modifier votre bibliothèque Framer accédez à Fichier → Version de la bibliothèque Framer .

La section suivante explique comment afficher le NAV de droite à gauche en cliquant sur le bouton FAB.

Note : If vous en avez besoin, téléchargez le fichier source pour cette étape.

Ouvrez le navigateur lorsque vous cliquez sur un bouton

Nous allons maintenant travailler sur l'interaction pour afficher le navigateur lorsque vous cliquez sur le bouton FAB. Nous utiliserons à nouveau les composants Link vers et Magic Move pour la transition.

Allez au cadre statique et dupliquez le cadre Nav. Placez-le dans n’importe quelle partie de la toile et changez son nom en i_nav .

Nous devons maintenant créer deux états différents pour le Nav. Tout d'abord, l'état initial (aucun nav n'est affiché) et le deuxième état, le nav est affiché. Pour ce faire, créez un nouveau maître avec l'i_nav (cliquez avec le bouton droit de la souris et sélectionnez Créer un composant ou utilisez le raccourci Cmd + K ). Une fois que vous avez le maître, dupliquez deux fois pour obtenir les instances. Nommez-les i_nav_default et i_nav_displayed .

Ensuite, positionnez les éléments du i_nav_default hors du cadre (Droite: -80px).

i_nav_default hors du cadre. ( Grand aperçu )

Ainsi, le Nav sera affiché automatiquement de droite à gauche en cliquant sur le FAB. Pour construire cette animation, nous devons créer un nouveau cadre. Dupliquez le cadre interactif. Remplacez le nom du nouveau cadre par Interactive02 .

Pour afficher la Nav dans ce nouveau cadre, nous allons créer un nouveau composant Magic Move . La taille (80x392px) et la position (Haut: 140, Droite: 0) doivent être identiques à celles du paramètre Nav.

Ensuite, accédez au cadre Interactive02 sélectionnez le composant Déplacement magique et connectez-le aux instances. i_nav_default de l'état Initital et de i_nav_displayed de l'état Automatic . De cette manière, lors de la saisie sur cette seconde image, le Nav sera automatiquement affiché.

Nous allons maintenant construire l'interaction entre les écrans en reliant les cadres. Accédez au cadre Interactif, sélectionnez le FAB, cliquez avec le bouton droit de la souris sur → Ajouter un cadre . Changez le nom du nouveau cadre en interactive_fab . Appuyez sur L (Lien vers) et connectez-le au cadre Interactive02.

Modifiez la transition en Instant et prévisualisez-la. Vous pouvez modifier l'effet de transition entre les écrans dans le panneau Propriétés.

Si vous passez en mode Aperçu, vous verrez que la navigation est affichée lorsque vous cliquez sur le bouton FAB, mais nous devons inverser l'interaction lorsque vous cliquez à nouveau dessus. Pour ce faire, dupliquez le cadre Interactive02 (attribuez le nom Interactive03 au nouveau cadre).

Dans le cadre Interactive03, sélectionnez le composant Magic Move et attribuez i_nav_displayed au . ] Etat initial et i_nav_default du état automatique .

Enfin, appuyez sur L (Lien vers) le interactive_fab dans le cadre Interactive02 à Interactive03 et le interactive_fab ] dans le cadre Interactive03 au cadre Interactive02. N'oubliez pas de modifier l'effet de transition dans les propriétés de lien en . Instantanée .

Prévisualisez l'interaction à partir du cadre interactif. Le résultat devrait être identique à celui ci-dessous:

Note : Si vous en avez besoin, téléchargez le fichier source pour cette étape.

Suivant , Je vais expliquer comment redimensionner le contenu en cliquant sur le bouton FAB.

Redimensionner le contenu lorsque la navigation est affichée

Pour redimensionner le contenu lorsque la navigation est affichée, nous écrirons du code de réaction . . Nous allons utiliser Playground (un éditeur de code intégré à Framer X) qui vous permet de jouer avec du React et du code HTML pour créer des animations avancées.

Note: [19659008] Si vous n'êtes pas familier avec React, consultez peut-être quelques didacticiels sur la réaction .

Commençons par chacun des cadres interactifs, puis sélectionnez le composant Défilement. et ajoutez un cadre dessus

Ensuite, allez dans le panneau Propriétés et cliquez sur Remplacer . Sur Fichier sélectionnez App . Si vous ne le voyez pas, sélectionnez Nouveau fichier . Ensuite, cliquez sur Edit Code . Le Playground sera ouvert automatiquement.

Assurez-vous que votre fichier App comporte la ligne suivante en haut. Si non, ajoutez-le:

 import {Data, animate, Override, Animatable} de "framer"

Note: (*) Ce code fonctionne avec Framer v. 25 et avec la dernière version de l'API v. 1.0.7. Bien que ce code fonctionne, gardez à l'esprit que Framer encourage maintenant les utilisateurs à utiliser les fonctions React Hooks au lieu des composants de classe. Pour en savoir plus, consultez les nouvelles pages de l'API Framer .

Nous allons déclarer une variable appelée contentScaleValue et indiquer qu'elle peut être animée. De plus, nous allons définir l'état de basculement par défaut comme true .

 // Valeur par défaut
const contentScaleValue = Animatable (1);
let toggle = true;

Ensuite, nous allons créer une fonction ResizeContent pour que le contenu soit mis à l'échelle lorsque vous cliquez sur le FAB. En plus de cela, nous devons définir son origineX et son origineY de manière à ce que l'échelle soit en haut à gauche.

 // Affecter au contenu
export const ResizeContent: Override = props => {
 revenir {
   scale: contentScaleValue,
   origineX: 0,
   origine: 0
 };
};

Nous allons ensuite créer une deuxième fonction togglePosition pour le FAB. Nous dirons que surTap si la bascule est vraie le contenu sera redimensionné et l'état de la bascule passera à faux . Sinon, faites l'animation inverse.

 // Assign à FAB
export const togglePosition: Override = props => {
 revenir {
   onTap: () => {
     if (bascule) {
       animate.ease (contentScaleValue, 0.9, {duration: 0.2});
       toggle = false;
     } autre {
       animate.ease (contentScaleValue, 1, {duration: 0.2});
       bascule = vrai;
     }
   }
 };
};

Après avoir écrit ce code, sélectionnez le cadre que vous avez créé en haut de vos composants Scroll, accédez à la section Remplacer du panneau des propriétés et sélectionnez Fichier: Application, Remplacer: ResizeContent . . Sélectionnez ensuite le FAB, Fichier: Application, remplacement: togglePosition .

Vérifiez que le résultat obtenu est le suivant:

Note : Si vous en avez besoin, téléchargez le fichier source pour cette étape.

Prototypage

Accédez au fichier d'esquisse et importez (copiez et collez) la planche de profil utilisateur dans Framer X. Une fois dans Framer, dupliquez le cadre. Donnez-lui le nom Interactive_user_profile .

Nous allons créer des transitions automatiques pour la barre latérale droite, les zones situées en haut et le contenu. Sortez chacun des cadres du cadre Interactive_user_profile .

Créez un composant Magic Move pour chacun des éléments et positionnez-les dans le cadre Interactive_user_profile .

Créez ensuite un maître et deux instances pour chacun des composants. Pour la barre latérale, positionnez la première instance en dehors du cadre. Pour les boîtes et le contenu, définissez l'opacité de la première instance sur 0.

Connectez le composant Magic Move à chacune des instances. Attribuez la première instance à l'état initial et la deuxième instance à l'état automatique .

Dans le panneau Propriétés, vous pouvez modifier le délai de chacun des composants de Move Magic pour définir l'ordre à afficher. . Attribuez les délais suivants:

• Encadré: aucun délai
• Première case: 0,4 délai
• Deuxième case: 0,6 délai
• Troisième case: 0,8 délai
• Contenu: 1 délai

Accédez au cadre Interactive03 sélectionnez l'en-tête et Lien vers le cadre Interactive_user_profile . Dans ce cadre, sélectionnez l'en-tête et le lien vers le cadre interactif . N'oubliez pas de changer la transition entre les écrans en Instant . Vérifiez les résultats.

Remarque : Si vous en avez besoin, téléchargez le fichier source pour cette étape.

Partage du prototype

Pour partager le prototype, cliquez sur Fichier → Aperçu Web d'exportation ( Cmd . + E ). Pour voir le prototype, ouvrez le fichier index.html . It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

• You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
• For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
• There are multiple UI kits available in the Framer Store to help you build your design systems.
• There is no single approach on how to build an interaction in Framer X. Experiment and learn.
• To build some quick interactions faster, make use of the pre-built components in the Framer Store.
• You just need a minimal coding knowledge in order to start building complex interac tions in Framer X and there are multiple tutorials available online to start learning how to do it.

(mb, yk, il)