Um ein beliebiges Element, eine Gruppe von Elementen oder Zeichenfl\u00e4chen aus Adobe XD in Justinmind zu \u00fcbernehmen, markieren Sie sie einfach in Adobe XD und w\u00e4hlen Sie die Rechtsklick-Option „SVG-Code kopieren“. \u00d6ffnen Sie dann Justinmind und w\u00e4hlen Sie die Hauptmen\u00fcoption ‚Bearbeiten – Einf\u00fcgen‘, 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 ver\u00e4ndern. <\/p>\n
Wenn Sie in Justinmind ein Vektorelement mit dem „Stift-Werkzeug“ erstellt haben, k\u00f6nnen Sie es zur weiteren Bearbeitung in Adobe XD \u00fcbernehmen. Klicken Sie mit der rechten Maustaste auf das Vektorelement in Justinmind und w\u00e4hlen Sie „SVG-Code kopieren“, \u00f6ffnen Sie dann Adobe XD und f\u00fcgen Sie es ein. Die Ebenenstruktur des in Justinmind erstellten Vektorelements wird in Sketch beibehalten. <\/p>\n
Sie k\u00f6nnen mit Kopieren und Einf\u00fcgen so oft vor und zur\u00fcck gehen, wie Sie m\u00f6chten.<\/p>\n
<\/a>Einrichten Ihres Justinmind Plugins f\u00fcr Adobe XD<\/h2>\nEine weitere M\u00f6glichkeit, Adobe XD Designs in Justinmind zu integrieren, ist das Justinmind for XD Plugin:<\/p>\n
\n- \u00d6ffnen Sie Adobe XD, suchen Sie im Hauptmen\u00fc nach Plugins und w\u00e4hlen Sie dann „Plugins durchsuchen“.<\/li>\n
- Gehen Sie in dem erscheinenden Fenster auf ‚Alle Plugins‘ -> ‚Alle Plugins suchen‘, suchen Sie nach ‚Justinmind‘ und installieren Sie das Plugin Justinmind f\u00fcr XD.
![\"XD-Plugin\"](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/XdPlugin.png\")
<\/li>\n<\/ol>\nSobald das Plugin installiert ist, \u00f6ffnen Sie die Datei, die Sie exportieren m\u00f6chten. Navigieren Sie dann zum Men\u00fc Plugins und w\u00e4hlen Sie „XD zu Justinmind“. <\/p>\n
Es wird ein Dialogfeld angezeigt, in dem Sie den Namen und das Ziel des Exports angeben k\u00f6nnen. Danach erzeugt das Plugin eine Justinmind-kompatible .vp-Datei.![\"Adobe](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/ExportDialog.png\")
\nDie generierte .vp Datei wandelt alle Ebenen aus Ihrer Adobe XD Datei in einzelne Elemente und Komponenten in Justinmind um. Der gesamte Text Ihres Designs wird als bearbeitbarer Text beibehalten, und Rechtecke und Ellipsen bleiben als Formen in Ihrem Justinmind-Prototyp erhalten. Alle anderen Elemente werden in .svg-Bilder umgewandelt.<\/p>\n
<\/a>Wie Sie mit Ihrer Adobe XD Datei in Justinmind arbeiten<\/h2>\n\u00d6ffnen Sie die .vp-Datei in Justinmind und beginnen Sie mit der Arbeit.<\/p>\n
Sie sehen alle Ebenen aus Ihrer Datei in der Ebenenpalette<\/span> und auf der Leinwand. Klicken Sie auf ein Element und sehen Sie sich in der Eigenschaften-Palette die verschiedenen M\u00f6glichkeiten an, mit denen Sie Ihr Design weiter anpassen k\u00f6nnen.
\n![\"XD-Datei](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/XDinJustinmind.png\")
\nSie k\u00f6nnen nun damit beginnen, Ihrem Prototyp Funktionen hinzuzuf\u00fcgen, z.B. Links zu anderen Bildschirmen. Klicken Sie hier<\/a>, um mehr dar\u00fcber zu erfahren, wie Sie mit Ihrem neuen Justinmind-Prototyp beginnen k\u00f6nnen. <\/p>\nHinweis:<\/strong> Das Plugin erzeugt einen Prototyp f\u00fcr ein Web-Ger\u00e4t. Wenn Sie mit einem anderen Ger\u00e4tetyp arbeiten m\u00f6chten, m\u00fcssen Sie diesen manuell in Justinmind \u00e4ndern. Sie k\u00f6nnen den Ger\u00e4tetyp \u00e4ndern, indem Sie den Basisbildschirm in der Ebenen-Palette<\/span> ausw\u00e4hlen und dann in der Eigenschaften-Palette unter Allgemein ein anderes Ger\u00e4t aus dem Dropdown-Men\u00fc w\u00e4hlen. <\/div>\n<\/a>Hinzuf\u00fcgen von Interaktionen zu Adobe XD Designs<\/h2>\nJustinmind ist besonders leistungsf\u00e4hig, um Designs interaktiv zu machen und Web- und Mobilanwendungen so realistisch zu simulieren, wie der Benutzer es braucht. Sobald Sie ein Design aus Adobe XD in Justinmind \u00fcbernommen haben, k\u00f6nnen Sie sofort eine beliebige Ebene ausw\u00e4hlen und ihr Ereignisse hinzuf\u00fcgen.<\/a> <\/p>\nWenn 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 „Pfad – In Bild umwandeln“ w\u00e4hlen. Dann k\u00f6nnen Sie in der Palette Eigenschaften die Gr\u00f6\u00dfeneigenschaften in Prozent festlegen. <\/p>\n
<\/a>Adobe XD Eingabeformulare interaktiv machen<\/h2>\nEine einfache M\u00f6glichkeit, die Integration zwischen Justinmind und Adobe XD zu nutzen, besteht darin, bereits designte Eingabeformulare zu Testzwecken interaktiv zu machen. Holen Sie Ihr designtes Eingabeformular aus Adobe XD, indem Sie den ‚SVG-Code kopieren‘ 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 ‚Pfad – Umwandeln in – Eingabe-Textfeld‘. Starten Sie die Simulation und sehen Sie, wie das Design nun als echtes Eingabefeld funktioniert, wobei das Aussehen und die Handhabung erhalten bleiben. Sie k\u00f6nnen jedes Vektorelement in jedes der vordefinierten Eingabefelder in Justinmind umwandeln. <\/p>\n","protected":false},"excerpt":{"rendered":"
Es gibt zwei M\u00f6glichkeiten, Ihre Arbeit aus Adobe XD in Justinmind zu importieren. SVG-Code kopieren und einf\u00fcgen Um ein beliebiges Element, eine Gruppe von Elementen oder…<\/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-129113","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\/129113"}],"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=129113"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129113\/revisions"}],"predecessor-version":[{"id":129172,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129113\/revisions\/129172"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/li>\n<\/ol>\nSobald das Plugin installiert ist, \u00f6ffnen Sie die Datei, die Sie exportieren m\u00f6chten. Navigieren Sie dann zum Men\u00fc Plugins und w\u00e4hlen Sie „XD zu Justinmind“. <\/p>\n
Es wird ein Dialogfeld angezeigt, in dem Sie den Namen und das Ziel des Exports angeben k\u00f6nnen. Danach erzeugt das Plugin eine Justinmind-kompatible .vp-Datei.
\nDie generierte .vp Datei wandelt alle Ebenen aus Ihrer Adobe XD Datei in einzelne Elemente und Komponenten in Justinmind um. Der gesamte Text Ihres Designs wird als bearbeitbarer Text beibehalten, und Rechtecke und Ellipsen bleiben als Formen in Ihrem Justinmind-Prototyp erhalten. Alle anderen Elemente werden in .svg-Bilder umgewandelt.<\/p>\n
<\/a>Wie Sie mit Ihrer Adobe XD Datei in Justinmind arbeiten<\/h2>\n\u00d6ffnen Sie die .vp-Datei in Justinmind und beginnen Sie mit der Arbeit.<\/p>\n
Sie sehen alle Ebenen aus Ihrer Datei in der Ebenenpalette<\/span> und auf der Leinwand. Klicken Sie auf ein Element und sehen Sie sich in der Eigenschaften-Palette die verschiedenen M\u00f6glichkeiten an, mit denen Sie Ihr Design weiter anpassen k\u00f6nnen.
\n
\nSie k\u00f6nnen nun damit beginnen, Ihrem Prototyp Funktionen hinzuzuf\u00fcgen, z.B. Links zu anderen Bildschirmen. Klicken Sie hier<\/a>, um mehr dar\u00fcber zu erfahren, wie Sie mit Ihrem neuen Justinmind-Prototyp beginnen k\u00f6nnen. <\/p>\nHinweis:<\/strong> Das Plugin erzeugt einen Prototyp f\u00fcr ein Web-Ger\u00e4t. Wenn Sie mit einem anderen Ger\u00e4tetyp arbeiten m\u00f6chten, m\u00fcssen Sie diesen manuell in Justinmind \u00e4ndern. Sie k\u00f6nnen den Ger\u00e4tetyp \u00e4ndern, indem Sie den Basisbildschirm in der Ebenen-Palette<\/span> ausw\u00e4hlen und dann in der Eigenschaften-Palette unter Allgemein ein anderes Ger\u00e4t aus dem Dropdown-Men\u00fc w\u00e4hlen. <\/div>\n<\/a>Hinzuf\u00fcgen von Interaktionen zu Adobe XD Designs<\/h2>\nJustinmind ist besonders leistungsf\u00e4hig, um Designs interaktiv zu machen und Web- und Mobilanwendungen so realistisch zu simulieren, wie der Benutzer es braucht. Sobald Sie ein Design aus Adobe XD in Justinmind \u00fcbernommen haben, k\u00f6nnen Sie sofort eine beliebige Ebene ausw\u00e4hlen und ihr Ereignisse hinzuf\u00fcgen.<\/a> <\/p>\nWenn 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 „Pfad – In Bild umwandeln“ w\u00e4hlen. Dann k\u00f6nnen Sie in der Palette Eigenschaften die Gr\u00f6\u00dfeneigenschaften in Prozent festlegen. <\/p>\n
<\/a>Adobe XD Eingabeformulare interaktiv machen<\/h2>\nEine einfache M\u00f6glichkeit, die Integration zwischen Justinmind und Adobe XD zu nutzen, besteht darin, bereits designte Eingabeformulare zu Testzwecken interaktiv zu machen. Holen Sie Ihr designtes Eingabeformular aus Adobe XD, indem Sie den ‚SVG-Code kopieren‘ 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 ‚Pfad – Umwandeln in – Eingabe-Textfeld‘. Starten Sie die Simulation und sehen Sie, wie das Design nun als echtes Eingabefeld funktioniert, wobei das Aussehen und die Handhabung erhalten bleiben. Sie k\u00f6nnen jedes Vektorelement in jedes der vordefinierten Eingabefelder in Justinmind umwandeln. <\/p>\n","protected":false},"excerpt":{"rendered":"
Es gibt zwei M\u00f6glichkeiten, Ihre Arbeit aus Adobe XD in Justinmind zu importieren. SVG-Code kopieren und einf\u00fcgen Um ein beliebiges Element, eine Gruppe von Elementen oder…<\/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-129113","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\/129113"}],"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=129113"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129113\/revisions"}],"predecessor-version":[{"id":129172,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129113\/revisions\/129172"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\nSie k\u00f6nnen nun damit beginnen, Ihrem Prototyp Funktionen hinzuzuf\u00fcgen, z.B. Links zu anderen Bildschirmen. Klicken Sie hier<\/a>, um mehr dar\u00fcber zu erfahren, wie Sie mit Ihrem neuen Justinmind-Prototyp beginnen k\u00f6nnen. <\/p>\n
<\/a>Hinzuf\u00fcgen von Interaktionen zu Adobe XD Designs<\/h2>\nJustinmind ist besonders leistungsf\u00e4hig, um Designs interaktiv zu machen und Web- und Mobilanwendungen so realistisch zu simulieren, wie der Benutzer es braucht. Sobald Sie ein Design aus Adobe XD in Justinmind \u00fcbernommen haben, k\u00f6nnen Sie sofort eine beliebige Ebene ausw\u00e4hlen und ihr Ereignisse hinzuf\u00fcgen.<\/a> <\/p>\nWenn 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 „Pfad – In Bild umwandeln“ w\u00e4hlen. Dann k\u00f6nnen Sie in der Palette Eigenschaften die Gr\u00f6\u00dfeneigenschaften in Prozent festlegen. <\/p>\n
<\/a>Adobe XD Eingabeformulare interaktiv machen<\/h2>\nEine einfache M\u00f6glichkeit, die Integration zwischen Justinmind und Adobe XD zu nutzen, besteht darin, bereits designte Eingabeformulare zu Testzwecken interaktiv zu machen. Holen Sie Ihr designtes Eingabeformular aus Adobe XD, indem Sie den ‚SVG-Code kopieren‘ 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 ‚Pfad – Umwandeln in – Eingabe-Textfeld‘. Starten Sie die Simulation und sehen Sie, wie das Design nun als echtes Eingabefeld funktioniert, wobei das Aussehen und die Handhabung erhalten bleiben. Sie k\u00f6nnen jedes Vektorelement in jedes der vordefinierten Eingabefelder in Justinmind umwandeln. <\/p>\n","protected":false},"excerpt":{"rendered":"
Es gibt zwei M\u00f6glichkeiten, Ihre Arbeit aus Adobe XD in Justinmind zu importieren. SVG-Code kopieren und einf\u00fcgen Um ein beliebiges Element, eine Gruppe von Elementen oder…<\/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-129113","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\/129113"}],"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=129113"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129113\/revisions"}],"predecessor-version":[{"id":129172,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129113\/revisions\/129172"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
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 „Pfad – In Bild umwandeln“ w\u00e4hlen. Dann k\u00f6nnen Sie in der Palette Eigenschaften die Gr\u00f6\u00dfeneigenschaften in Prozent festlegen. <\/p>\n