Mode développeur

Lorsqu’on utiliser Figma pour intégrer un site, on active le mode développeur.

Il active les différentes options qui seront évoquées plus bas.

figma dev mode.png

<aside> ☝ Le mode développeur n’est pas accessible en version gratuite. Pour l’utiliser, assurez-vous que votre projet se trouve dans un espace de travail education.

</aside>

Calcul des distances

Pour obtenir la distance entre les éléments :

  1. Sélectionner un élément sur la maquette
  2. Appuyer sur la touche option de votre clavier
  3. En maintenant la touche enfoncée, déplacer la souris sur d’autres éléments

distance.gif

Export des images

Pour exporter une image :

  1. Sélectionner un élément sur la maquette

  2. Cliquer sur Export, en bas à droite de la fenêtre

export.png

  1. Sélectionner l’échelle et le format, puis cliquer sur Export

export2.png

Export de la CSS

  1. Sélectionner un élément sur la maquette

  2. La CSS apparaît dans la colonne de droite. Cliquer sur l’icône pour la copier

css.png

<aside> ⚠️ Ne faites pas du copier/coller sans réfléchir. Certaines propriétés ne sont pas nécessaires (par exemple font-style: normal) ou peuvent s’appliquer au body (par exemple font-family ou color) En optimisant un peu, on peut réduire la taille du code et donc s’y retrouver plus facilement.

</aside>

Extension Visual Studio Code

Il existe une extension Figma pour Visual Studio Code, qui permet notamment d’avoir le code et la maquette dans le même logiciel.

Pour l’installer :

  1. Cliquer sur l’icône des extensions, dans la barre de gauche de Visual Studio Code

extensions figma.png