Figma pour les développeurs

Si vous pensiez que Figma était réservé aux designers, détrompez-vous ! Figma est un outil puissant, avec des tonnes de fonctionnalités intéressantes dont les développeurs peuvent également tirer parti. workflow lorsque vous commencez à transformer des wireframes et des maquettes en code. Même si vous n'êtes pas personnellement familier avec le processus, il n'est probablement pas surprenant d'entendre que c'est souvent un véritable problème. Cette douleur peut être atténuée, cependant, lorsque les deux parties comprennent ce que l'autre recherchera dans le processus de transfert.

Les concepteurs doivent avoir une compréhension assez approfondie du Web frontal : éléments HTML, boîte CSS le modèle, le fonctionnement du redimensionnement réactif, la structure basée sur les composants, etc. Et pourtant, lorsque nous renversons le script, les développeurs sont rarement censés comprendre les bases de la conception. créer de meilleurs produits lorsque les deux parties ont une compréhension approfondie des outils et priorités de l'autre. Sans parler de toutes les façons dont l'accès aux fichiers source de conception peut vous faciliter la tâche.

Dans cet esprit, j'aimerais présenter à mes amis développeurs Figmal'un des plus outils de conception d'interface utilisateur populaires et largement utilisés. C'est gratuit pour un usage individuel, je vous encourage donc à créer un compte et à commencer à jouer ! C'est la meilleure façon d'apprendre.

Comme tout logiciel spécialisé, un fichier Figma peut être un peu difficile à parcourir si vous ne le connaissez pas. Commençons donc par le haut et examinons les bases, ainsi que les fonctionnalités Figma qui seront les plus utiles pour les développeurs.

Organisation des fichiers Figma

Les fichiers Figma sont organisés par Pages ( think screens de votre application), qui contiennent chacune des Frames (sous-pages, souvent utilisées pour organiser des maquettes de Pages dans divers états d'interaction utilisateur). Chaque cadre est composé d'Éléments—formes, texte, vecteurs, etc. Les éléments (ou groupes d'éléments) peuvent être enregistrés en tant que Composants réutilisables. Les éléments sont personnalisés avec des Stylescomme des couleurs ou des polices. Les styles (ou groupes de styles) peuvent être enregistrés en tant que Design Tokens et organisés en Bibliothèques partageables pour une réutilisation facile.

S'orienter

Lorsque vous ouvrez pour la première fois un fichier Figma, voici ce que vous verrez :

• Le panneau central affiche le contenu actuel de la page. Cliquer sur n'importe quel élément le sélectionnera, dans les barres latérales gauche et droite.
• La barre latérale gauche est l'endroit où vous trouverez la structure du document, organisée en une vue imbriquée et en couches. la barre latérale droite comporte trois sections principales : ConceptionPrototype et Inspecter.
  • Design permet au concepteur d'ajuster les styles sur chaque élément. Le contenu de cet onglet changera en fonction de l'élément sélectionné (couleurs, bordures, etc. pour les formes, choix de police, tailles, etc. pour le texte).
  • Le prototype permet au concepteur d'accrocher tous les cadres ensemble. dans un prototype cliquable.
  • Inspect résume le contenu sélectionné dans les propriétés CSS et le code.

Unite UX en fait un jeu d'enfant ! Si vous téléchargez le plugin Figmavous pouvez exporter toutes les données du fichier Figma dans Unite UX, puis exporter à nouveau depuis Unite UX. Ce package d'exportation Unite UX comprendra une tonne de fichiers SASS utiles (dont _tokens.scss) que vous pouvez ajouter directement à votre projet. Boum, terminé.