{"id":129056,"date":"2018-03-15T09:36:33","date_gmt":"2018-03-15T08:36:33","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/sketch-and-justinmind-integration\/"},"modified":"2025-02-13T19:06:38","modified_gmt":"2025-02-13T18:06:38","slug":"sketch-and-justinmind-integration","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/integration-justinmind-sketch","title":{"rendered":"Die Integration von Justinmind in Sketch"},"content":{"rendered":"<p>Justinmind ist in den Vektorgrafik-Editor und das Design-Tool Sketch integriert. Es gibt zwei M\u00f6glichkeiten, Designs aus Sketch in Justinmind zu \u00fcbernehmen. Zum einen k\u00f6nnen Sie die Option &#8218;In SVG kopieren&#8216; verwenden und zum anderen das Justinmind-Plugin f\u00fcr Sketch. <\/p>\n<h2><a id=\"copy-and-paste-svg-sketch\"><\/a>SVG-Code kopieren und einf\u00fcgen<\/h2>\n<p>Um ein beliebiges Element, eine Gruppe von Elementen oder Zeichenfl\u00e4chen aus Sketch in Justinmind zu \u00fcbernehmen, markieren Sie sie einfach in Sketch und w\u00e4hlen Sie die Rechtsklick-Option &#8218;SVG-Code kopieren&#8216;. \u00d6ffnen Sie dann Justinmind und w\u00e4hlen Sie die Hauptmen\u00fcoption &#8218;Bearbeiten &#8211; Einf\u00fcgen&#8216;, um alle Vektorelemente mit derselben Struktur und denselben Ebenennamen wie in Sketch zu \u00fcbernehmen. Sie k\u00f6nnen dann jedes einzelne Vektorelement ausw\u00e4hlen und es nach Belieben \u00e4ndern.  <\/p>\n<p>Wenn Sie in Justinmind ein Vektorelement mit dem &#8218;Stift-Werkzeug&#8216; erstellt haben, k\u00f6nnen Sie es auf \u00e4hnliche Weise zur weiteren Bearbeitung in Sketch \u00fcbernehmen. Klicken Sie mit der rechten Maustaste auf das Vektorelement in Justinmind und w\u00e4hlen Sie &#8222;SVG-Code kopieren&#8220;, \u00f6ffnen Sie dann Sketch und f\u00fcgen Sie es ein. Die Ebenenstruktur des in Justinmind erstellten Vektorelements wird in Sketch beibehalten.  <\/p>\n<p>Sie k\u00f6nnen mit Kopieren und Einf\u00fcgen so oft vor und zur\u00fcck gehen, wie Sie m\u00f6chten.<\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-sketch\"><\/a>Einrichten Ihres Justinmind-Plugins f\u00fcr Sketch<\/h2>\n<p>Alternativ k\u00f6nnen Sie auch das Justinmind-Plugin f\u00fcr Sketch verwenden. So beginnen Sie mit der Verwendung des Justinmind-Plugins f\u00fcr Sketch: <\/p>\n<ol>\n<li><a href=\"https:\/\/download.justinmind.com\/prototyper-plugins\/justinmind_sketch_plugin.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Laden Sie das Plugin herunter<\/a><\/li>\n<li>Beachten Sie, dass Sie ein funktionierendes Sketch-Konto und ein heruntergeladenes Sketch auf Ihrem Computer ben\u00f6tigen, um diese Integration nutzen zu k\u00f6nnen.<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" width=\"100%\" height=\"100%\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/sketch-plug-in-install.png\" alt=\"Sketch Plug-in installieren\">Sketch Plug-in installieren<\/source><\/video><\/li>\n<li>Um mit dem Justinmind-Plugin in Sketch zu beginnen, \u00f6ffnen Sie das Programm Sketch und gehen Sie auf die Men\u00fcoption Plugins in der Hauptsymbolleiste. W\u00e4hlen Sie die Option &#8222;Justinmind&#8220; und w\u00e4hlen Sie aus den folgenden Optionen:\n<ul>\n<li><strong>Zeichenfl\u00e4chenebenen exportieren<\/strong> &#8211; w\u00e4hlen Sie diese Option, um mit Zeichenfl\u00e4chen mit separaten Ebenen zu arbeiten (jede Sketch-Zeichenfl\u00e4che wird als separater Bildschirm exportiert, und jede Ebene wird ebenfalls einzeln exportiert). Sie k\u00f6nnen w\u00e4hlen, ob Sie alle Zeichenfl\u00e4chen exportieren oder sie einzeln ausw\u00e4hlen m\u00f6chten. <\/li>\n<li><strong>Zeichenfl\u00e4chen als Bilder exportieren<\/strong> &#8211; w\u00e4hlen Sie diese Option, um Ihre Zeichenfl\u00e4chen in Justinmind als eine einzige Ebene zu bearbeiten. Diese Option eignet sich am besten, wenn Sie die visuelle Designphase abgeschlossen haben und Ihrem Design in Justinmind nur noch Funktionen hinzuf\u00fcgen m\u00f6chten. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13107\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards.png\" alt=\"Zeichenfl\u00e4chen exportieren\" width=\"755\" height=\"425\"><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h4>Exportieren von Zeichenfl\u00e4chenebenen<\/h4>\n<p>Wenn Sie Zeichenfl\u00e4chen als Ebenen exportieren m\u00f6chten:<\/p>\n<ol>\n<li>Klicken Sie auf die Option &#8222;Zeichenfl\u00e4chenebenen exportieren&#8220;:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-layers.png\" alt=\"Exportieren von Zeichenfl\u00e4chenebenen\" width=\"755\" height=\"425\"><\/li>\n<li>Das folgende Dialogfeld wird angezeigt:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-layers-dialog.png\" alt=\"Dialogfenster Ebenen der Zeichenfl\u00e4chen exportieren\" width=\"755\" height=\"425\">\n<ol class=\"image-bullet\">\n<li>W\u00e4hlen Sie eine einzelne Zeichenfl\u00e4che zum Exportieren aus<\/li>\n<li>Markieren Sie &#8222;Alle exportieren&#8220;, um alle Zeichenfl\u00e4chen zu exportieren.<\/li>\n<li>W\u00e4hlen Sie ein Prototyp-Ger\u00e4t, auf das Sie Ihre Zeichenfl\u00e4chen exportieren m\u00f6chten. Hoch- und Querformat-Optionen sind auch f\u00fcr Mobil- und Tablet-Ger\u00e4te verf\u00fcgbar. <\/li>\n<\/ol>\n<\/li>\n<li>Wenn Sie Ihre Auswahl getroffen haben, klicken Sie auf &#8222;Exportieren&#8220;, um Ihre Zeichenfl\u00e4che(n) nach Justinmind zu exportieren.<\/li>\n<li>W\u00e4hlen Sie einen Speicherort in Ihren Ordnern, um Ihre exportierte(n) Zeichenfl\u00e4che(n) zu speichern. Der Dateityp wird &#8222;.vp&#8220; sein &#8211; eine Justinmind-Datei. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13110\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/export-artboards-folder.png\" alt=\"Ordner f\u00fcr Zeichenfl\u00e4chen exportieren\" width=\"755\" height=\"425\"><\/li>\n<li>Das folgende Dialogfeld wird angezeigt, um Sie dar\u00fcber zu informieren, dass Ihre Zeichenfl\u00e4che(n) exportiert werden:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13111\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/artboards-being-exported-dialog.png\" alt=\"Dialog zum Exportieren von Zeichenfl\u00e4chen\" width=\"755\" height=\"425\"><\/li>\n<li>Wenn Ihre Zeichenfl\u00e4che(n) erfolgreich exportiert wurde(n), wird das folgende Dialogfeld angezeigt:<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13112\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/03\/artboards-exported-successfully.png\" alt=\"Zeichenfl\u00e4chen erfolgreich exportiert\" width=\"755\" height=\"425\"><\/li>\n<li>Suchen Sie Ihre .vp-Datei und doppelklicken Sie sie, um sie in Justinmind zu \u00f6ffnen.<\/li>\n<\/ol>\n<h2><a id=\"adding-interaction-sketch\"><\/a>Hinzuf\u00fcgen von Interaktionen zu Sketch Designs<\/h2>\n<p>Justinmind ist besonders leistungsf\u00e4hig, um Designs interaktiv zu gestalten und Web- und Mobile-Apps so realistisch zu simulieren, wie der Benutzer es braucht. Sobald Sie ein Design aus Sketch in Justinmind \u00fcbernommen haben, k\u00f6nnen Sie sofort eine beliebige Ebene ausw\u00e4hlen und <a href=\"https:\/\/www.justinmind.com\/de\/support\/events-and-interactions\">ihr Ereignisse hinzuf\u00fcgen.<\/a> <\/p>\n<p>Wenn Sie responsive Elemente simulieren m\u00f6chten, d.h. wenn eines der Vektorelemente z.B. die Breite des gesamten Bildschirms einnehmen soll, m\u00fcssen Sie zun\u00e4chst mit der rechten Maustaste auf das Vektorelement klicken und &#8222;Pfad &#8211; In Bild umwandeln&#8220; w\u00e4hlen. In der Palette Eigenschaften k\u00f6nnen Sie dann die Gr\u00f6\u00dfeneigenschaften in Prozent einstellen. <\/p>\n<h2><a id=\"interactive-forms-sketch\"><\/a>Sketch Eingabeformulare interaktiv gestalten<\/h2>\n<p>Eine einfache M\u00f6glichkeit, die Integration zwischen Justinmind und Sketch zu nutzen, besteht darin, bereits designte Eingabeformulare zu Testzwecken interaktiv zu machen. Holen Sie Ihr designtes Eingabeformular aus Sketch, indem Sie den &#8218;SVG-Code kopieren&#8216; oder das Justinmind-Plugin f\u00fcr Sketch verwenden. F\u00fcgen Sie ihn dann in Justinmind ein und klicken Sie mit der rechten Maustaste auf das Design eines Eingabefeldes. W\u00e4hlen Sie die Option &#8218;Pfad &#8211; Umwandeln in &#8211; Eingabe-Textfeld&#8216;. Starten Sie die Simulation und sehen Sie, wie das Design nun als echtes Eingabefeld funktioniert, wobei das Aussehen und die Bedienung erhalten bleiben. Sie k\u00f6nnen jedes Vektorelement in jedes der vordefinierten Eingabefelder in Justinmind umwandeln.     <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Justinmind ist in den Vektorgrafik-Editor und das Design-Tool Sketch integriert. Es gibt zwei M\u00f6glichkeiten, Designs aus Sketch in Justinmind zu \u00fcbernehmen. Zum einen k\u00f6nnen Sie die&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8546,8552],"tags":[],"class_list":["post-129056","post","type-post","status-publish","format-standard","hentry","category-benutzerhandbuch","category-integrationen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129056"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129056"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129056\/revisions"}],"predecessor-version":[{"id":129188,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129056\/revisions\/129188"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}