Droplette

Qu’est-ce que Droplette ?

Droplette est un plugin pour Figma et FigJam AI créé par Relay, qui aide les designers à générer des palettes de couleurs à partir d’images existantes, de styles de couleur et de exigences textuelles. Il utilise GPT-4o pour comprendre les instructions et proposer des palettes de couleurs ; il ne s’agit pas d’un appareil ou d’une application de soins de la peau du même nom.

Outil intégré directement dans le processus de sélection des couleurs des fichiers de conception, il vise à explorer, organiser et itérer rapidement sur les couleurs. Il ne remplace pas les tests de contraste, l’audit de la marque, les épreuves d’impression ni le jugement final du designer.

Fonction principale

Extraction des couleurs à partir du cadre de conception

L’utilisateur peut sélectionner un ou plusieurs cadres dans Figma ou FigJam pour que l’extension prenne les couleurs qui y apparaissent comme base de la palette. Cela convient pour collecter rapidement des indices de couleur à partir de moodboards, de compositions de référence, d’illustrations ou de pages existantes.

Les résultats d’extraction peuvent encore contenir des couleurs décoratives, des ombres ou des variations subtiles peu adaptées en tant que couleurs système. Avant utilisation, il convient de fusionner les couleurs similaires et de distinguer les couleurs principales, les couleurs secondaires, les couleurs neutres et les couleurs d’état.

Connecter le style de couleur local

Droplette peut lire les styles de couleurs locaux dans les fichiers, permettant à l’IA de proposer de nouvelles combinaisons au sein du système de design existant. L’équipe peut ainsi étendre les couleurs de la marque, créer des thèmes sombres ou ajouter des couleurs spécifiques à une événement, plutôt que de partir de couleurs complètement étrangères.

Le fait que l’extension lit les styles ne signifie pas que le résultat généré respecte automatiquement les normes de la marque. Le designer doit encore vérifier la nomenclature, la structure des variables, l’écartement des gammes de couleurs et la manière dont les composants sont réellement utilisés.

Génération de palettes par texte et itération

L’utilisateur peut décrire l’identité de la marque, le type de produit, l’ambiance souhaitée, la saison ou les couleurs à éviter ; GPT-4o transformera ces indications en suggestions de palette de couleurs. Plus les instructions sont précises, plus les résultats seront susceptibles d’être proches de l’objectif visé.

• Décrire les scénarios d'utilisation, tels que l’arrière-plan financier, les applications pour enfants ou les emballages écologiques.
• Spécifiez les couleurs de marque à conserver, le nombre de couleurs et la tendance de luminosité.
• Indiquez les teintes, la saturation ou les associations de couleurs stéréotypées du secteur à éviter.
• Indiquez s’un thème clair, un thème sombre, des couleurs pour les graphiques de données ou des couleurs d’état sont nécessaires.
• Conserver les couleurs satisfaisantes avant de générer les autres positions, afin de réduire les tentatives inutiles.

Une génération ne prend généralement que quelques secondes, mais la vitesse est influencée par le nombre de couleurs, la complexité des instructions, la connexion réseau et l’état du service OpenAI. La description de la vitesse indiquée sur la page ne constitue pas une promesse de temps de réponse fixe.

Tutoriel d'utilisation complet

1. Installez Droplette dans la communauté Figma et vérifiez que votre compte Figma actuel autorise l’utilisation d’extensions.
2. Acheter et activer une licence à usage unique, en conservant le justificatif de commande et les informations d’autorisation.
3. Créez une clé API spécifique à ce plugin dans votre compte OpenAI, et définitsez un budget d’utilisation pour le projet correspondant.
4. Saisissez la clé selon les instructions du plugin, et n’insérez pas la clé dans des documents publics, des commentaires ou des chats d’équipe.
5. Ouvrez le fichier Figma ou FigJam cible, sélectionnez un cadre, une couleur existante, ou connectez un style de couleur local.
6. Saisissez l’intention de la palette, le contexte d’utilisation, le nombre de couleurs ainsi que les conditions à respecter ou à éviter.
7. Exécutez la génération et vérifiez les personnages de chaque couleur, les niveaux et leurs relations avec les composants existants.
8. Conserver les couleurs satisfaisantes, ajuster les valeurs de couleur inadaptées, puis générer à nouveau les autres couleurs à l’aide d’indications complémentaires.
9. Appliquez les résultats aux variables, aux styles ou aux composants, et vérifiez le contraste des textes, des icônes et des états dans l’interface réelle.
10. Effectuer des tests préliminaires sur les arrière-plans clairs et sombres, les différences de perception des couleurs, les déviations de l’écran et les impressions nécessaires.

Exemple de formulation d’une instruction

Une indication efficace doit décrire en même temps le scénario, le ton, les couleurs principales et les contraintes ; par exemple, il peut être demandé de créer un système à cinq couleurs pour une application de gestion de la santé, calme, fiable et adaptée à une interface sombre. Il est également possible de demander de conserver les couleurs principales existantes, et de laisser les autres couleurs représenter les états de succès, d’avertissement et de danger.

Ne vous contentez pas d’écrire « joli » ou « haut de gamme » ; de tels termes manquent de contraintes exécutables. Si le résultat n’est pas satisfaisant, précisez progressivement le public cible, les niveaux de clarté et d’obscurité, la saturation, la personnalité de la marque ainsi que les exigences de contraste à atteindre.

Entrée et sortie

Prix et frais de quantité

La page de paiement actuelle indique 9 dollars comme paiement unique, sans abonnement ni essai gratuit. Ce prix peut correspondre à un tarif de lancement ; la monnaie, les taxes et les méthodes de paiement disponibles peuvent varier en fonction de la région ou de la page de paiement.

L’achat d’un plugin ne comprend pas de quota pour les modèles OpenAI ; l’utilisateur doit disposer de sa propre clé API et payer des frais supplémentaires pour les appels. Les créateurs indiquent que la plupart des utilisateurs dépensent entre 1 et 3 dollars par mois, ce qui n’est qu’une estimation basée sur une utilisation moyenne, et ne constitue ni un prix fixe, ni une garantie de quota, ni un plafond de frais.

Les délais de remboursement, les conditions exceptionnelles, le nombre d’appareils autorisés par licence, ainsi que les règles de partage en équipe et de transfert d’autorisations ne sont pas encore publiés. Avant de payer, il convient de vérifier le montant final sur la page de paiement et de s’assurer auprès du vendeur des points d’autorisation et de remboursement qui restent flous.

Plateforme et modes d'utilisation

API, GitHub et statut open source

Droplette exige que l’utilisateur remplisse la clé API d’OpenAI, mais cela ne signifie pas qu’il fournit une API Droplette aux développeurs. Aucune interface de produit ou SDK officiel pouvant être utilisé pour des appels depuis des systèmes externes n’a été confirmé pour le moment.

Confidentialité, sécurité et gestion des clés

La page du produit actuel ne précise pas si les clés API sont stockées localement, sur le serveur du plugin ou ailleurs, et n’explique pas non plus de manière claire le parcours complet de transmission des prompts, des styles de couleur ou des informations relatives aux cadres. Il est donc impossible d’affirmer que les données de conception ne sont traitées que localement ou que les clés ne passent jamais par un système tiers.

La page publique ne précise pas non plus la durée de conservation des données, le mécanisme de suppression, les méthodes de chiffrement, la liste des sous-traitants ni le processus de traitement des incidents de sécurité. Lorsqu’il s’agit de produits non publiés par le client, de normes de marque confidentielles ou de projets sensibles, il convient de confirmer ces points avec le fournisseur avant utilisation.

• Créez un projet OpenAI distinct et une clé dédiée pour le plugin, et n’utilisez pas les clés du système de production.
• Définir des budgets, des alertes et des plafonds d’utilisation appropriés dans le projet OpenAI.
• Ne mettez pas la clé dans le canvas de Figma, les notes partagées, le dépôt public ou les captures d’écran.
• En cas de suspicion de fuite de clé, annuler immédiatement et la recréer, tout en vérifiant les utilisations anormales.
• Utilisez d’abord un fichier de test insensible pour déterminer la plage de données que le plugin doit lire.
• Changer les clés et vérifier les autorisations des plugins en cas de départ d’un membre de l’équipe, de perte d’équipement ou à la fin d’un projet.
• Avant d’utiliser les matériaux du client, vérifiez que le contrat autorise le traitement des données correspondantes par le service d’IA.

La page du produit utilise un service d’analyse léger, mais les informations publiques existantes ne suffisent pas à décrire l’ensemble des données analysées. Les règles relatives à la consommation, à la conservation et au traitement des données sur le compte OpenAI doivent également être examinées séparément dans des conditions d’utilisation distinctes.

Notes sur les droits d’auteur, l’usage commercial et les autorisations

La page actuelle ne divulgue pas de manière complète les droits d’auteur relatifs à la création de la palette, les autorisations d’utilisation commerciale et les dispositions concernant les responsabilités en cas de violation. Les couleurs elles-mêmes ne correspondent pas aux droits associés à des œuvres spécifiques, à l’identité de marque, aux polices de caractères, aux graphismes et aux systèmes visuels des concurrents.

• Ne prenez pas directement pour cible de copie les systèmes visuels protégés de vos concurrents.
• Les éléments de marque doivent faire l’objet d’une vérification des risques de similitude de palette de couleurs et d’identification sectorielle.
• Il est nécessaire de vérifier, pour le projet du client, si le contrat autorise l’utilisation de plugins d’IA tiers et de modèles externes.
• Conserver les enregistrements de sélection artificielle, de modification, de tests de contraste et d’approbation.
• Avant l’achat en groupe, vérifier si la licence peut être utilisée par plusieurs personnes, si elle peut être transférée et le nombre d’appareils autorisés.
• Lorsqu’une couleur exclusive doit être promise, on ne doit pas supposer que le résultat de l’IA est unique.

Adapté aux utilisateurs et aux scénarios typiques

• Concepteurs UI et UX : exploration rapide des couleurs principales, des couleurs secondaires et des couleurs d’état pour de nouveaux produits.
• Concepteur de marque : Développer les thèmes d’événement ou les palettes de couleurs des sous-marques en s’appuyant sur les styles de couleurs existants.
• Équipe de conception du système : partir des styles locaux pour tester un thème sombre et de nouvelles gammes de couleurs.
• Équipe produit : Déterminer les directions de couleur à partir des images de référence lors de la phase du tableau émotionnel de FigJam.
• Designer libre : réduit le temps consacré à la sélection manuelle des couleurs et aux essais répétés.
• Enseignement et ateliers : démonstration des relations entre la sémantique du texte, l’émotion visuelle et la palette de couleurs.

Avantages et limites

Avantages principaux

• Travailler directement dans Figma et FigJam pour réduire la copie des couleurs entre outils.
• On peut intégrer la couleur du cadre et les styles locaux dans le processus de génération, ce qui donne un résultat plus proche des designs existants.
• Permet de conserver les couleurs satisfaisantes pour générer à nouveau les autres positions, facilitant ainsi des itérations progressives.
• La licence de plugin unique n’inclut pas de frais de abonnement continu.
• Les prompts en langage naturel réduisent la barrière pour passer d’une description abstraite de la marque à un brouillon de couleur.

Principales restrictions

• Il est nécessaire de préparer séparément une clé API OpenAI et d’assumer les frais liés à l’utilisation du modèle.
• La qualité de la coloration varie en fonction de l’image d’entrée, de la qualité du style, des détails des indications et de la réponse du modèle.
• La génération des résultats ne garantit pas automatiquement l’accessibilité, la conformité à la marque ou la cohérence d’impression.
• Les informations publiques concernant la politique de confidentialité, les flux de données, les remboursements et les règles d’autorisation d’équipe sont insuffisantes.
• Aucune version pour site web indépendant, appareil mobile, extension de navigateur ou autre plateforme de conception n’a été confirmée.
• Le code source du produit n’est pas publié, et aucune API ou SDK officielle pour les développeurs n’a été confirmée.

Résumé

Droplette convient aux designers qui souhaitent extraire rapidement des couleurs dans Figma ou FigJam, faire appel à GPT-4o pour générer des palettes et conserver une partie des résultats afin de poursuivre les itérations. Le prix de sa licence unique est clair, mais l’utilisateur doit néanmoins gérer séparément la clé OpenAI, les frais de modèles, les données de conception sensibles et la qualité visuelle finale.

Questions fréquentes

Quel est l’outil Droplette ?

C’est l’extension d’IA pour la coloration de Figma et FigJam, qui tire le contexte des cadres et des styles de couleur locaux, puis génère et ajuste des palettes à partir de suggestions textuelles.

Droplette est-elle liée au produit de soin de la peau du même nom ?

Aucune association confirmée. Cet article traite du plugin de couleurs conçu par Relay, et non d’un appareil de soins de la peau ou d’une application mobile pour les soins de la peau.

Quel est le prix actuel ?

La page de paiement actuelle indique que la licence coûte 9 dollars en paiement unique, sans abonnement ni essai gratuit. Les taxes, la monnaie et le montant final sont sujets à la page de paiement réelle.

Y a-t-il d’autres frais à payer après l’achat ?

Nécessaire. L’extension utilise la clé API d’OpenAI du propre utilisateur ; les frais de mise en œuvre de GPT-4o sont à la charge du compte OpenAI correspondant.

Faut-il fournir une clé API d’OpenAI ?

Oui, le flux de travail actuel exige que les utilisateurs créent et configurent leurs propres clés. Il est recommandé d’utiliser des clés de projet distinctes et de définir des alertes pour le budget et la consommation.

Quelles langues sont prises en charge pour les prompts ?

Vous pouvez décrire vos besoins de palette de couleurs dans les langues prises en charge par OpenAI. Les différentes langues et les détails d’expression peuvent affecter la compréhension du modèle et les résultats générés.

Peut-on garantir automatiquement que le contraste des couleurs est conforme ?

Il ne faut pas considérer que le résultat généré passe automatiquement au test d’accessibilité. Les concepteurs doivent tester le texte, les icônes, les couleurs d’état et les différents fonds dans l’interface réelle.

La clé API est-elle stockée localement ?

La page actuellement affichée ne précise pas l’emplacement où sont stockées les clés ni le flux de données complet. Avant de traiter des projets sensibles, il convient de s’assurer auprès du fournisseur de la manière dont les clés, les instructions et les données de conception seront traitées.

Droplette dispose-t-elle d’une API ou d’un SDK publics ?

Pas encore confirmé. Il appellera l’API d’OpenAI, mais il n’existe pas d’interface Droplette publique destinée aux développeurs externes ni de SDK officiel.

Droplette est-il open source ?

Aucun code source du produit, aucun dépôt GitHub officiel identifiable ou aucune licence open source n’a été trouvé. Le fait que le plugin dépende d’API externes ne signifie pas pour autant que le produit lui-même est open source.