Dans cet article, je vais vous dire comment créer un composant dans Figma qui conviendra à l'exportation vers le code. Dans Figma, vous pouvez sélectionner notre composant et utiliser le plugin pour générer le code fini.
UPD
Figma est une application spécialisée dans la fourniture d'un ensemble complet de services et de fonctions pour développer des interfaces de complexité variable. L'application elle-même est multiplateforme et peut être utilisée à la fois comme application de bureau et dans un navigateur. À la base, il s'agit d'un éditeur de graphiques vectoriels qui prend en charge une large base de plugins. Depuis le début, pris en charge la génération de styles CSS et de code pour les appareils mobiles. Un gros plus est le stockage des mises en page dans le cloud et la possibilité de travailler simultanément sur un projet avec toute une équipe de designers. Pour les développeurs, il existe une exportation pratique de ressources (par exemple, des icônes vectorielles) aux formats PNG / SVG / JPG, ainsi que l'exportation de pages vers un fichier PDF.
Les plugins de Figma servent à faciliter la tâche du concepteur et du développeur - étendant les fonctionnalités de l'application Figma de base avec des extensions personnalisées (plugins).
Dessinons une vue feuille avec une icône et générons une mise en page.
Voici à quoi ressemble la structure approximative de notre élément de liste - une icône à gauche, puis du texte.
Ce sera la structure de notre composant - l'ensemble vertical d'éléments que nous avons trouvé ci-dessus.
Donc, nous avons compris la structure, compris ce que nous devons faire approximativement, maintenant nous procédons directement à la conception. Pour ce faire, nous prendrons un élément et le créerons sur la base des composants Figma et lui appliquerons une disposition automatique. Tout d'abord, fusionnons le texte et l'icône, ajoutons un peu de remplissage et alignons-le au milieu et à gauche. C'est comme ça ...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
J'ai dessiné la mise en page comme dans l'exemple précédent, réalisé la conception, distribué les blocs et, en utilisant la mise en page automatique, j'ai tout aligné selon mes besoins. J'ai généré le code, corrigé certaines nuances avec des images et des icônes, et en conséquence j'ai reçu une fiche de produit fini. En savoir plus sur Flexbox ici .
Mon balisage généré est disponible ici . Vous pouvez regarder et essayer par vous-même.
J'espère que mon article vous sera utile et qu'il deviendra beaucoup plus facile à composer. Mais sinon, alors je vous demande de ne pas minimiser l'article, mais de m'aider à le raffiner à une forme digestible en laissant vos commentaires.