Comment créer un composant stylé dans Framer X

Je vous montre comment installer des composants stylés pour votre projet Framer X et comment créer un composant Button de base.

L'article original a été publié sur zauberware.com

OUI, Framer X semble être le premier outil de conception, qui intègre parfaitement un cadre tel que React. Ok, eh bien, il y a toujours place à des améliorations, mais cela fonctionne et il y a quelques fonctionnalités intéressantes concernant ce sujet, annoncées par les propriétaires du produit @FramerX.

Framer X appelle un composant React un «composant de code», écrit en caractères typographiques. N'ayez pas peur du dactylographe si vous n'y êtes pas habitué. Suivez la piste de ce didacticiel et vous verrez à quel point écrire un composant de code est simple.

L'utilisation de bibliothèques externes telles que styled-components fonctionne également! Dans ce tutoriel, nous allons créer un composant Button dans Framer X en utilisant des composants stylés.

Si vous n'avez jamais entendu parler de composants stylés auparavant, je vous recommande de lire leur documentation. C’est génial. Si vous êtes nouveau à réagir, alors vous devriez faire un cours de réaction de base avant.

5 étapes faciles pour créer un composant stylé dans Framer X:

  1. Créer un nouveau composant de code
  2. Installer des composants stylés
  3. Mettre en place un bouton
  4. Créer des variations de bouton
  5. Ajouter des contrôles de propriété Framer X

Commençons!

1. Créer un nouveau composant de code

Créez un nouveau projet dans framer et allez dans l'onglet composant.

Cliquez sur Nouveau, sélectionnez «Code» et entrez un titre, par exemple. "Bouton". Votre éditeur préféré doit ouvrir un fichier Button.tsx.

2. Installer des composants stylés

Un projet Framer X est un projet npm, nous pouvons donc ajouter des dépendances comme pour toutes les autres applications.

Votre fichier de projet .framerx n’est rien d’autre qu'un fichier zip et, si vous ouvrez un fichier, il en conserve une copie dans le chemin d’enregistrement automatique de Mac.

Pour ouvrir le chemin du projet, cliquez sur Fichier> Afficher le dossier du projet. Cela ouvrira une fenêtre du Finder avec votre projet.

Découvrez le chemin de votre projet. Ce sera quelque chose comme ça:

~ / Library / Autosave \ Information / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / conteneur

Ouvrez le terminal et changez le répertoire avec:

$ cd ~ / Library / Autosave \ Information / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / conteneur

La commande cd signifie changer de répertoire et ~ le chemin du répertoire de base de vos utilisateurs.

Si vous avez du mal à trouver le bon chemin pour votre projet:

  1. Cliquez avec le bouton droit sur package.json> Obtenir des informations.
  2. Copiez le chemin.
  3. Soyez attentif aux “informations d'enregistrement automatique” copiées. Vous devez changer ceci en "Sauvegarde automatique \ Information", car dans Terminal, vous n’avez pas d’espace vide.

Si vous êtes dans le dossier du projet, nous pouvons installer les composants stylés du paquet npm pour votre projet:

$ npm install styled-components

Retournez dans votre éditeur où vous avez ouvert le fichier Button.tsx et ajoutez la déclaration d'importation suivante en haut:

importer des styles à partir de 'styled-components'

You Button devrait maintenant fonctionner avec des composants stylés. Mais nous n’avons pas configuré d’éléments ni de style. Passons à l'étape 3.

3. Configurer un bouton

Supprimons à la ligne 5 tous les éléments CSS-Property car nous souhaitons les remplacer par un composant stylé.

Ajoutez une balise de bouton de style avec un style:

const StyledButton = styled.button`
  rembourrage: 20px;
  border-radius: 10px;
  bordure: 0;
  taille de police: 2em;
`

Si vous vous interrogez sur la syntaxe ``: Ceci s'appelle Template Literals et constitue un moyen supplémentaire de gérer des chaînes ou des modèles dynamiques. Il fournit une solution plus simple, par exemple concaténer chaîne et variables. Si vous souhaitez en savoir plus sur les chaînes et les littéraux de modèle en javascript, je peux vous recommander de lire cet article.

Utilisez votre StyledButton dans la méthode de rendu du composant:

render () {
  return  {this.props.text} 
}

Votre composant devrait maintenant ressembler à ceci:

import * as Réagir de "réagir"
importer {PropertyControls, ControlType} de "framer"
importer des styles à partir de "styled-components"
const StyledButton = styled.button`
  rembourrage: 20px;
  border-radius: 10px;
  bordure: 0; taille de police: 2em;
`
// Définir le type de propriété
interface Props {
  texte: chaîne;
}
La classe d'export Button s'étend à React.Component  {
  // Définir les propriétés par défaut
  static defaultProps = {
    texte: "Bonjour le monde!"
  }
  // Eléments affichés dans le panneau de propriétés
  static propertyControls: PropertyControls = {
    text: {type: ControlType.String, title: "Text"},
  }
  render () {
    return  {this.props.text} 
  }
}

4. Créer une variation de bouton

Utilisons les avantages des composants stylés et de Framer X. Qu'est-ce que chaque système de conception possède? Oui, un bouton principal et un bouton secondaire.

Ajoutons quelques variations pour notre bouton.

const StyledButton = styled.button`
  rembourrage: 20px;
  border-radius: 10px;
  bordure: 0;
  taille de police: 2em;
  $ {props => props.primary && css`
    Couleur blanche;
    couleur de fond: vert;
  `}
  $ {props => props.secondary && css`
    Couleur blanche;
    couleur de fond: bleu;
  `}
`

css pas trouvé? Pas de problème, importons-le à partir de composants stylés:

importer styled, {css} de "styled-components"

Utilisez la propriété dans le composant:

render () {
  return  {this.props.text} 
}
// ou secondaire
render () {
  return  {this.props.text} 
}

5. Ajouter des contrôles de propriété Framer X

Changer la propriété dans le code est un peu maladroit. Laissez-nous créer une possibilité de changer le type du bouton dans Framer X.

Ajouter une nouvelle propriété, par exemple "type"

// Définir le type de propriété
interface Props {
  texte: chaîne;
  type: chaîne;
}

Supposons que nous voulions un bouton principal par défaut:

// Définir les propriétés par défaut
static defaultProps = {
  texte: "Bonjour le monde!",
  type: "primaire",
}

Ajoutez un nouveau contrôle de propriété pour notre sélection de type. Nous utilisons un ControlType.Enum pour atteindre notre objectif:

// Eléments affichés dans le panneau de propriétés
static propertyControls: PropertyControls = {
  texte: {
     type: ControlType.String,
     titre: "Texte"
   },
  type: {
     type: ControlType.Enum,
    titre: "Type",
    options: ['primaire', 'secondaire'],
    optionTitles: ['Bouton principal', 'Bouton secondaire']
   },
}

Si vous allez à Framer X, vous devriez voir une sélection d’option pour le type du bouton.

Mais bon, rien ne change, lorsque nous sélectionnons. C’est pourquoi nous n’avons pas utilisé la propriété type dans notre composant.

Nous devons changer un peu le code. Premièrement, nous voulons surcharger la propriété au composant stylé.

render () {
  revenir (
    
      {this.props.text}
    
  )
}

Dans notre StyledButton, nous pouvons maintenant décider, en fonction du type, quel style de bouton nous voulons charger:

$ {props => props.type == 'primaire' && css`
  Couleur blanche;
  couleur de fond: vert;
`}
$ {props => props.type == 'secondaire' && css`
  Couleur blanche;
  couleur de fond: bleu;
`}

Félicitations! Essayez-le dans Framer X!

Vous comprenez maintenant très bien comment intégrer une troisième bibliothèque dans Framer X et comment créer un composant de base avec des variantes.

Merci d'avoir lu! Je suis Simon Franzen, co-fondateur de zauberware. N'hésitez pas à communiquer avec moi via Twitter.

Vous pouvez trouver les sources finales de ce tutoriel dans mon résumé: https://gist.github.com/simonfranzen/f46ff1a8b24356f6729d11a6ca8b968b