Figma Magic en 10 secondes : Création d'une page de carte de flux de pommes pour améliorer rapidement la texture du design

Grilles Bento (Apple Breeze) :Grilles Bento

Le style Bento Grids est un style de conception visuelle caractérisé par le minimalisme, la clarté et un haut degré d'organisation, que l'on retrouve couramment dans les interfaces de sites web et d'applications mobiles modernes. Il consiste à diviser le contenu en modules soigneusement quadrillés, chacun contenant des icônes, des titres et de brèves descriptions, créant ainsi une mise en page qui ressemble à une boîte bento avec des sections pour les aliments. Ce style met l'accent sur l'espace blanc, l'alignement et la cohérence, en utilisant des couleurs d'arrière-plan douces contrastant avec des éléments de premier plan nets pour créer une expérience de lecture propre et confortable. Par exemple, sur un blog personnel ou une page de portfolio, les grilles Bento afficheraient des profils de projets, des résumés d'articles ou des étiquettes de compétences sur des cartes de différentes tailles, créant un effet visuel global d'ordre et de beauté.

Référence au mot clé

Concevoir une page de lancement de produit/service haut de gamme, moderne et minimaliste, avec une mise en page de type grille Bento qui présente toutes les informations clés de manière compacte sur un seul écran.

Contenu essentiel : [indiquer ici les éléments essentiels du contenu

Exigences en matière de conception :
1) Disposition en grille Bento : créer une grille de cartes de différentes tailles, chacune contenant une catégorie spécifique d'informations, avec une disposition compacte mais non surchargée.
2) Conception des cartes : toutes les cartes doivent avoir des coins arrondis (rayon de 20px), un fond blanc/gris clair, un effet d'ombre subtil et un léger effet de flottement vers le haut lorsqu'elles sont survolées.
3) Schéma de couleurs : schéma de couleurs minimaliste, principalement sur fond blanc/gris clair, avec des couleurs dégradées comme couleurs d'accentuation (des couleurs spécifiques peuvent être spécifiées, par exemple du violet clair #C084FC au violet foncé #7E22CE).
4) Hiérarchie typographique :
   - Grands chiffres/titres en gras : utiliser un dégradé de couleurs pour mettre en évidence les points de données clés et les titres principaux.
   - Titres de taille moyenne et petite : pour les titres de cartes, indiquant clairement les catégories de contenu.
   - Petit texte : utiliser le gris pour présenter le texte descriptif d'accompagnement.
5. organisation du contenu :
   - Ligne supérieure : annonces principales, caractéristiques du produit, indicateurs de performance ou arguments de vente clés.
   - Ligne médiane : spécifications du produit, détails techniques, caractéristiques fonctionnelles
   - Ligne inférieure : guide de l'utilisateur et conclusion/appel à l'action
6. éléments visuels :
   - Utiliser des icônes simples pour représenter les caractéristiques
   - Des barres de progression ou des graphiques pour présenter des données comparatives
   - Les grilles et les cartes créent un rythme visuel.
   - Onglets pour afficher des informations catégorisées dans de petites capsules.
7. conception réactive : les pages doivent pouvoir s'adapter à différentes tailles d'écran et conserver une bonne lisibilité sur les appareils mobiles

Référence au style de conception :
- Le style de conception général est similaire à la page de spécification des produits sur le site web d'Apple.
- Utilisez beaucoup d'espace blanc et des éléments visuels simples.
- Mettez l'accent sur les chiffres et les caractéristiques clés et réduisez les textes longs.
- Utilisez des couleurs dégradées pour mettre en évidence les données importantes.
- Espacement approprié entre les cartes pour créer une séparation visuelle claire.

Études de cas

Projet de conception affiné par Figma

Tutoriels officiels sur la façon de l'utiliser :Figma Learning Path - Introduction de base, Tutoriel en chinois - Communauté chinoise de Figma

Plugin pour navigateur Installation et téléchargement du plugin chinois :FigmaCN - Chrome Web Store

Client (recommandé) :‍‍‍ ‍ Figma Chinese + Tutoriel d'installation - Flying Book Cloud Documents

Tout d'abord, nous devons trouver le plugin html.to.design que nous allons utiliser cette fois-ci. Il suffit de le rechercher en cliquant sur l'icône entourée de la barre de tabulation au bas de n'importe quel fichier Figma.

Ensuite, nous entrons l'URL de la page que nous voulons importer, si vous ne l'avez pas, vous pouvez la déployer avec Youware et cliquer sur le bouton Importer.

Tout d'abord, nous voulons donner à l'en-tête du titre est également ajouté à la carte, cette fois, nous avons choisi de trouver l'en-tête Header largeur que la suite toutes les cartes ajoutent à la largeur de la carte est plus large, donc tout d'abord, leur largeur est unifiée à 1472px.

Si nous voulons copier le style de la carte grise suivante sans son contenu, il suffit de choisir une carte grise aléatoire ci-dessous, puis de faire un clic droit - Copier et Coller sous - Copier les propriétés sur la ligne, Coller est la même chose que de sélectionner sur la carte d'en-tête sélectionner Coller les propriétés, vous constaterez que l'en-tête a également une carte.

En sélectionnant la carte Model Scale et en maintenant le bouton Option enfoncé, nous constatons que la largeur de la carte de formation bimodale est de 398 et qu'elles doivent être espacées de 24 px.

Ainsi, la largeur de la carte pour l'échelle du modèle devrait être de 350+398-24, vous pouvez écrire la formule mathématique directement dans le champ de saisie de la largeur, Figma fera les calculs pour vous, n'est-ce pas ?

Enfin, nous faisons la dernière étape avant l'exportation, la carte entière autour des marges de certains problèmes, gauche et droite est très large haut et bas est très étroit, nous voulons qu'ils soient les mêmes, cette fois nous avons juste besoin de sélectionner la couche html-Body, et puis la partie de la boîte rouge de l'espacement sont changés à un uniforme 32 sur elle.

Si vous souhaitez ajouter un bord dégradé à l'image comme je l'ai fait dans l'image de présentation ci-dessus, vous pouvez utiliser postspark (https://postspark.app/screenshot) de tels outils.