Kategorien durchsuchen
Entdecken
Fiverr Pro
Deutsch
$
USD
Ich erstelle ein skalierbares tokenbasiertes Designsystem in Figma
Ravindra
Über diesen Service
Automatische Übersetzung
Die meisten "Designsysteme", die du kaufst, sind nur eine Farbpalette und ein paar Komponenten, die ohne Struktur, Dokumentation oder etwas, das dein Entwicklerteam verwenden kann, zusammengeklebt sind.
Ich baue echte TOKEN-BASED Designsysteme: primitive semantische Komponenten-Tokens, damit dein Produkt konsistent bleibt, Light/Dark/Multi-Brand-Theming unterstützt und ohne Rätselraten an Entwickler übergeben werden kann.
WAS DU BEKOMMST:
Echte Token-Architektur, nicht nur Styles auf Komponenten
Figma Variablen für Farbe, Abstand, Radius, Typ & Modi
Entwicklungsgerechter Export: CSS-Variablen, Tailwind oder JSON-Tokens
WCAG-geprüfte Kontrastverhältnisse und Touch-Ziele
Dokumentation, die jedes Token erklärt und wie man es erweitert
Built to scale, damit neue Komponenten das System korrekt erben
WER DAS FÜR IST:
Startups, die vor dem Skalieren formalisieren, Agenturen, die an Entwickler übergeben, Gründer, die von inkonsistenten Bildschirmen frustriert sind, Teams, die zu Figma Variablen migrieren.
WIE WIR ARBEITEN:
1. Markenassets oder bestehendes UI teilen
2. Ich erstelle die Token-Architektur
3. Komponenten auf dieser Grundlage bauen
4. Figma-Datei + Dokumentation + Dev-Export liefern
5. Eine Überarbeitungsrunde zur Feinabstimmung
Nicht sicher, welches Paket passt? Schreib mir dein Produkt und Teamgröße; ich sage dir, was du brauchst.
Bevorzugte Lieferart
Bitte informiere den Freelancer über alle Präferenzen oder Bedenken in Bezug auf den Einsatz von KI-Tools bei der Ausführung und/oder Lieferung deines Auftrags.
Lerne Ravindra kennen
Ravindra
Expert UI UX Designer
- AusIndien
- Mitglied seitOkt. 2022
- ⌀ Antwortzeit1 Stunde
- Letzte Lieferung1 Jahr
Sprachen
Englisch
Hi Folks,
My name is Ravi. A Digital UI/UX Designer with 12+ years of Experience.
I am Experienced in (UX/UI) User Experience Design and User Interface Design, Web Design or Landing page design, Mobile App UI Design, (UX) User Research, UI/UX Prototyping, Wireframe design, and User Flow.
I can help you with:
- Complex Mobile App and Web App Design
- Responsive Website Design
- User flows, Wireframes, Scenarios
- Interactive UI Prototype / Testing
- Component Library, Design System
Tools:
- Figma
- InVision
- Adobe XD
- Photoshop
Automatische Übersetzung
Mein Portfolio
FAQ
Automatische Übersetzung
Was ist der Unterschied zwischen einem "UI-Kit" und einem "tokenbasierten Designsystem"?
Ein UI-Kit ist eine Sammlung vorgefertigter Bildschirme/Komponenten. Ein tokenbasiertes System ist die zugrunde liegende Architektur – Farben, Abstände und Typografie, die einmal als Variablen definiert und überall referenziert werden – so skaliert und thematisiert das System ohne manuelle Nacharbeit. Ich baue letzteren.
Verwendest du Figma Variablen oder Plugins wie Tokens Studio?
Standardmäßig native Figma Variablen, da die meisten Entwicklerteams diese jetzt über Figma's REST API oder Plugins wie Tokens Studio synchronisieren. Ich kann auch Tokens Studio einrichten, wenn dein Team bereits diese Pipeline hat – erwähne es einfach in deinem Brief.
Werden meine Entwickler das ohne viel Hin und Her nutzen können?
Ja – genau das ist der Punkt. Du bekommst einen Token-Export (CSS-Variablen, Tailwind-Konfiguration oder JSON), der direkt mit dem in Figma übereinstimmt, sodass kein manuelles Raten von Hex-Codes oder Abstands-Werten notwendig ist.
Ich habe noch keine Markenrichtlinien – kannst du das trotzdem machen?
Ja. Ich kann den initialen Token-Satz mit dir definieren (Farben, Typenskala, Abstände) als Teil des Basic- oder Standard-Pakets. Das kostet etwas mehr Entdeckungszeit, also erwähne das bitte im Voraus.
Kannst du ein bestehendes Designsystem auditieren/ reparieren, anstatt ein neues zu bauen?
Ja, schick mir die Figma-Datei – ich prüfe, ob eine Neuaufbau oder eine gezielte Token-Refaktorierung notwendig ist, und mache ein Angebot.
Was benötigen Sie von mir, um zu beginnen?
Markenfarben/Logo (falls vorhanden), bestehende Bildschirme, deine Zielplattformen (Web/iOS/Android) und ob du Light/Dark/Multi-Brand-Unterstützung brauchst.
