UI KIT

Kit Périmètre natif B2B pour Adobe Commerce (comptes entreprise, devis, listes d’achat)

Matrice de 71 fonctions B2B sourcées, écrans étiquetés et guide, pour chiffrer votre boutique Adobe Commerce (extension B2B) sous Luma ou Hyvä Enterprise.

149 €
Paiement unique

Votre compte gratuit se crée avec votre e-mail et un code reçu par e-mail, sans mot de passe. Le paiement se fait ensuite sur la page Stripe.

Vente réservée aux 27 États de l’UE, hors outre-mer et territoires à fiscalité particulière (CGV, art. 2) : adresse de facturation et moyen de paiement de cette zone.

Fichier numérique fourni dès le paiement : en cochant la case ci-dessus, vous renoncez à votre droit de rétractation (voir les CGV).

Prix final · TVA non applicable, art. 293 B du CGI

Licence commerciale · Lire la licence

ACHETERESSAYER

Vue d'ensemble

Description

Ce kit s’adresse aux designers, aux freelances et aux agences qui conçoivent un parcours B2B sur Adobe Commerce, avec l’extension B2B d’Adobe, pour la vitrine Luma livrée avec la plateforme ou pour Hyvä® Enterprise, et qui doivent le chiffrer avant de le dessiner. Comptes entreprise, crédit, catalogues partagés, commande rapide, listes d’achat, devis et bons de commande : il répond, bloc par bloc, à une seule question. Ce que vous dessinez est-il natif, réglable dans l’administration, payant ou à développer ? Chaque bloc des écrans porte une étiquette qui renvoie à une ligne de la matrice, avec sa valeur pour chacun des deux fronts, et chaque ligne cite la page de documentation officielle sur laquelle elle repose. Vous présentez au client des maquettes que la plateforme sait livrer, et vous mettez à part, dans le devis, ce qui demande une licence en plus ou du développement.

Une ligne repérée au cadrage se chiffre avant la maquette plutôt qu’à la passation : des fonctions B2B toutes désactivées par défaut et qui s’activent chacune à part, une commande rapide et une commande par SKU qui s’excluent, deux réglages qui portent le même nom de bon de commande sans rien avoir en commun, un front Hyvä qui passe tout entier par une licence payante.

Sources officielles vérifiées le 11 novembre 2026, pour Adobe Commerce 2.4.9 avec l’extension B2B de la branche 1.5, la vitrine Luma et, côté Hyvä, Hyvä Enterprise sur le thème Hyvä 1.5.3. Le kit aide à cadrer et à concevoir : il ne vaut ni conseil juridique, ni audit de votre boutique, ni garantie d’exhaustivité.

Caractéristiques

Matrice71 lignes
Écrans29, dont 25 en ordinateur et mobile, et 4 e-mails
Tokens58
Guide de cadrage23 pages
Checklist de passation22 points
FormatsXLSX, CSV UTF-8, PDF A4 balisé, Markdown, DTCG JSON, DTCG 2025.10 JSON, Tailwind CSS 4 (@theme), Tailwind CSS 3 (config JS)
Licencecommerciale
Version1.0.0 du 11 novembre 2026

Contenu

  • Une matrice de 71 lignes, une par fonctionnalité, rangées en 10 groupes de fonctions : socle, comptes entreprise, crédit et paiement, catalogues partagés, commande rapide, listes d’achat, devis, bons de commande, e-mails B2B et panier.
    • Statut : 70 lignes configurables, avec le chemin exact dans l’administration et le réglage par entreprise quand il existe, 1 en extension (l’installation de l’extension B2B), aucune native ni à développer.
    • Édition : toutes les lignes sont propres à Adobe Commerce.
    • Deux colonnes de front : sous Luma, 67 lignes sont couvertes par la vitrine livrée avec la plateforme et 4 sont sans objet (réglages d’administration sans bloc en boutique) ; sous Hyvä, 67 lignes passent par Hyvä Enterprise et 4 sont sans objet.
    • Risque devis : 4 lignes en risque faible, 67 en moyen, aucune en fort. Le risque moyen tient à l’extension B2B à installer ou au front Hyvä Enterprise : pour un projet Luma, le risque réel se lit dans les pièges du guide.
    • Sources : chaque ligne cite sa page officielle, sa date de lecture et un extrait court en langue d’origine, 59 URL sources au total. Le tableur ajoute les feuilles Mode d’emploi, Écrans, Extensions (les 2 licences à prévoir, sans prix) et Sources.
  • Un fichier de conception pour Figma : 25 écrans desktop, leurs 25 versions mobiles et 4 e-mails (compte entreprise activé, crédit de l’entreprise mis à jour, devis mis à jour, bon de commande à approuver).
    • Écrans : demande de compte entreprise, connexion et états du compte, tableau de bord du compte B2B, profil de l’entreprise, utilisateurs, structure des équipes, rôles et permissions, crédit de l’entreprise, catégorie et fiche produit au catalogue partagé, commande rapide et commande par SKU (deux options exclusives l’une de l’autre), listes d’achat et détail d’une liste, panier B2B, demande de devis, liste et détail des devis, modèles de devis, checkout B2B (livraison, puis paiement), bons de commande et leur approbation, règles d’approbation et accès refusé.
    • Étiquettes : 65 lignes de la matrice sont dessinées, en 63 blocs par jeu d’écrans et 164 étiquettes au total. Chaque bloc porte une étiquette sur trois lignes, l’identifiant et le statut, puis la valeur du front Luma et celle du front Hyvä, toujours écrites en toutes lettres et posées dans un calque d’annotations que vous pouvez masquer.
    • Fondations et composants : 55 variables, 16 styles de texte, 3 styles d’effet, 37 jeux de composants pour 149 variantes et 40 icônes. Aux composants de boutique (boutons, champs, prix, carte produit, panier, checkout, en-tête et pied de page en desktop et en mobile) s’ajoutent ceux du B2B : sélecteur d’entreprise, badges de statut, ligne de liste d’achat, arbre des équipes, permissions, règle d’approbation, synthèse du crédit, saisie par SKU, envoi de fichier, historique et commentaires. Aucun logo.
  • 58 tokens, dont 14 couleurs, 13 espacements, 6 rayons, 9 tailles de texte avec leur interligne, 3 graisses et 3 ombres, identiques dans le fichier de conception, les fichiers de tokens et la configuration du thème. Aucun pas hors de la grille d’espacement.
  • La configuration du thème pour le front Hyvä : le bloc à fusionner dans la configuration du thème, le fichier CSS qu’il doit produire pour vérifier votre build, une configuration pour un thème resté en Tailwind CSS 3, et la liste commentée des 11 écarts à la configuration par défaut du thème, à appliquer ou à refuser à la passation. Pour la vitrine Luma, les tokens donnent les valeurs à reporter dans les styles du thème.
  • Un guide de cadrage de 23 pages, en français : lire la matrice et les deux colonnes de front, les 7 questions à poser au client avant la maquette, un atelier de cadrage pas à pas, 12 pièges où un parcours B2B plausible bute sur une limite de la plateforme ou d’un front, la passation au développement, les 5 fonctionnalités que le kit ne tranche pas (3 faute de page officielle, 2 hors de son périmètre), et les sources.
  • Une checklist de passation de 22 points, dans le guide et en fichier texte à copier dans un ticket.

Fichiers du kit :

LICENCE.txt
LISEZMOI.txt
CREDITS.txt
figma/native-scope-b2b-kit-for-adobe-commerce-1.0.0.fig
guide/guide-cadrage.pdf
guide/checklist-passation.md
matrice/perimetre-natif.xlsx
matrice/perimetre-natif.csv
tokens/tokens.json
tokens/tokens.2025-10.json
theme/config-tokens.json
theme/theme.css
theme/tailwind.config.js
theme/ecarts-config-defaut.md

Formats et compatibilité

  • Matrice en XLSX et en CSV UTF-8, avec les mêmes identifiants : le tableur a ses listes déroulantes et se filtre par front retenu, par écran ou par groupe de fonctions ; le CSV s’importe dans tout tableur ou outil de suivi.
  • Guide en PDF A4 balisé, avec signets, et checklist en Markdown.
  • Tokens en DTCG JSON au format lu par l’outil hyva-tokens du thème (tokens/tokens.json), et les mêmes tokens au format DTCG 2025.10 pour les autres outils (tokens/tokens.2025-10.json).
  • Thème (front Hyvä) : theme/theme.css est la sortie Tailwind CSS 4 (@theme) attendue ; theme/tailwind.config.js reprend la même échelle en Tailwind CSS 3. La configuration a été vérifiée avec l’outil hyva-tokens dans un projet de test hors boutique : ni dans une boutique complète, ni avec les gabarits des modules B2B de Hyvä Enterprise.
  • Thème (front Luma) : aucun fichier de variables ; les tokens donnent les valeurs à reporter.
  • Fichier .fig : un fichier compatible Figma, à importer dans votre espace. Écrans desktop en 1 440 px, mobiles en 375 px, e-mails en 600 px.
  • Polices : Inter (SIL OFL 1.1) est référencée par les tokens et n’est pas fournie : votre projet la charge. Le guide est composé en Work Sans (SIL OFL 1.1), embarquée dans le PDF.
  • Versions relevées : Adobe Commerce 2.4.9 avec l’extension B2B de la branche 1.5 (le guide précise la version de l’extension selon celle de la plateforme), thème Hyvä 1.5.3 pour le front Hyvä Enterprise.

À savoir

  • L’extension B2B exige Adobe Commerce : elle n’existe pas pour Magento® Open Source. Sans licence Adobe Commerce, aucune ligne de la matrice ne s’applique.
  • Sous Hyvä, le front B2B demande Hyvä Enterprise, une licence payante de l’éditeur du thème, qui s’installe après l’extension B2B d’Adobe. La date de cette licence change ce qu’elle inclut : le guide dit quoi demander au client. Le kit ne cite aucun prix de licence : relevez les conditions de chaque éditeur à la date du devis.
  • Pour le front Hyvä, le suivi public de compatibilité de l’éditeur nomme des écarts sur quelques lignes, et deux lignes n’y figurent pas : le guide les liste et dit lesquelles faire confirmer à l’éditeur.
  • Les noms de boutique, d’entreprises et de produits des écrans sont fictifs.
  • Le guide est un PDF balisé, mais sa conformité PDF/UA n’a pas été mesurée.
  • Le kit ne contient aucune extension ni aucun module : il sert à cadrer, à concevoir et à passer la main au développement.
  • Hors du périmètre du kit : Adobe Commerce as a Cloud Service, qui ne prend pas en charge les vitrines Luma, les fronts Edge Delivery Services et l’API GraphQL B2B.
  • Sur l’écran E17 (Mes devis), les étiquettes du premier bloc recouvrent le titre et l’en-tête du tableau : masquez le calque d’annotations pour voir le bloc entier.
  • Le guide, la matrice et les étiquettes sont en français ; les extraits de documentation restent en langue d’origine.
  • Mises à jour : gratuites pour les acheteurs, publiées au fil des versions de la plateforme, sans calendrier garanti. Elles couvrent les corrections du kit et, quand une nouvelle version de la plateforme, de l’extension B2B ou du thème change un statut, une source ou la configuration, la mise à jour de la matrice, des étiquettes, des tokens et du guide. Elles ne couvrent pas les fonctionnalités laissées hors de la matrice, que le guide liste à part.

Licence

Le kit est vendu avec la licence commerciale, en paiement unique : vous pouvez l’utiliser pour vos projets personnels et professionnels, y compris pour vos clients, mais pas revendre ni redistribuer ses fichiers, même modifiés, comme kit ou comme modèle.

Pour aller plus loin

Historique des versions

1.0.0 (11 novembre 2026) : première version.

Mentions

Kit indépendant, ni affilié à, ni approuvé ni sponsorisé par Adobe Inc. ni par Hyvä Themes B.V. Adobe et Adobe Commerce sont des marques déposées ou des marques d’Adobe aux États-Unis et/ou dans d’autres pays. Magento® est une marque déposée d’Adobe. Hyvä® est une marque déposée de Hyvä Themes B.V. Luma est le nom du thème de vitrine livré avec la plateforme, Hyvä Enterprise celui d’un produit de Hyvä Themes B.V. : ils sont cités à titre de référence. Les noms de la plateforme et de ses fronts ne servent ici que de mention de compatibilité ; les écrans sont redessinés à partir de la structure de page documentée, sans logo ni capture d’une boutique réelle.

Déclaration d’IA : la matrice, les textes du guide, les tokens, la configuration du thème, les scripts de contrôle et la construction du fichier de conception ont été produits avec un assistant d’IA (Claude Code, Anthropic), puis contrôlés par des scripts et par relecture. Sources officielles vérifiées le 11 novembre 2026 : chaque ligne de la matrice cite la source sur laquelle elle repose. Le kit ne contient aucune image générée par IA.

À propos de l’auteur

Questions fréquentes

Le kit vaut-il pour Magento Open Source ?
Non. L’extension B2B d’Adobe pose Adobe Commerce en prérequis et n’existe pas pour Magento Open Source : toutes les lignes de la matrice portent l’édition Adobe Commerce, et la première question du guide fait vérifier la licence du client avant toute maquette.
Faut-il une licence Hyvä payante ?
Sous Luma, non : la vitrine est livrée avec la plateforme, et seule l’extension B2B est à installer. Sous Hyvä, oui : le front B2B passe par Hyvä Enterprise, licence payante de l’éditeur du thème, et la colonne du front Hyvä le signale sur chacune des 67 lignes concernées. Le kit ne donne pas de prix : demandez les conditions à l’éditeur à la date du devis.
Comment brancher les tokens sur mon thème ?
Sous Hyvä, fusionnez theme/config-tokens.json dans la configuration du thème, sous la clé tokens, lancez npx hyva-tokens depuis le dossier tailwind du thème, puis le build Tailwind, et comparez le fichier généré à theme/theme.css. Relisez ensuite theme/ecarts-config-defaut.md : chaque écart s’applique ou se refuse en notant pourquoi. Sous Luma, reportez les valeurs de tokens/tokens.json dans les styles du thème.