React + Framer X : ça donne quoi ?

La sortie de l'application Framer X a fait des émules au sein de la communauté React. Sa promesse est de proposer une application de conception d'UI/UX aussi bien ouverte sur le design que sur le code grâce au support de React. Promesse tenue ?

Hello Framer X

La conception d'interfaces Web et mobile a été ponctuée par plusieurs phases et applications :

• Photoshop (à l’époque où on exportait encore 4 images pour faire des contours arrondis 🐬) ;
• Illustrator ;
• Sketch, Figma, Adobe XD (plus Web friendly, intégrant les contraintes Web) ;
• Framer X (qui s’ouvre sur le code).

Si Sketch était plus orienté pour des designers Web, Framer X vient faire de l’œil aux développeurs. En proposant une intégration de React, il est désormais possible d’intégrer dans l’application ses composants et y exposer leurs propriétés.

Framer X étant encore jeune, peu de documentation et de ressources existent sur la partie intégration React, chez Premier Octet c'est pourtant ce qui nous intéresse ! Même si ce n'est pas notre cœur de métier, réduire au minimum les frictions entre la phase de création et celle de développement est pour nous important. Nous sommes donc curieux quant aux promesses de Framer.

Cet article est l'occasion de mettre en avant l'intégration de React dans Framer, qui il faut le dire, est plutôt réussie.

Framer & React : mise en pratique

Prise en main de Framer

Nous allons rapidement présenter Framer et son interface, mais je vous invite à vous rendre sur leur site où de nombreuses vidéos présentent les fonctionnalités. L'interface de Framer est assez rapide à prendre en main :

On retrouve quatre parties dans le menu principal de gauche :

• Le "plus" permet d'ajouter des éléments (layout, interactivité, graphique…) ;
• La "liste" permet d'accéder à une vue en calque bien connue ;
• La "grille" affiche le menu composants ;
• La "valise" nous donne accès au Store permettant d'installer des composants.

Lisez la documentation pour en apprendre plus sur chaque menu, mais sachez que l'élément le plus "macro" de Framer est une frame. Cette dernière représente l'écran de votre device, dans laquelle on va ajouter nos composants, graphiques et éléments.

Framer propose des frames par défaut correspondants aux devices les plus courants (iPhone, Android, MacBook…) :

Framer apporte aussi la notion de composants. Ces derniers représentent des éléments de votre application : il peut s'agir de boutons, de navbars… Il existe deux types de composants :

• Les design components qui sont les composants que l'on crée directement depuis l'application ;
• Les code components que l'on ajoute via des composants React ;

C'est sur ces derniers que je vous propose de nous attarder maintenant. Nous allons voir comment intégrer notre premier composant React via npm dans Framer X.

Révélez votre workspace

Commencez par créer une frame puis enregistrez vos projets si ce n'est pas encore fait. Lorsque vous sauvegardez votre projet Framer, un fichier .framerx est créé mais où puis-je voir mon workspace afin d'y ajouter mes composants React ? 🤔

Vous pouvez l'afficher dans le Finder depuis le menu File > Show Project Folder (⌥⌘P). Une fois votre dossier localisé, ouvrez-le dans votre terminal. Voici la structure du workspace :

Vous l'avez remarqué : un package.json s'y trouve ! Nous allons pouvoir ajouter des composants depuis npm. 🙌

Créer un composant Framer / React

Retournez sur Framer afin de créer un composant. Celui-ci va nous servir de proxy entre notre composant venant de npm et Framer. Pour cela, affichez la vue Component, puis New :

• Indiquez le nom de votre composant (ColorPicker par exemple) ;
• Cochez From Code ✅ ;
• Validez.

Framer va alors créer votre composant (par défaut un carré violet) et l'ouvrir dans votre éditeur. Dans Framer ajoutez votre nouveau composant à votre frame en le glissant / déposant :

Du côté de votre éditeur, vous avez désormais un fichier ColorPicker.tsx au format TypeScript :

import * as React from 'react'
import { PropertyControls, ControlType } from 'framer'

const style: React.CSSProperties = {
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  color: '#8855FF',
  background: 'rgba(136, 85, 255, 0.1)',
  overflow: 'hidden',
}

// Define type of property
interface Props {
  text: string;
}

export class ColorPicker extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    text: 'Hello World!',
  }

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: 'Text' },
  }

  render() {
    return <div style={style}>{this.props.text}</div>
  }
}

Rien de particulier, si ce n'est la méthode static propertyControls qui va nous permettre – nous le verrons plus tard – de piloter notre composant depuis Framer. Éditez le code CSS de votre composant : les changements sont reflétés dans Framer !

Nous allons maintenant importer un composant React depuis npm et l'intégrer dans Framer.

Ajouter un composant depuis npm

Revenez dans votre console à la racine de votre workspace (là où se trouve le package.json) et ajoutez un composant (dans mon cas un couleur picker) avec votre package manager :

yarn add react-color

Nettoyez votre composant ColorPicker préalablement créé afin d'y importer notre composant <BlockPicker /> :

import * as React from 'react'
import { BlockPicker } from 'react-color'

export class ColorPicker extends React.Component {
  render() {
    return <BlockPicker color="#525dee" />
  }
}

Sauvegardez puis revenez dans Framer, le couleur picker s'affiche alors ✨. Lancez le preview (bouton play en haut à droite) : le composant est fonctionnel !

Nous avons importé notre composant React dans Framer 🖖, petit bémol : la propriété color de notre composant est en dur dans notre code. Et si on l'exposait via Framer ?

Exposer les props à l'UI de Framer

Framer permet de contrôler les propriétés d'un composant React directement depuis l'application. Voici la liste exhaustive des types de contrôle disponibles :

• Number
• String
• Color
• Image
• File
• Enum
• SegmentedEnum
• FusedNumber

Rendez-vous dans la documentation de Framer pour connaître les options possibles pour chaque type.

Dans notre cas nous allons permettre de sélectionner la couleur par défaut (via la props color) et donner la possibilité de masquer le triangle avec la props triangle (qui peut avoir comme valeur hide et top).

Pour cela, nous ajoutons nos deux props color et triangle que nous passons à notre composant, puis par l'intermédiaire de la méthode statique propertyControls, nous renseignons les contrôles (respectivement ControlType.Color et ControlType.Enum dans notre cas) :

import * as React from 'react'
import { PropertyControls, ControlType } from 'framer'
import { BlockPicker } from 'react-color'

interface Props {
  color: string;
  triangle: string;
}

export class ColorPicker extends React.Component<Props> {
  static defaultProps = {
    color: '#525dee',
    triangle: 'top',
  }

  static propertyControls: PropertyControls = {
    color: {
      type: ControlType.Color,
      title: 'Couleur',
    },
    triangle: {
      type: ControlType.Enum,
      title: 'Triangle',
      options: ['top', 'hide'],
    },
  }

  render() {
    return (
      <BlockPicker
        width={this.props.width}
        color={this.props.color}
        triangle={this.props.triangle}
      />
    )
  }
}

Nous pouvons désormais contrôler les propriétés du composant React directement via l'interface de Framer :

Si vous essayez de redimensionner le picker depuis l'interface de Framer, rien ne se passe, frustrant non ? Bonne nouvelle, Framer expose à votre composant la hauteur et la largeur de votre composant via les props height et width. Et ça tombe bien notre BlockPicker accepte une propriété width :

// ColorPicker.tsx
// ...

render() {
	return (
		<BlockPicker
			width={this.props.width}
			color={this.props.color}
			triangle={this.props.triangle}
		/>
	);
}

// ...

Votre composant s'adapte maintenant à la largeur de votre sélection !

L'intégration de composants React dans Framer est donc assez simple, il vous faudra tout de même créer un composant "proxy" afin d'y exposer votre composant réel dans Framer. Cela implique aussi d'avoir des composants bien isolés du reste de votre application.

Framer, React et design system

Comme déjà évoqué dans un précédent article, l’approche composant de React favorise la création de design system et de documentations liées à vos composants.

Une bonne pratique lorsqu'on développe un composant React est de l'isoler de son environnement métier (récupération des données, logique métier…) afin de le rendre le plus agnostique possible (c’est le pattern dummy / container components). Et ça tombe bien, car pour utiliser vos composants React dans Framer, il vous faudra créer comme nous l’avons vu des composants proxy. Ce travail a le mérite de favoriser l’isolation de vos composants : on veut pouvoir afficher un composant dans Framer (ou dans Docz et Storybook) sans pour autant envoyer une requête à votre API de production (protégée par un token que vous ne voulez pas exposer).

La stack idéale pour un projet serait donc d'avoir un outil comme Docz ou Storybook permettant de documenter l'utilisation de vos composants combiné à Framer X. Le designer / développeur peut alors rapidement prototyper de nouveaux écrans avec les composants utilisés en production.

Dans cette optique, Framer X met à disposition un store où vous pouvez également trouver (gratuitement) de nombreux composants (Twitter UI, Material UI, carte Mapbox… ). Il est bien sûr possible de publier ses propres packages.

Alors verdict ?

Limites

Concernant l'intégration de React, il manque encore la possibilité d’exposer des props de type callback. Dans notre exemple nous aimerions pouvoir changer la couleur d'un élément de notre UI lorsqu'on sélectionne une couleur dans le picker. Pas de magie non plus : Framer ne permet pas d’exporter des composants design créés dans l’application vers des composants React.

Aussi, Framer n'est pas un logiciel gratuit (ce qui semble normal), l'abonnement est d'environ 15€ par mois.

Ouvert sur le code

En reprenant la terminologie de React, Framer X s’ouvre aux développeurs, on parle non plus de symboles, mais de composants et d'instances, les codes components offrent la possibilité d’ajouter une réelle interactivité à ses interfaces. Framer a bien compris qu’une interface aujourd’hui n’est plus figée : transitions, micro interactions et animations sont les ingrédients d’une interface moderne.

La compatibilité de Framer avec les composants React ouvre de belles perspectives. Framer fait sa petite révolution au sein des applications de design et tend à réduire les délais entre phases de conception et mises en production, tout en réduisant la friction entre design et développement.

Fraîchement sortie, on peut parier sur de nombreuses mises à jour intéressantes dans les mois à venir. Il ne reste plus qu'à trouver les bons workflows pour en tirer profit. À suivre donc !

👋