Sketch Grundkurs

CSS-Eigenschaften und SVG-Code exportieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Export von CSS-Eigenschaften und SVG-Code für die spätere Entwicklung ist eine große Zeitersparnis. Lernen Sie in diesem Video, wie Sie davon profitieren.

Transkript

Eine, wie ich finde, sehr geniale Option ist der Export von CSS Eigenschaften und SVG Code aus Sketch. Wie das funktioniert möchte ich jetzt demonstrieren. Es ist sehr, sehr einfach. Alles, was wir machen müssen, ist ein Element selektieren, wie jetzt zum Beispiel diesen Kreis hier, den habe ich jetzt ausgewählt. Ich mache einen Rechtsklick und sage dann hier einfach, "Copy CSS Attributes". Wir kopieren also die CSS Eigenschaften in die Zwischenablage. Dann wechsel ich jetzt mal in einen HTML-Editor. In dem Fall Brackets. Und hier füge ich mir jetzt den CSS-Code ein, einfach Command+V, er liegt ja in meiner Zwischenablage, und jetzt sehen wir hier die Eigenschaften für den Button. Wir haben hier einmal einen Kommentar, weil der Button heißt ja in Sketch auch hier Button, und dann sehen wir die Eigenschaften "background-Image: linear-gradient". Wir haben ja einen linearen Verlauf. Ich gehe mal gerade zur Seite, hier sehen wir den Verlauf. Und wenn ich hier jetzt überfahre, sehen wir auch in Brackets eine Vorschau von dem Verlauf. Wir sehen, dass er 180°, also von oben nach unten läuft, von Weiß nach dem hellen Grau mit einer Transparenz von 0 : 100. Dann haben wir als nächstes die Border. Wir sehen den blauen Rahmen drum herum. Er hat 10 Pixel, er ist Solid, also durchgezogen und hier haben wir die Farbe. Wenn ich draufklicke, sehen wir auch hier den Farbwert. Zu guter Letzt haben wir noch den Schatten. Der Schatten wird aus "box-shadow" als Eigenschaft und dann den Werten 0,2,2,0 und RGB, da sehen wir halt hier ist einfach nur Schwarz mit 50%. Und diese Eigenschaften entsprechen 1 : 1 den Eigenschaften, die wie ich hier in den Schatten definiert haben, nämlich 0,2,2,0 und bei der Farbe die 50%. Auf diese Art und Weise können wir die Eigenschaften von allen möglichen Elementen übertragen. Das heißt, wenn ich hier zum Beispiel den Text auswähle, und einen Rechtsklick darauf mache, dann kann ich auch hier jetzt sagen, "Copy CSS Attributes". Und wenn ich diese jetzt in Brackets einfüge, dann sehen wir hier einmal, dass die Ebene "Track List" heißt. Das sehen wir hier auch, so heißt die Textebene hier. Wir sehen die "font-family: Roboto-Regular". Die Font Size von 21, die Farbe, das Letter-Spacing und bis hin zu Line-Height von 38. Genau die gleichen Eigenschaften, die wir hier auch haben, wenn wir den Text selektieren. Wir sehen hier ebenfalls die Line-Height von 38. Wir können also sämtliche Elemente auswählen, einen Rechtsklick machen, CSS Attribute kopieren und dann in die Entwicklung übernehmen. Wir sparen uns also einen Haufen Zeit. Wir müssen nicht irgendwelche Eigenschaften auslesen, nachmessen oder irgendwas. Diese Angaben können wir einfach übertragen. Das nimmt uns natürlich einen Haufen Arbeit ab. Ja, das Gleiche gilt auch für SVG Grafiken. Scalable Vector Graphics. Das heißt, Scalable Vector Graphics ist der Standard bei aktuellen Webbrowsern für Vektorgrafiken. Und um Vektorgrafiken zu beschreiben, braucht man in dem Fall den Code, der sich dann aus der SVG Grafik ergibt. Wir haben jetzt hier dieses Dreieck. Wenn ich einen Rechtsklick drauf mache, kann ich jetzt hier auch sagen, "SVG Code". Jetzt gehe ich wieder zurück zu Brackets und füge das jetzt hier in dem Fall hier in meine CSS ein. Ist nicht so wichtig, wir wollen ja nur sehen, wie es aussieht. Hier sehen wir nun den gesamten Code, aus dem sich die Grafik zusammensetzt. Wir sehen also hier die Breite 34, Höhe 35. Auch hier nochmal. Wir sehen, welche SVG Version es sein soll. Diese Zeile Code kann man natürlich entfernen. Wer der Generator ist, also in dem Fall Sketch Version 42 und so weiter. Wir sehen hier auch noch mal "Created with Sketch". Wird jetzt auch nicht unbedingt benötigt. Wir können also hier uns eigentlich hauptsächlich auf den Code dann konzentrieren. Das ist in dem Fall der Pfad, aus dem sich das Element zusammensetzt. Ja, auch hier kann man sich natürlich einen Haufen Zeit sparen. Wir können den SVG Code ganz einfach aus der Sketch-Datei rauskopieren. Wie gesagt, ich bin ein sehr großer Fan von diesem Workflow, dass man so ganz einfach an die CSS Eigenschaften und den Code der SVG Grafik kommt, um diesen dann bei der Umsetzung übertragen zu können.

Sketch Grundkurs

Lernen Sie die grundlegende Bedienung von Sketch am Beispiel des UX-Designs einer App.

4 Std. 45 min (54 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.04.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!