UI KIT

Kit Périmètre natif pour Adobe Commerce et Magento Open Source (thème Hyvä)

Matrice de 103 fonctionnalités sourcées, écrans desktop et mobiles étiquetés, tokens et guide, pour chiffrer votre boutique Magento sous Hyvä avant la maquette.

119 €
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 une boutique sur Magento® Open Source ou Adobe Commerce avec le thème Hyvä®, et qui doivent la chiffrer avant de la dessiner. 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, 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 extension ou du développement.

Une ligne repérée au cadrage se chiffre avant la maquette plutôt qu’à la passation : le checkout de repli à habiller, une fonction réservée à Adobe Commerce montrée à un client sous Magento Open Source, une loupe au survol promise alors que le thème ne la fournit pas.

Le périmètre a été vérifié sur la documentation officielle le 11 novembre 2026, pour Magento Open Source et Adobe Commerce 2.4.9 et le thème par défaut Hyvä 1.5.3. Le kit aide à cadrer et à concevoir : il ne vaut ni audit de votre boutique ni garantie d’exhaustivité.

Caractéristiques

Matrice103 lignes
Écrans29, dont 26 en ordinateur et mobile, et 3 e-mails
Tokens58
Guide de cadrage22 pages
Checklist de passation21 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 103 lignes, une par fonctionnalité, rangées par domaine : catalogue, navigation et recherche, fiche produit, panier, checkout, compte, contenus, e-mails, international, thème et B2B.
    • Statut : 47 lignes natives, 54 configurables avec le chemin exact dans l’administration, 2 en extension, aucune en développement.
    • Édition : 95 lignes valent pour Magento Open Source et Adobe Commerce, 8 sont propres à Adobe Commerce.
    • Front Hyvä : 78 lignes couvertes par le thème par défaut, 12 lignes de checkout servies par le module de repli Luma, 8 en extension payante (Hyvä Enterprise), 1 dans la bibliothèque payante Hyvä UI, 1 à développer, 3 sans objet. Une colonne donne aussi le front Luma.
    • Risque devis : 77 lignes en risque faible, 25 en moyen, 1 en fort.
    • Sources : chaque ligne cite sa page officielle, sa date de lecture et un extrait court en langue d’origine, 96 URL sources au total. Le tableur ajoute les feuilles Écrans, Extensions (avec les prix relevés) et Sources.
  • Un fichier de conception pour Figma : 26 écrans desktop, leurs 26 versions mobiles et 3 e-mails (confirmation de commande, bienvenue, réinitialisation du mot de passe).
    • Écrans : accueil, catégorie avec navigation à facettes, résultats de recherche, fiches produit simple, configurable, groupée et bundle, comparateur, mini-panier, panier, checkout (livraison, puis paiement et revue), confirmation, connexion, création de compte, mot de passe oublié, espace client (tableau de bord, commandes, détail d’une commande, carnet d’adresses, informations, liste d’envies, avis), page de contenu, page introuvable et contact.
    • Étiquettes : 76 lignes de la matrice sont dessinées. Chaque bloc porte une étiquette sur deux lignes, l’identifiant et le statut, puis la valeur 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, 25 jeux de composants pour 91 variantes (boutons, champs, cases et boutons radio, pastilles, quantité, badges, prix, carte produit, facettes, filtres actifs, fil d’Ariane, pagination, onglets, accordéon, messages, notes, étapes du checkout, ligne de panier, étiquette de périmètre, en-tête et pied de page en desktop et en mobile) et 31 icônes. Aucun logo, aucun composant de Hyvä UI.
  • 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 : le bloc à fusionner dans la configuration de Hyvä, 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 écarts à la configuration par défaut, à appliquer ou à refuser à la passation.
  • Un guide de cadrage de 22 pages, en français : lire la matrice et les étiquettes, les 6 questions à poser au client avant la maquette, un atelier de cadrage pas à pas, 12 pièges où un design plausible sort du natif sans le dire, la passation au développement, les 8 fonctionnalités que le kit ne tranche pas faute de source officielle, et les sources.
  • Une checklist de passation de 21 points, dans le guide et en fichier texte à copier dans un ticket.

Fichiers du kit :

LICENCE.txt
LISEZMOI.txt
CREDITS.txt
figma/native-scope-kit-for-magento-hyva-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 client (édition, front Hyvä), par écran ou par risque ; 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 : 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, pas dans une boutique complète.
  • Fichier .fig : un fichier compatible Figma, à importer dans votre espace.
  • 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 : Magento Open Source et Adobe Commerce 2.4.9, thème par défaut Hyvä 1.5.3.

À savoir avant l’achat :

  • Le kit ne contient aucune extension ni aucun module Magento : il sert à cadrer, à concevoir et à passer la main au développement.
  • Hyvä UI, la bibliothèque de composants payante de l’éditeur du thème, n’est pas incluse, et le kit n’en dessine aucun composant. Hyvä Checkout non plus : le checkout dessiné est le repli Luma, et l’alternative payante est signalée par une étiquette.
  • Aucun écran B2B : une ligne de la matrice signale le sujet pour qu’il soit posé avant la maquette.
  • Le guide, la matrice et les étiquettes sont en français ; les extraits de documentation restent en langue d’origine.
  • Les prix d’extensions cités dans la matrice ont été relevés le 11 novembre 2026 : vérifiez-les avant tout devis.
  • 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 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.

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. Les noms de la plateforme et du thème 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, 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 deux relectures distinctes. Chaque ligne de la matrice a été vérifiée sur sa source officielle le 11 novembre 2026. 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 comme pour Adobe Commerce ?
Oui. 95 lignes de la matrice valent pour les deux éditions et 8 sont propres à Adobe Commerce, repérées dans la colonne édition. Aucun bloc propre à Adobe Commerce n’est dessiné, et le guide vous fait poser la question de l’édition dès le cadrage, pour ne pas montrer à un client sous Magento Open Source une fonction qu’il n’a pas.
Faut-il une licence Hyvä payante ?
Pas pour le thème : le kit dessine le thème par défaut Hyvä, gratuit et open source depuis le 10 novembre 2025. Sous un Hyvä gratuit, le checkout dessiné est le repli Luma, un module gratuit à installer. Hyvä Checkout, Hyvä UI et Hyvä Enterprise sont des produits payants de l’éditeur, non inclus : la matrice signale chaque ligne qui en dépend, avec le prix relevé.
Comment brancher les tokens sur mon thème ?
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 à la configuration par défaut s’applique ou se refuse en notant pourquoi.