Comment créer un prototype simple avec des dérogations de code dans Framer X.

La deuxième version bêta de Framer X a introduit une série de nouvelles fonctionnalités de code. Découvrez comment ils se connectent tous dans ce tutoriel.

Framer est un outil de conception interactif pour macOS. Nous travaillons sur une toute nouvelle version: Framer X, actuellement en version bêta publique. Apprenez-en plus à ce sujet ici et inscrivez-vous pour être averti lors de notre lancement. Il arrive cet automne.

Commencer

Pour commencer, vous pouvez télécharger mon modèle iPhone X ici. Il comprend un seul écran iPhone X avec une image, une barre d'état et une barre inférieure. N'hésitez pas à remplacer le remplissage d'image par défaut par le vôtre. J'en ai choisi un de Unsplash.

Téléchargez le modèle.

Pour continuer, ouvrez le fichier de modèle dans Framer X. Maintenant, la première chose dont nous aurons besoin est un curseur. J’ai publié un composant Slider dans le Framer X Store, qui contient toutes les options de personnalisation dont nous avons besoin. Pour l'installer, suivez les instructions ci-dessous.

  1. Cliquez sur l'icône Store dans le panneau de gauche.
  2. Accédez à la barre de recherche, dans le coin supérieur droit.
  3. Recherchez "slider".
  4. Cliquez sur le paquet «Slider» avec la vignette cyan.
  5. Cliquez sur “Installer”.
C’est le paquet que nous devrons installer.

Après l'installation, le curseur apparaît dans l'onglet Composants. Accédez aux composants (l'icône ressemble à une grille) et vous devriez voir une miniature du curseur. Il suffit de le faire glisser et de le déposer sur notre écran iPhone X.

Dans Framer X, il existe deux types de composants: les composants de conception et les composants de code. Un composant de conception est créé en sélectionnant un élément existant sur la toile. Un composant de code est créé à partir de zéro, en utilisant React. Cela signifie que vous pouvez rendre du code HTML et CSS simple, directement sur le canevas. Ou vous pouvez importer vos propres composants de conception, packages NPM ou éléments Framer et les construire par-dessus. Les possibilités sont infinies.

Le curseur que vous venez d'installer est un composant de code. Il peut être redimensionné et repositionné, comme n'importe quel autre calque. Si vous inspectez le panneau de propriétés, vous remarquerez qu'il contient de nombreuses propriétés personnalisées, telles que Teinte, Suivi, Min, Max et quelques autres. Ce sont des propriétés que j’expose depuis le composant, pour vous permettre de le personnaliser à votre guise.

Personnaliser le curseur

Voici comment je vais personnaliser le curseur pour notre application de filtrage. Je vais décrire les changements ci-dessous. Vous êtes libre de le personnaliser comme bon vous semble, bien sûr.

  1. Définissez la teinte sur #FFF.
  2. Définissez la piste sur # 333.
  3. Définissez la valeur Alpha Shadow sur 100.
  4. Définissez contraindre sur true.

La propriété contraint influe sur la distance que peut atteindre le bouton: s’il est «contraint» sur les côtés de la piste ou s’il peut être déplacé jusqu’au centre du bouton. Les plages (min, max, valeur) dépendent de la valeur du filtre que nous souhaitons manipuler par curseur.

Je dupliquerai le curseur personnalisé deux fois, car je voudrais pouvoir régler la luminosité, le contraste et la teinte de notre photo. Je vais également ajouter des étiquettes de texte pour distinguer facilement les curseurs les uns des autres, ainsi qu’un en-tête de type iOS. C'est complètement facultatif, bien sûr.

Notre configuration de curseur, y compris les étiquettes et les plages par défaut.

Slider Ranges

Définissons également les propriétés min, max et value. Les curseurs de luminosité et de contraste commencent à 100 et vont jusqu'à 200, tandis que le curseur de teinte commence à 0 et va jusqu'à 360.

  • Luminosité - min: 0, max: 200, valeur: 100
  • Contraste — min: 0, max: 200, valeur: 100
  • Teinte — min: 0, max: 360, valeur: 0

Création de dérogations

Avec nos gammes de curseurs correctement configurées, nous sommes prêts à commencer à les concrétiser. Nous devrons créer un moyen pour le curseur et l'image de «communiquer des données» les uns aux autres - un moyen de les connecter.

Dans la version bêta 2, nous avons introduit la propriété Code. Sélectionnez un cadre, cliquez sur Code et vous aurez la possibilité de connecter des fonctions de substitution au cadre sélectionné. Ces fonctions vous permettent de remplacer les propriétés de style telles que l'opacité et le remplissage, mais elles permettent également une interactivité et une animation.

Ajout de dérogations

Pour donner vie à nos curseurs, nous devrons ajouter une fonction de substitution à la photo et à chaque curseur. Pour ajouter notre premier remplacement, suivez les étapes ci-dessous.

  1. Sélectionnez la photo.
  2. Cliquez sur «Code» dans le panneau des propriétés.
  3. Sélectionnez le menu déroulant «Remplacer», puis cliquez sur «Modifier Exemples.tsx».
  4. Cela ouvrira votre éditeur de code par défaut. Pour moi, c’est le VSCode.

Vous trouverez ici quelques exemples de fonctions. Nous n’en aurons pas besoin. Vous pouvez donc les supprimer ou créer un nouveau fichier (sélectionnez le menu déroulant «Fichier», puis «Nouveau fichier») pour commencer à ajouter nos substitutions personnalisées.

Tout d'abord, l'importation. Nous n'utiliserons que Remplacer et Données, nous pouvons donc simplifier la déclaration par le haut. Cela importe ces deux objets de la bibliothèque Framer.

importer {annulation, données} de "framer";

Il est important de noter que contrairement à Framer aujourd'hui, vous n'animez que des valeurs dans Framer X. Ces valeurs pouvant être animées peuvent ensuite être appliquées à n'importe quelle propriété, éventuellement sur un événement, comme onClick. La bibliothèque Framer fournit un objet de données qui vous permet de stocker ces valeurs pouvant être animées.

Réglage de la luminosité

Notre premier objectif est de connecter le curseur de luminosité à la photo. Une fois que cela est configuré, connecter les deux curseurs restants devrait être simple.

Nous allons commencer par ajouter simplement une propriété de luminosité à l’objet Data et lui attribuer la valeur 100 pour correspondre à la valeur par défaut de notre curseur de luminosité.

export const data = Data ({
  luminosité: 100,
});

Ensuite, nous devons nous assurer que notre image peut recevoir la propriété définie dans notre objet de données. Nous allons créer une nouvelle constante, que j’appellerai Effets. Dans Framer X, les remplacements de code et les composants de code utilisent TypeScript. La syntaxe en profondeur va au-delà de la portée de ce didacticiel. Par conséquent, il est important de savoir qu’elle doit être saisie avec Override pour permettre à Framer X de la reconnaître.

export const Effets: Remplacer = () => {
  revenir {
    luminosité: data.brightness,
  };
};

La méthode reçoit les accessoires comme paramètre (les propriétés de l’élément appliqué), mais comme nous ne les utiliserons pas, je les ai omis des crochets. Maintenant, sélectionnez la fonction Effects dans le menu Override. (Étant donné que vous avez déjà sélectionné le fichier à ce stade. Si vous avez créé un nouveau fichier, vous devrez peut-être d'abord le sélectionner). Veuillez noter que cela ne rendra pas le curseur fonctionnel pour l'instant.

Connecter la fonction Effets à notre image.

Passons maintenant à la partie amusante: le curseur lui-même. Nous aurons besoin d’une nouvelle fonction de substitution. Je l'appellerai BrightnessSlider, car nous devrons le connecter au curseur de luminosité. Commençons par définir la fonction, ainsi que son type de substitution.

export const BrightnessSlider: Remplacer = () => {
  revenir {},
};

Maintenant, dans l'objet renvoyé, nous allons ajouter une fonction onValueChange. Il a un seul paramètre: une valeur numérique (une valeur du type). Cette fonction est également une propriété du composant Slider lui-même. Il met à jour la valeur chaque fois que vous déplacez le bouton, par exemple. Dans la fonction, nous allons définir la valeur de luminosité sur la valeur renvoyée par le curseur.

export const BrightnessSlider: Remplacer = () => {
  revenir {
    onValueChange: (valeur: nombre) => {
      data.brightness = valeur;
    },
  };
};

Maintenant, nous pouvons revenir à Framer X, sélectionner le curseur de luminosité, cliquer sur «Code», sélectionner et sélectionner la fonction «BrightnessSlider» dans le menu déroulant Remplacer. (Si vous avez créé un nouveau fichier à partir de rien, vous devez également sélectionner le bon fichier. Si vous avez continué dans Exemples, vous pouvez directement sélectionner la méthode.)

Et le tour est joué! Désormais, tous les éléments relatifs à notre curseur de luminosité sont connectés. Cliquez sur l'icône de lecture dans le coin supérieur droit de l'application pour ouvrir la fenêtre Aperçu. Ici, vous pouvez interagir avec le curseur.

Connecter tous les curseurs

À partir de maintenant, il est assez simple d’étendre notre fichier pour supporter les 2 curseurs restants. Trouvez un aperçu des étapes ci-dessous.

  1. Nous devrons étendre l’objet Data avec constrast: 100 et hueRotate: 0. La construction commence à 100, comme la luminosité, et hueRotate commence à 0.
  2. Nous devrons étendre notre fonction Effects afin qu’elle reçoive les trois propriétés. De nouveau, nous ajouterons les propriétés contrast et hueRotate, définies sur data.contrast et data.hueRotate, respectivement.
  3. Nous pouvons dupliquer notre fonction BrightnessSlider deux fois et renommer l’un en ContrastSlider et l’autre en HueSlider.

Je vais joindre une capture d'écran du fichier de fonctions final ci-dessous. Vous pouvez également télécharger mon fichier Fonctions.tsx complet ici, ou le prototype fini ci-dessous.

Il ne reste plus qu’à connecter les curseurs de contraste et de teinte à leurs propres fonctions de substitution. Et c'est tout! 4 éléments, un objet de données et 4 fonctions. Les curseurs restent entièrement personnalisables, de leurs gammes à leurs options de style. Si vous souhaitez continuer à jouer, vous pouvez activer certains des filtres, par exemple modifier la teinte pour saturer. Vous pouvez également affecter un curseur à un type de propriété, de similarité ou d’échelle totalement différent.

Bien que les substitutions puissent être difficiles à comprendre au début, elles sont très flexibles et peuvent être utilisées pour bien plus que la redéfinition des propriétés visuelles. Espérons que cela jette un peu de lumière sur ses capacités. N'hésitez pas à contacter Twitter si vous avez des questions. Vous pouvez télécharger le fichier final .framerx ci-dessous.

Télécharger le fichier final.

Le prototype de l'application de filtre finale.

Ressources additionnelles

  • Présentation de Framer X
  • Framer X Docs
  • React Docs
  • Docs TypeScript