Droplette

Was ist Droplette?

Droplette ist ein von Relay entwickeltes Plugin für Figma und FigJam AI, das Designern dabei hilft, aus vorhandenen Bildern, Farbmustern und Schriftanforderungen eine Farbpalette zu erstellen. Es nutzt GPT-4o, um Anweisungen zu verstehen und Farbkombinationen vorzuschlagen – es handelt sich dabei nicht um ein gleichnamiges Hautpflegegerät oder -App.

Das Tool ist direkt in den Farbverarbeitungsprozess der Designdateien integriert und dient dazu, Farben schnell zu erkunden, zu organisieren und zu iterieren. Es ersetzt jedoch keine Kontrasttests, keine Markenprüfungen, keine Druckproben oder das endgültige Urteil des Designers.

Hauptfunktionen

Farben aus dem Entwurfsrahmen extrahieren

Benutzer können in Figma oder FigJam ein oder mehrere Rahmen auswählen, damit der Plugin die darin enthaltenen Farben als Grundlage für die Farbpalette verwendet. Dadurch lässt sich schnell anhand von Moodboards, Referenzkompositionen, Illustrationen oder bestehenden Seiten nach Farbinformationen suchen.

Die extrahierten Ergebnisse können weiterhin dekorative Farben, Schattierungen oder feine Abweichungen enthalten, die nicht als Systemfarben geeignet sind. Vor der Verwendung sollten ähnliche Farben zusammengefasst werden, und es sollten Hauptfarben, Hilfsfarben, neutrale Farben sowie Statusfarben unterschieden werden.

Verbinden des lokalen Farbstils

Droplette kann die lokalen Farbstile in Dateien lesen, damit die KI neue Kombinationen innerhalb des bestehenden Designsystems vorschlagen kann. So können Teams die Markenfarben erweitern, dunkle Themen erstellen oder zusätzliche Farben für Veranstaltungen hinzufügen – anstatt von völlig unpassenden Farben auszugehen.

Dass der Plugin die Styles liest, bedeutet nicht automatisch, dass das Ergebnis den Markenvorgaben entspricht. Der Designer muss weiterhin die Namensgebung, die Struktur der Variablen, die Abstände zwischen den Farben sowie die tatsächliche Verwendung der Komponenten überprüfen.

Palette mit Textgenerierung und Iteration

Die Nutzer können den Stil der Marke, die Produktart, die Stimmung, die Jahreszeit oder Farben beschreiben, die vermieden werden sollen. GPT-4o wandelt diese textbasierten Anforderungen in Farbkombinationsvorschläge um. Je genauer die Anweisungen sind, desto eher entspricht das Ergebnis dem gewünschten Ziel.

• Beschreiben Sie die Anwendungsszenarien, wie z. B. das Finanzbackoffice, Kinderalternativen oder umweltfreundliche Verpackungen.
• Geben Sie die gewünschten Markenfarben, die Anzahl der Farben sowie die Helligkeitsrichtung an.
• Geben Sie an, welche Farbtöne, Sättigungen oder gängigen Farbkombinationen vermieden werden sollten.
• Es wird ein helles Theme, ein dunkles Theme, Farben für Diagramme oder Statusfarben benötigt.
• Behalten Sie die zufriedenstellenden Farben bei und erstellen Sie anschließend die übrigen Bereiche, um unnötige Wiederholungen zu vermeiden.

Eine Erstellung dauert in der Regel nur wenige Sekunden, doch die Geschwindigkeit hängt von der Anzahl der Farben, der Komplexität der Anfrage, dem Netzwerk sowie vom Status des OpenAI-Dienstes ab. Die in der Seite angegebenen Geschwindigkeitsangaben stellen keine Garantie für eine feste Reaktionszeit dar.

Vollständige Anleitung

1. Installieren Sie Droplette in der Figma Community und überprüfen Sie, ob Ihr aktuelles Figma-Konto die Verwendung von Plugins erlaubt.
2. Erwerben und aktivieren Sie eine einmalige Lizenz, und speichern Sie die Bestellbestätigung sowie die Autorisierungsdaten.
3. Erstellen Sie in Ihrem OpenAI-Konto eine API-Schlüssel, der ausschließlich für dieses Plugin verwendet wird, und legen Sie für das entsprechende Projekt einen Verbrauchsbudget fest.
4. Geben Sie den Schlüssel gemäß den Anweisungen des Plugins ein. Kleben Sie den Schlüssel nicht in öffentliche Dokumente, Kommentare oder Team-Chats.
5. Öffnen Sie die Ziel-Datei in Figma oder FigJam, wählen Sie einen Rahmen, eine vorhandene Farbe oder verknüpfen Sie einen lokalen Farbstil.
6. Geben Sie die Absicht für die Farbgebung, die Anwendungsszenarien, die Anzahl der Farben sowie die Bedingungen an, die berücksichtigt oder vermieden werden müssen.
7. Führen Sie die Erstellung aus und überprüfen Sie die Charaktere jeder Farbe, die Ebenen sowie die Beziehungen zu den vorhandenen Komponenten.
8. Behalten Sie die zufriedenstellenden Farben bei, passen Sie die unpassenden Farbwerte an und erzeugen Sie anschließend mit zusätzlichen Hinweisen die übrigen Farben neu.
9. Wenden Sie die Ergebnisse auf Variablen, Styles oder Komponenten an und überprüfen Sie in der echten Benutzeroberfläche den Kontrast von Texten, Icons und Zuständen.
10. Führen Sie vorab Tests mit hellen und dunklen Hintergründen, Farbsehschwächen, Bildschirmabweichungen sowie der benötigten Druckausgabe durch.

Beispiele für die Formulierung von Prompten

Eine effektive Anleitung sollte gleichzeitig die Szene, den Stil, die Farben sowie die Einschränkungen beschreiben. Beispielsweise kann gefordert werden, für eine Gesundheitsmanagement-App ein Farbschema mit fünf Farben zu erstellen, das ruhig, glaubwürdig ist und sich gut auf eine dunkle Benutzeroberfläche einstellt. Es kann auch verlangt werden, die bereits vorhandenen Hauptfarben beizubehalten, während die übrigen Farben zur Darstellung von Erfolg, Warnungen und Gefahren verwendet werden.

Schreiben Sie nicht einfach „schön“ oder „hochwertig“ – solche Begriffe enthalten keine konkreten Anforderungen. Falls das Ergebnis nicht zufriedenstellend ist, sollten nacheinander die Zielgruppe, die Helligkeitsstufe, die Sättigung, die Markenidentität sowie die erforderlichen Kontrastanforderungen festgelegt werden.

Eingabe und Ausgabe

Preise und Kosten pro Menge

Auf der aktuellen Zahlelseite wird 9 US-Dollar als Einmalkauf angegeben; es gibt weder ein Abonnement noch eine kostenlose Probephase. Dieser Preis könnte sich auf den Preis während der Einführungsphase beziehen. Währung, Steuern und verfügbare Zahlungsmethoden können je nach Region oder auf der Zahlelseite unterschiedlich sein.

Der Kauf von Erweiterungen beinhaltet keine OpenAI-Modell-Lizenzen. Die Nutzer müssen ihre eigenen API-Schlüssel besitzen und zusätzlich Gebühren für die Nutzung zahlen. Laut den Entwicklern verbringen die meisten Nutzer etwa 1 bis 3 US-Dollar pro Monat. Dies sind nur Schätzungen für den durchschnittlichen Verbrauch – es handelt sich dabei weder um feste Preise noch um Garantien bezüglich der Nutzungsmenge oder Obergrenzen für die Gebühren.

Fristen für Rückerstattungen, Ausnahmefälle, Anzahl der lizenzierten Geräte, Regeln zur Teamnutzung sowie zur Übertragung von Lizenzen sind derzeit noch nicht öffentlich bekannt. Vor der Zahlung sollte die endgültige Summe auf der Zahlungsseite überprüft werden, und unklare Punkte bezüglich der Lizenzen sowie der Rückerstattungen sollten beim Verkäufer geklärt werden.

Plattformen und verfügbare Methoden

API, GitHub und Open-Source-Status

Droplette verlangt von den Nutzern, dass sie einen OpenAI API-Schlüssel eingeben, doch das bedeutet nicht, dass es eine Droplette API für Entwickler bereitstellt. Derzeit gibt es keine bestätigten Produktanschlüsse oder offiziellen SDKs, die für Aufrufe von externen Systemen genutzt werden können.

Privatsphäre, Sicherheit und Schlüsselverwaltung

Auf der aktuellen Produktseite wird nicht erklärt, ob die API-Schlüssel lokal gespeichert werden, auf dem Plugin-Server oder an einem anderen Ort. Ebenso wird nicht klar dargelegt, welcher Weg für die Übertragung von Anweisungen, Farbmustern oder Rahmeninformationen genutzt wird. Daraus kann man daher nicht schließen, dass die Designdaten nur lokal verarbeitet werden oder dass die Schlüssel niemals über Drittsysteme weitergeleitet werden.

Auf der offiziellen Seite werden weder die Dauer der Datenspeicherung, noch die Mechanismen zur Löschung der Daten, noch die Verschlüsselungsmethoden, noch eine Liste der Unterauftragnehmer oder das Vorgehen bei Sicherheitsvorfällen angegeben. Im Falle von noch nicht veröffentlichten Produkten des Kunden, geheimen Markenvorgaben oder sensiblen Projekten sollten diese Punkte vor der Nutzung beim Anbieter abgeklärt werden.

• Erstellen Sie für den Plugin ein eigenes OpenAI-Projekt sowie einen speziellen Schlüssel – wenden Sie nicht die Schlüssel des Produktivsystems wieder an.
• Legen Sie im OpenAI-Projekt ein Budget, Alarme sowie angemessene Obergrenzen für die Nutzung fest.
• Schreiben Sie den Schlüssel nicht auf das Figma-Bildschirmbild, in gemeinsame Notizen, in öffentliche Repositorien oder in Screenshots.
• Sollte ein Schlüssel verdächtigerweise geleakt sein, wird er umgehend widerrufen und neu erstellt, wobei gleichzeitig abweichende Nutzungsmengen überprüft werden.
• Zuerst sollte mit einem unempfindlichen Testfile festgestellt werden, welcher Datenumfang vom Plugin gelesen werden muss.
• Teamaustritte, Verlust von Ausrüstung oder beim Ende eines Projekts: Schlüssel werden ausgetauscht und die Lizenzierung der Plugins überprüft.
• Stellen Sie vor der Verwendung von Kundenmaterial sicher, dass der Vertrag die Verarbeitung der entsprechenden Daten durch KI-Dienste erlaubt.

Die Produktseite nutzt leichte Analyse-Dienste, doch die derzeit verfügbaren öffentlichen Informationen reichen nicht aus, um den gesamten Umfang der analysierten Daten zu erläutern. Die Nutzungsvorgaben, die Speicherregeln sowie die Richtlinien für die Verarbeitung von Daten im Zusammenhang mit dem OpenAI-Konto müssen zudem als eigenständige Dienstbedingungen geprüft werden.

Urheberrecht, kommerzielle Nutzung und Lizenzbedingungen

Auf der aktuellen Seite werden die Urheberrechte bezüglich der Erstellung der Farbpaletten, die Genehmigungen für den kommerziellen Einsatz sowie die Regelungen zu möglichen Rechtsverletzungen nicht vollständig offengelegt. Die Farben selbst stehen in keinem Zusammenhang mit den Rechten, die mit bestimmten Werken, Markenidentitäten, Schriftarten, Grafiken sowie den visuellen Systemen der Wettbewerber verbunden sind.

• Nutzen Sie die geschützten visuellen Systeme der Konkurrenten nicht direkt als Ziel für die Nachahmung.
• Bei Markenzeichen sollte eine Überprüfung auf ähnliche Markenfarben sowie auf Risiken hinsichtlich der Branchenerkennbarkeit durchgeführt werden.
• Für Kundenprojekte muss überprüft werden, ob der Vertrag die Verwendung von Drittanbieter-AI-Plugins und externen Modellen erlaubt.
• Beibehalten Sie die Aufzeichnungen zur künstlichen Selektion, Anpassung, Kontrastprüfung und Freigabe.
• Vor dem Team-Einkauf sollte überprüft werden, ob die Lizenz für mehrere Personen genutzt werden kann, ob sie übertragen werden darf und wie viele Geräte erlaubt sind.
• Wenn eine exklusive Farbkombination zugesichert werden muss, sollte man nicht davon ausgehen, dass das Ergebnis der KI einzigartig ist.

Geeignet für Nutzer und typische Szenarien

• UI- und UX-Designer: Schnelle Erkundung von Hauptfarben, Hilfsfarben und Statusfarben für neue Produkte.
• Markendesigner: Erweiterung des Event-Themas oder der Farbpaletten der Submarken auf der Grundlage bestehender Farbdesigns.
• Entwicklerteam des Systems: Ausgehend von den lokalen Stilen werden dunkle Themen sowie neue Farbtöne ausprobiert.
• Produktteam: In der FigJam-Emotionstafel-Phase werden aus den Referenzbildern die Farbrichtungen abgeleitet.
• Freier Designer: Reduziert die Zeit für manuelles Farbauswählen und wiederholte Anpassungen.
• Unterricht und Workshops: Demonstration der Beziehung zwischen Textsemantik, visuellen Emotionen und Farbpaletten.

Vorteile und Einschränkungen

Hauptvorteile

• Arbeiten Sie direkt in Figma und FigJam, um das Kopieren von Farben zwischen Tools zu reduzieren.
• Man kann die Rahmenfarbe sowie lokale Styles in den Erstellungsprozess einbeziehen, wodurch das Ergebnis dem bestehenden Design besser entspricht.
• Es wird unterstützt, die zufriedenstellende Farbe beizubehalten und die übrigen Bereiche neu zu erzeugen, um schrittweise Iterationen zu ermöglichen.
• Eine einmalige Plugin-Lizenz beinhaltet keine laufenden Abonnementkosten.
• Natürliche Sprachanweisungen senken die Hürde vom abstrakten Markenbeschrieb bis zum Farbentwurf.

Hauptbeschränkungen

• Es muss eine eigene OpenAI API-Schlüssel erstellt werden, und die Kosten für die Nutzung des Modells müssen selbst getragen werden.
• Die Qualität der Farbgebung ändert sich je nach Eingabebild, Qualität des Stils, Details der Anweisungen und Reaktion des Modells.
• Die erzeugten Ergebnisse garantieren nicht automatisch Zugänglichkeit, Markenkonformität oder Druckkonstanz.
• Es liegen unzureichende öffentliche Informationen zu der Datenschutzrichtlinie, den Datenflüssen, Rückerstattungen und den Regeln zur Autorisierung von Teams vor.
• Unbestätigte Versionen für eigene Webseiten, mobile Geräte, Browser-Erweiterungen oder andere Designplattformen.
• Der Quellcode des Produkts ist nicht veröffentlicht, und es gibt keine offiziellen Entwickler-APIs oder SDKs.

Zusammenfassung

Droplette eignet sich für Designer, die in Figma oder FigJam schnell Farben extrahieren, GPT-4o zur Erstellung von Farbpaletten nutzen und Teilergebnisse speichern möchten, um weitere Iterationen durchzuführen. Der Preis für eine einmalige Lizenz ist übersichtlich, doch die Nutzer müssen weiterhin den OpenAI-Schlüssel, die Kosten für die Modelle, sensible Designdaten sowie die endgültige visuelle Qualität selbst verwalten.

Häufige Fragen

Was ist Droplette für ein Tool?

Es ist ein AI-Farbzuweisungs-Plugin für Figma und FigJam, das Kontext aus Rahmen und lokalen Farbmustern erhält und anschließend mit textbasierten Anweisungen eine Palette erstellt und anpasst.

Hat Droplette etwas mit dem gleichnamigen Hautpflegeprodukt zu tun?

Es wurde keine Verbindung bestätigt. Dieser Eintrag beschreibt ein Design-Farbanpassungs-Plugin für Relay, nicht eine Hautpflegeausrüstung oder eine mobile Hautpflege-App.

Wie hoch ist der aktuelle Preis?

Auf der aktuellen Zahlseite wird angezeigt, dass die Lizenz für 9 US-Dollar als Einmalkauf erhältlich ist – es gibt weder eine Abonnementoption noch einen kostenlosen Probemonat. Steuern, Währung sowie der endgültige Betrag richten sich nach den Angaben auf der tatsächlichen Zahlseite.

Muss man nach dem Kauf weitere Gebühren zahlen?

Notwendig. Der Plugin verwendet die eigene OpenAI-API-Schlüssel des Benutzers; die Kosten für die Aufrufe von GPT-4o werden von dem jeweiligen OpenAI-Konto getragen.

Muss ein OpenAI API-Schlüssel bereitgestellt werden?

Ja, der aktuelle Workflow erfordert von den Benutzern, dass sie ihre eigenen Schlüssel erstellen und konfigurieren. Es wird empfohlen, separate Projekt-Schlüssel zu verwenden sowie Alarme für Budget- und Verbrauchslimits einzustellen.

Welche Sprachen werden für die Prompt-Eingaben unterstützt?

Die Anforderungen an die Farbgebung können in den von OpenAI unterstützten Sprachen beschrieben werden. Verschiedene Sprachen sowie unterschiedliche Ausdrucksweisen können die Verständnisfähigkeit des Modells und die Ergebnisse seiner Generierung beeinflussen.

Kann der Farbkontrast automatisch auf ein geeignetes Niveau gebracht werden?

Die erzeugten Ergebnisse dürfen nicht als automatisch als barrierefrei angesehen werden. Designer müssen Texte, Symbole, Statusfarben sowie verschiedene Hintergründe in der echten Benutzeroberfläche testen.

Wird der API-Schlüssel lokal gespeichert?

Die derzeit öffentlich zugängliche Seite gibt keine klaren Angaben dazu, wo die Schlüssel gespeichert sind und wie der gesamte Datenfluss abläuft. Bevor sensible Daten verarbeitet werden, sollte man beim Anbieter nachfragen, wie mit den Schlüsseln, Hinweisen sowie den Designdaten umgegangen wird.

Hat Droplette eine öffentliche API oder SDK?

Noch nicht bestätigt. Es ruft die OpenAI-API auf, verfügt aber weder über eine für externe Entwickler zugängliche Droplette-Schnittstelle noch über ein offizielles SDK.

Ist Droplette Open Source?

Es wurden weder Quellcode des Produkts noch offizielle GitHub-Repositorien mit klarer Zugehörigkeit oder Open-Source-Lizenzien gefunden. Die Abhängigkeit des Plugins von externen APIs bedeutet nicht, dass das Produkt selbst open source ist.