GuideDie Stärke von Sanity: Ein Farb-Design-System für bessere Bearbeitungserfahrung und Design-Konsistenz erstellen
Für großartige Ergebnisse in Webdesign und Content Management ist Konsistenz entscheidend. Mit Hilfe von Sanity, einem fortschrittlichen Content-Management-System, können Sie die Bearbeitungserfahrung für Kunden erheblich verbessern. Durch die Nutzung der Stärken von Sanity können Sie direkt im CMS ausgefeilte Design-Systeme aufbauen. In diesem Leitfaden führen wir Sie durch den Prozess der Erstellung eines Farb-Design-Systems, das nicht nur die Bearbeitungserfahrung verbessert, sondern auch die Design-Konsistenz sicherstellt. Los geht's!
Das Ergebnis
In diesem Abschnitt beschreiben wir, was wir aufbauen werden und welche Ziele wir mit unserem Farb-Design-System anstreben. Außerdem stellen wir Screenshots zur Verfügung, um Ihnen ein visuelles Verständnis des Endprodukts zu vermitteln.
Was wir aufbauen werden
Wir erstellen ein Farb-Design-System innerhalb von Sanity, das es Benutzern ermöglicht, Einzelfarben mit Sanity's Color-Input-Plugin zu definieren. Darüber hinaus können Benutzer global Design-System-Farben definieren, die im gesamten CMS einfach wiederverwendet werden können.
Gewünschte Ergebnisse
Flexibilität mit Einzelfarben: Benutzer können benutzerdefinierte Farben für spezifische Anwendungsfälle definieren, was das CMS dynamischer und anpassungsfähiger an verschiedene Inhaltsbedürfnisse macht.
Globale Design-System-Farben: Wir ermächtigen Benutzer, einen Satz standardisierter Farben zu definieren, die mit der Markenidentität übereinstimmen und Konsistenz über die gesamte Website hinweg fördern.
Effiziente Datenstruktur:
Für den Zweck dieses Leitfadens verwenden wir Gatsby als Beispiel-Framework und konzentrieren uns auf die Implementierung des Farb-Design-Systems speziell für Sanity v3. Es sollte jedoch relativ einfach sein, dieselben Prinzipien auch mit Sanity v2 anzupassen und zu implementieren.
Gehen wir zu den nächsten Schritten über und beginnen wir mit dem Aufbau unseres Sanity-basierten Farb-Design-Systems!
Das Sanity-Schema erstellen
Um zu beginnen, müssen wir das Sanity-Schema einrichten und das Color-Input-Plugin hinzufügen. So können Sie vorgehen:
Fügen Sie zuerst Sanity's Color-Input-Plugin zu Ihrem Studio hinzu:
Installieren Sie das Plugin mit npm oder yarn: npm i @sanity/color-input
Importieren Sie colorInput aus dem installierten Paket in sanity.config.ts (oder .js) und fügen Sie es als Plugin hinzu:
1import { colorInput } from '@sanity/color-input'
2
3export default {
4 // ...
5 plugins: [colorInput()],
6}Jetzt können Sie den Farbtyp in Ihren Schema-Typen verwenden. Wenn Sie beispielsweise ein neues Feld wie favoriteColor definieren, können Sie den Typ color verwenden:
1{
2 // ...
3 fields: [
4 // ...
5 { name: 'favoriteColor', title: 'Favorite color', type: 'color' },
6 ]
7}Durch die Verwendung des Farbtyps können Sie im Sanity CMS ganz einfach benutzerdefinierte Farben definieren. Wenn Sie eine Farbe erstellen, ergibt sich eine Datenstruktur wie die folgende:
1{
2 "_type": "color",
3 "hex": "#29158a",
4 "alpha": 0.9,
5 "hsl": {
6 "_type": "hslaColor",
7 "h": 249.99999999999994,
8 "s": 0.7328000000000001,
9 "l": 0.313,
10 "a": 0.9
11 },
12 "hsv": {
13 "_type": "hsvaColor",
14 "h": 249.99999999999994,
15 "s": 0.8457987072945522,
16 "v": 0.5423664,
17 "a": 0.9
18 },
19 "rgb": {
20 "_type": "rgbaColor",
21 "r": 41,
22 "g": 21,
23 "b": 138,
24 "a": 0.9
25 }
26}Als Nächstes erstellen wir den erforderlichen Dokumenttyp im Schema für die Design-System-Farbe. Dieser Typ referenziert den Color-Input-Typ, der vom Sanity-Plugin bereitgestellt wird:
1export default {
2 name: 'designSystemColor',
3 title: 'Design system color',
4 type: 'document',
5 fields: [
6 { title: 'Title', name: 'title', type: 'string' },
7 { title: 'Color', name: 'color', type: 'color' },
8 ],
9 preview: {
10 select: {
11 title: 'title',
12 color: 'color',
13 },
14 prepare(selection) {
15 const { color, title } = selection
16
17 return {
18 title: title,
19 media: (
20 <span
21 style={{
22 border: 'solid',
23 borderWidth: '0.5px',
24 borderColor: 'white',
25 width: '2rem',
26 height: '2rem',
27 borderRadius: '100%',
28 backgroundColor: color.hex,
29 }}
30 />
31 ),
32 }
33 },
34 },
35}Vergessen Sie nicht, die Dateiendung .jsx zu verwenden, damit die Vorschau JSX zurückgeben kann.
Erläuterung der Vorschau: Die Vorschau ist dafür verantwortlich, eine visuelle Darstellung der Design-System-Farbe im Sanity Studio anzuzeigen. Sie verwendet die ausgewählten Felder für Titel und Farbe, um einen kleinen farbigen Kreis als Vorschau zu erstellen. Die media-Eigenschaft in der prepare-Funktion definiert die HTML-Darstellung der Farbe, die als farbiger Kreis angezeigt wird.
Farbauswahl-Optionen hinzufügen: Um Benutzern die Möglichkeit zu geben, zwischen einer Einzelfarbe und einer Farbe aus den vorhandenen Design-System-Farben zu wählen, fügen wir dem Schema ein neues Objekt namens colorChoice hinzu. Dieses Objekt hat zwei Felder: oneOffColor und designSystemColor.
1import { IoColorFillOutline } from 'react-icons/io5'
2
3export default {
4 name: 'colorChoice',
5 title: 'Color Choice',
6 type: 'object',
7 icon: IoColorFillOutline,
8 options: {
9 collapsible: true,
10 collapsed: true,
11 },
12 fields: [
13 {
14 type: 'color',
15 name: 'oneOffColor',
16 title: 'One-off color',
17 hidden: ({ parent, value }) => !value && !!parent?.designSystemColor,
18 },
19 {
20 type: 'reference',
21 name: 'designSystemColor',
22 to: { type: 'designSystemColor', title: 'Design system color' },
23 hidden: ({ parent, value }) => !value && !!parent?.oneOffColor,
24 },
25 ],
26}Erläuterung des Schemas: Das colorChoice-Objekt bietet zwei Optionen für die Farbauswahl: oneOffColor und designSystemColor. Wenn der Benutzer eine Einzelfarbe auswählt, kann er eine benutzerdefinierte Farbe über die Color-Input-Eingabe definieren. Wenn er dagegen eine Design-System-Farbe wählt, kann er eine der im designSystemColor-Dokumenttyp definierten Farben referenzieren. Wir verwenden die hidden-Eigenschaft, um ein Feld bedingt auszublenden, wenn das andere verwendet wird, und so eine benutzerfreundlichere Erfahrung zu gewährleisten.
Die Sanity-Desk-Struktur anpassen
In diesem Abschnitt aktualisieren wir die Sanity-Desk-Struktur, um ein Menü für Redakteure zur Verwaltung von Design-System-Farben hinzuzufügen. Die bereitgestellte Beispiel-Desk-Struktur dient als Basis, und wir integrieren das DesignSystemColorsMenu, um die gewünschte Funktionalität zu erreichen.
Gehen wir den Code und die Erläuterungen durch.
Beispiel Desk-Struktur-Setup
Wir beginnen mit dem vorhandenen Desk-Struktur-Setup, das verschiedene Menüelemente enthält. Die Strukturdatei sieht wie folgt aus:
1import { ConfigMenuItem } from './config'
2import { PageMenuItem } from './pages'
3import { DesignSystemColorsMenu } from './designSystemColors'
4import { LanguagesMenu } from './languages'
5import { BlogsMenuItem } from './blogs'
6
7export default (S) => {
8 return S.list()
9 .title('Content')
10 .items([
11 PageMenuItem(S),
12 DesignSystemColorsMenu(S),
13 LanguagesMenu(S),
14 ConfigMenuItem(S),
15 BlogsMenuItem(S),
16 ])
17}Definition des DesignSystemColorsMenu
Jetzt konzentrieren wir uns auf die Implementierung des DesignSystemColorsMenu, einer separaten Komponente, die für die Verwaltung der Design-System-Farben zuständig ist. Schauen wir uns den Code an:
1import React from "react"
2import { HiOutlineColorSwatch } from "react-icons/hi"
3
4const Icon = () => (
5 <HiOutlineColorSwatch
6 style={{
7 fontSize: "2rem",
8 strokeWidth: "10px !important",
9 color: "#FFFFFFF",
10 }}
11 strokeWidth={1}
12 />
13)
14
15export const DesignSystemColorsMenu = S => S.listItem()
16 .title("Design System Colors")
17 .id("designSystemColors")
18 .icon(Icon)
19 .child(
20 S.documentTypeList("designSystemColor")
21 .title("Design System Colors")
22 .menuItems(S.documentTypeList("designSystemColor").getMenuItems())
23 .filter("_type == $type")
24 .params({ type: "designSystemColor" })
25 .child(documentId =>
26 S.document().documentId(documentId).schemaType("designSystemColor")
27 )
28 )Erläuterung:
Wir verwenden die Methode S.listItem(), um ein Listenelement für die Design-System-Farben in der Sanity-Desk-Struktur zu erstellen.
Die Methode .title() legt den Titel des Menüelements als "Design System Colors" fest.
Die Methode .id() weist dem Menüelement die eindeutige ID "designSystemColors" zur Identifikation zu.
Die Methode .icon() ermöglicht es uns, ein Symbol für das Menüelement festzulegen. In diesem Beispiel verwenden wir das Symbol HiOutlineColorSwatch aus der Bibliothek react-icons/hi, um farbbezogene Inhalte darzustellen.
Die Methode .child() wird verwendet, um die untergeordneten Elemente innerhalb des Menüelements zu definieren.
Wir verwenden S.documentTypeList(), um eine Liste von Dokumenten für den Schema-Typ "designSystemColor" zu erstellen und die Liste im Untermenü anzuzeigen.
Die Methode .title() setzt den Titel des Untermenüs auf "Design System Colors".
Die Methode .menuItems() füllt das Untermenü mit zusätzlichen Optionen wie "Neu erstellen" und "Nach Titel sortieren".
Wir wenden einen .filter() auf die Liste an, um nur Dokumente des Typs "designSystemColor" anzuzeigen.
Mit .params() setzen wir den "type"-Parameter auf "designSystemColor", um Dokumente entsprechend zu filtern.
Die Methode .child() ermöglicht es uns, das Verhalten zu definieren, wenn auf ein bestimmtes Design-System-Farbdokument geklickt wird. In diesem Beispiel navigieren wir mit der Methode S.document() zum Dokumenteditor für die ausgewählte Farbe.
Die Ergebnisse im Sanity Studio
Mit der Implementierung des Farb-Design-Systems im Sanity Studio haben Redakteure nun eine schöne Farbauswahl-Oberfläche, über die sie benutzerdefinierte Farben verwalten und definieren können:
Nächster Schritt: Daten im Frontend verarbeiten
Nachdem wir das Farb-Design-System eingerichtet haben und Redakteure Farben im Sanity Studio einfach verwalten können, besteht der nächste Schritt darin, die erstellten Daten im Frontend zu verarbeiten. Gehen wir zur Frontend-Implementierung über und sehen wir uns an, wie wir das erreichen können!
Die ausgewählten Farben im Frontend verwenden (am Beispiel von Gatsby)
Um die Verwendung der ausgewählten Farben im Frontend zu demonstrieren, erstellen wir ein einfaches "Hello-World"-Beispiel: Eine Gatsby-HomePage-Komponente, die Daten aus der GraphQL-Schicht abruft (bereitgestellt von gatsby-source-sanity) und die Hilfsfunktion getColorHex verwendet, um den zugehörigen Hex-Farbwert zu erhalten.
Gehen wir die Schritte durch.
Schritt 1: Eine einfache Gatsby-HomePage-Komponente erstellen
Zunächst erstellen wir die HomePage-Komponente, die die Überschrift mit der ausgewählten Farbe anzeigt:
1import React from "react"
2
3const HomePage = ({ data }) => {
4 const headlineData = data.sanityHomePage.headline
5 const headlineColorHex = getColorHex(headlineData)
6
7 return (
8 <div>
9 <h1 style={{ color: headlineColorHex }}>
10 {headlineData.text}
11 </h1>
12 </div>
13 )
14}
15
16export default HomePageSchritt 2: Eine GraphQL-Abfrage zum Abrufen von Daten hinzufügen
In diesem Schritt fügen wir eine GraphQL-Abfrage hinzu, um die notwendigen Daten von Sanity abzurufen, einschließlich der Farbauswahlen:
1export const query = graphql`
2 query {
3 sanityHomePage {
4 headline {
5 text
6 ... on SanityColorChoice {
7 oneOffColor {
8 hex
9 }
10 designSystemColor {
11 color {
12 hex
13 }
14 }
15 }
16 }
17 }
18 }
19`Schritt 3: Eine Hilfsfunktion zum Abrufen des zugehörigen Hex-Farbwerts schreiben
Um die Farbauswahlen effektiv zu verarbeiten, benötigen wir eine Hilfsfunktion getColorHex, die den Hex-Farbwert extrahiert, unabhängig davon, ob es sich um eine Einzelfarbe oder eine Design-System-Farbe handelt.
1export const getColorHex = (colorChoiceObject) => {
2 // Check if the colorChoiceObject is defined
3 if (!colorChoiceObject) return undefined
4
5 // Extract the hex color based on the implementation
6 // of colorChoice.js in Sanity
7 const hex =
8 colorChoiceObject.oneOffColor?.hex ||
9 colorChoiceObject.designSystemColor?.color.hex
10
11 return hex
12}Schritt 4: Die Komponente anpassen, um die Farbe zu verwenden
In diesem Schritt importieren wir die Hilfsfunktion getColorHex und passen die HomePage-Komponente an, um den Hex-Farbwert im Stil des h1-Elements zu verwenden.
1import React from "react"
2import { graphql } from "gatsby"
3import { getColorHex } from "../path/to/colorUtils"
4
5const HomePage = ({ data }) => {
6 const headlineData = data.sanityHomePage.headline
7 const headlineColorHex = getColorHex(headlineData)
8
9 return (
10 <div>
11 <h1 style={{ color: headlineColorHex }}>
12 {headlineData.text}
13 </h1>
14 </div>
15 )
16}
17
18export const query = graphql`
19 query {
20 sanityHomePage {
21 headline {
22 text
23 ... on SanityColorChoice {
24 oneOffColor {
25 hex
26 }
27 designSystemColor {
28 color {
29 hex
30 }
31 }
32 }
33 }
34 }
35 }
36`
37
38export default HomePageJetzt zeigt die HomePage-Komponente den Überschriftentext mit der im Sanity CMS definierten Farbe an. Wenn die Farbe eine Einzelfarbe ist, wird sie angewendet, und wenn es sich um eine Design-System-Farbe handelt, wird die entsprechende Farbe verwendet. Auf diese Weise können Sie sicherstellen, dass die ausgewählten Farben konsistent im Frontend angewendet werden und eine kohärente und visuell ansprechende User Experience bieten.
Fazit
Durch die Nutzung der Flexibilität von Sanity haben wir ein leistungsstarkes Farb-Design-System erstellt, das die Bearbeitungserfahrung für Content-Ersteller verbessert. Dieses System ermöglicht es Redakteuren, ihre Kreativität zu entfalten und mühelos herausragende Inhalte zu produzieren. Durch den Einsatz von Sanity's Fähigkeiten haben wir eine hochgradig erweiterbare und wartungsarme Lösung entwickelt, die sowohl Entwicklern als auch Content-Redakteuren und Designern zugutekommt.
Vorteile des Farb-Design-Systems:
Konsistenz: Stellt Design-Konsistenz über die gesamte Website hinweg sicher und stärkt die Markenidentität.
Effizienz: Vereinfacht den Prozess der Farbdefinition und -verwaltung und spart Content-Erstellern Zeit und Aufwand.
Anpassung: Ermöglicht Redakteuren die Erstellung von Einzelfarben für einzigartige Inhaltselemente und bietet so mehr Flexibilität im Design.
Wiederverwendung: Ermöglicht Redakteuren die Wiederverwendung vordefinierter Design-System-Farben und fördert so die Einheitlichkeit im gesamten Content.
Reibungslose Frontend-Integration: Integriert sich nahtlos mit Gatsby (oder anderen Frontend-Frameworks), um ausgewählte Farben auf der gesamten Website anzuwenden.
Wenn Sie daran interessiert sind, ein ähnliches System zu implementieren, oder Unterstützung für Webentwicklungsprojekte benötigen, zögern Sie nicht, mich zu kontaktieren. Ich helfe Ihnen gerne bei der Erstellung außergewöhnlicher digitaler Erfahrungen!