Prise en main

Les composants de code peuvent étendre les fonctionnalités de Framer en effectuant le rendu de n'importe quel composant React directement sur le canevas. Framer intègre un éditeur de code permettant de les écrire directement dans Framer.

Les composants Framer sont de simples composants React, mais ils disposent de quelques fonctionnalités supplémentaires bien utiles pour les enrichir dans les flux de travail Framer :

• Ajout de Property Controls

• Framer Motion intégré

• Partage via une URL

Principes de base

Pour créer un nouveau composant de code, accédez au panneau des ressources (Assets) et cliquez sur Code. Ensuite, cliquez sur Create Code File. Un nouveau fichier de code exportant un unique composant React s'affichera. Vous remarquerez que nous importons un utilitaire spécifique depuis la bibliothèque framer, que nous utilisons pour optimiser le composant dans Framer.

import { addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  text: { 
    type: ControlType.String, 
    defaultValue: "Hello World!" 
  },
})

import { addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  text: { 
    type: ControlType.String, 
    defaultValue: "Hello World!" 
  },
})

import { addPropertyControls, ControlType } from "framer"

export function MyComponent(props) {
  return <div>{props.text}</div>
}

addPropertyControls(MyComponent, {
  text: { 
    type: ControlType.String, 
    defaultValue: "Hello World!" 
  },
})

Dans ce cas, nous créons un composant React standard, mais nous y ajoutons un contrôle pour permettre la configuration de la propriété Text depuis le canevas. Pour mettre cela en place, nous utilisons l'API addPropertyControls comme illustré ci-dessus.

Dimensionner votre composant

Il existe quatre options de mise en page pour les composants de code dans Framer : auto, fixed, any et any-prefer-fixed. Celles-ci peuvent être configurées individuellement pour l'axe de la largeur ou de la hauteur, à l'aide des annotations @framerSupportedLayoutWidth et @framerSupportedLayoutHeight.

• auto — Le composant détermine ses propres dimensions.

• fixed — Le composant se trouve dans un conteneur à taille fixe et peut remplir l'élément parent.

• any — L'utilisateur peut basculer entre un dimensionnement auto et fixed.

• any-prefer-fixed — Le composant sera inséré avec un dimensionnement défini sur fixed.

Le code suivant permettra à votre composant d'avoir un dimensionnement automatique en largeur, mais pas en hauteur. Vous pouvez combiner ces deux propriétés avec n'importe quelle option de dimensionnement, à condition que la largeur et la hauteur soient toutes deux spécifiées.

/**
* @framerSupportedLayoutWidth auto
* @framerSupportedLayoutHeight fixed
*/
export function Toggle(props) { ...

/**
* @framerSupportedLayoutWidth auto
* @framerSupportedLayoutHeight fixed
*/
export function Toggle(props) { ...

/**
* @framerSupportedLayoutWidth auto
* @framerSupportedLayoutHeight fixed
*/
export function Toggle(props) { ...

Ces annotations permettent à Framer de connaître la taille à laquelle votre composant doit être inséré dans le canevas lorsque le dimensionnement fixe est activé. Dans ce cas, il sera inséré avec une largeur de 200px et une hauteur de 200px.