{"id":1635,"date":"2016-12-20T09:30:10","date_gmt":"2016-12-20T08:30:10","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1635"},"modified":"2016-12-20T11:17:33","modified_gmt":"2016-12-20T10:17:33","slug":"figma","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/figma\/","title":{"rendered":"Designen und Editieren im Browser: Das kann Figma"},"content":{"rendered":"

Als Webdesigner und Web Worker haben Sie wahrscheinlich schon von Sketch geh\u00f6rt. Figma ist im Prinzip wie Sketch. Mit einem gro\u00dfen Unterschied: Figma l\u00e4uft zu 100% in Ihrem Browser und l\u00e4sst Sie mit Ihren Kollegen in Echtzeit zusammenarbeiten.<\/p>\n

Ziemlich genial, oder?<\/p>\n

<\/p>\n

Unsere Review<\/b><\/h2>\n

Wenn Sie regelm\u00e4\u00dfig unseren Blog lesen, dann wissen Sie vielleicht, dass wir es lieben, Tools, Software, Frameworks und andere Produkte vorzustellen. Dieses Mal sehen wir uns Figma an.<\/p>\n

Figma ist ein Tool zur Kollaboration an Designs. Es funktioniert im Wesentlichen wie andere bekannte L\u00f6sungen wie Sketch oder Adobe XD. Warum schreibe ich also dieses Review? Naja, weil Figma zwei gro\u00dfe Unterschiede hat:<\/p>\n

    \n
  1. \u00a0\u00a0\u00a0Es l\u00e4uft zu 100% in Ihrem Browser (keine Installation n\u00f6tig)<\/li>\n
  2. \u00a0\u00a0\u00a0Es bietet Kollaboration mit anderen Personen in Echtzeit (so wie Google Docs)<\/li>\n<\/ol>\n

    Das ist ziemlich stark. Und am wichtigsten, es ist stabil. Echtzeitkollaboration l\u00e4uft wirklich in Echtzeit ab.<\/p>\n

    Die Geschichte von Figma<\/b><\/h2>\n

    Figma wurde 2013 von Dylan Field mitgegr\u00fcndet und erhielt 2015 eine Series-A-Finanzierung im Wert von $14 Millionen. In einem Artikel in Techcrunch<\/a> erkl\u00e4rt Dylan, dass Figma \u201ef\u00fcr Interface-Design tun will, was Google Docs f\u00fcr Textbearbeitung tat.\u201c<\/p>\n

    Und damit k\u00f6nnte er auf der richtigen Spur sein. Figma ist heute als browserbasiertes Designtool verf\u00fcgbar.<\/p>\n

    Falls Ihr gesamtes Designteam Sketch oder Adobe XD nutzt, dann fragen Sie sich vielleicht, warum Sie Figma ausprobieren sollten? Hier sind die Gr\u00fcnde.<\/p>\n

    Bessere Kollaboration zwischen Designern. Und ihrem Team.<\/b><\/h2>\n

    Da Design heutzutage immer mehr zu einem gemeinschaftlichen Prozess wird, muss auch immer mehr Aufmerksamkeit f\u00fcr die Frage aufgebracht werden, wie Designer mit anderen Designern zusammenarbeiten und wie ihre Arbeit mit anderen Teammitgliedern, Kollegen und Klienten geteilt wird.<\/p>\n

    Dateien und verschiedene Versionen von Designentw\u00fcrfen \u00fcber Ihre Chat- oder Emailprogramme zu teilen k\u00f6nnte bald vorbei sein. Mit Figma wird all Ihre Designarbeit an einem Ort produziert, geteilt und kommuniziert. In Figma.<\/p>\n

    Same Same. Aber besser.<\/b><\/h2>\n

    Figma f\u00fchlt sich also ziemlich unspektakul\u00e4r an. Die Funktionen, Short-Cuts und die Usererfahrung f\u00fchlen sich alle recht \u00e4hnlich an wie die von Sketch.<\/p>\n

    Insgesamt wirken die UI und Designtools so, als w\u00e4ren sie von Sketch kopiert. Was macht Figma also anders?<\/p>\n

    Es ist der Aspekt der Zusammenarbeit. Dies funktioniert nicht nur in der Produktionsphase, sondern erlaubt es Ihnen auch, innerhalb Ihrer Figma-Projekte zu kommentieren und zusammenarbeiten. Es ist wie eine Kombination von Sketch und InVision, oder dem Kollaborationstool Ihrer Wahl.<\/p>\n

    Einfaches Onboarding<\/b><\/h2>\n

    Der Einstieg in Figma ist einfach, Sie m\u00fcssen nur einen Gratisaccount bei figma.com anlegen, und Sekunden sp\u00e4ter k\u00f6nnen Sie bereits Ihren ersten Entwurf in Ihrem Browser erstellen. Ziemlich eindrucksvoll.<\/p>\n

    Falls Sie bereits eine gro\u00dfe Menge an .sketch Dateien haben, dann k\u00f6nnen Sie diese ohne Probleme importieren. Eine .sketch Datei von 400+MB importieren: einfach.<\/p>\n

    Webbasierte Version von Sketch<\/b><\/h2>\n

    Wenn Sie Figma das erste Mal starten, dann haben Sie vielleicht den Eindruck, dass Sie eine webbasierte Version von Sketch nutzen. Und das ist absolut richtig.<\/p>\n

    Figma haben anscheinend viele der UI-Stile und Layouts von Sketch kopiert. Und ich nehme mal an, dass das okay ist. Zumindest ist es gut f\u00fcr jemanden, der bereits Sketch genutzt hat und nicht wieder am Anfang anfangen will.<\/p>\n

    Wenn Sie dieselbe Datei mit Sketch und Figma \u00f6ffnen, dann sehen Sie die Gemeinsamkeiten auf den ersten Blick.<\/p>\n

    \"sketch-vs-figma\"<\/p>\n

    Da ich mir die Tatsache, dass Figma im Browser l\u00e4uft, wirklich gef\u00e4llt, bin ich ein bisschen besorgt, dass dies bei gro\u00dfen Projekten ein Problem darstellen k\u00f6nnte. Meine importierte Datei hat bereits \u00fcber 10 Seiten, und mein Laptop ist nicht mehr der j\u00fcngste, was Figma bei dieser Gr\u00f6\u00dfe schon ein bisschen langsamer macht.<\/p>\n

    Sketch auf der anderen Seite scheint selbst bei gro\u00dfen Dateien nicht an Leistung zu verlieren. In diesem Zusammenhang hat eine Webanwendung also leider das Nachsehen. +1 f\u00fcr Sketch.<\/p>\n

    Vektornetzwerke<\/b><\/h2>\n

    Im Vergleich zu anderen Designtools m\u00f6chte ich die Funktion hervorheben, die Figma \u201eVektornetzwerke\u201c nennt. Um es einfach auszudr\u00fccken, es ist ein erweitertes Stift-Tool.<\/p>\n

    \"vector-networks-figma\"<\/p>\n

     <\/p>\n

    Quelle: https:\/\/medium.com\/figma-design\/introducing-vector-networks-3b877d2b864f#.91r0q7ox0<\/a><\/p>\n

    Vektornetzwerke basieren auf Pfaden, die es Designern zum Beispiel erlauben, Kurven, Striche und F\u00fcllungen zu kontrollieren.<\/p>\n

    Falls Sie mehr \u00fcber diese interessante Funktion lernen m\u00f6chten, dann lesen Sie Figmas Blogpost<\/a>.<\/p>\n

    Einschr\u00e4nkungen<\/b><\/h2>\n

    Einschr\u00e4nkungen erlauben es Usern zu spezifizieren, wie ein Objekt reagiert, wenn die Gr\u00f6\u00dfe des Frames ver\u00e4ndert wird. Das funktioniert \u00e4hnlich wie bei Sketch (nicht wirklich eine gro\u00dfe \u00dcberraschung) und erlaubt es Ihnen, Regeln innerhalb des Einschr\u00e4nkungspanels festzulegen.<\/p>\n

    Einschr\u00e4nkungen sind ziemlich eindeutig und sie tun genau das was sie sollen. Die Leute bei Figma haben hier auf jeden Fall einen tollen Job gemacht.<\/p>\n

    \"constraints-figma\"<\/p>\n

    Editieren, Teilen und Kommentieren in Echtzeit<\/b><\/h2>\n

    Was Figma zu etwas wirklich Besonderem macht ist die Echtzeitkomponente. Da es innerhalb Ihres Browsers l\u00e4uft, erlaubt es Ihnen, Dateien in Echtzeit zusammen mit anderen Leuten zu editieren.<\/p>\n

    Editieren in Echtzeit<\/i><\/b><\/h3>\n

    Es ist wie Echtzeit-Kollaboration. Egal ob es um Google Docs, InVisionApp oder eine andere Kollaborationssoftware geht. Mit Kollegen in Echtzeit zusammenzuarbeiten kann Ihnen eine Menge Zeit sparen. Denken Sie nur an fr\u00fcher, als Sie noch Word-Dateien und PDFs per E-Mail an Kollegen schicken mussten. Diese Zeiten sind zum Gl\u00fcck vorbei \ud83d\ude09<\/p>\n

    \"real-time-collaboration-figma\"<\/p>\n

    Ich muss zugeben, dass ich immer noch ein wenig hin- und hergerissen bin, was Figma angeht. Ich finde, dass die Erstellung eines neuen Designs keine Bearbeitung in Echtzeit im selben Moment ben\u00f6tigt, in dem das Design erstellt wird. Trotzdem ist es toll, dass jemand nahtlos weitermachen kann, wenn der Designentwurf fertig ist.<\/p>\n

    Zumindest habe ich es bis jetzt noch nie beobachten k\u00f6nnen, dass zwei Designer gemeinsam an einer Datei arbeiten und zum Beispiel einer die Farben aussucht, und der andere die Schriftart. Aber die Dinge k\u00f6nnten sich auch \u00e4ndern.<\/p>\n

    Teilen & Kommentieren<\/i><\/b><\/h3>\n

    Was ich wirklich an Figma liebe ist die M\u00f6glichkeit, Dateien einfach mit Ihrem Team teilen zu k\u00f6nnen. Sketch liefert Plugins f\u00fcr InVision und andere Designfeedback-Tools, aber diesen Arbeitsfluss in einem Tool zu haben ist ziemlich klasse. Systeme zu wechseln ist dadurch nicht mehr n\u00f6tig.<\/p>\n

    \"sharing-figma-files\"<\/p>\n

    Alle Kommentare werden innerhalb von Figma gespeichert, und ihre Kollegen sind immer auf dem neuesten Stand, was die aktuellsten Versionen angeht.<\/p>\n

    Fazit<\/b><\/h2>\n

    Figma ist ein vielversprechendes Tool zur Kollaboration an Designs. Es gibt eine Menge Hype um Designkollaboration, und mit dem existierenden Arbeitsfluss bleibt abzuwarten, wie und ob die Mehrheit der Designer Figma annehmen werden.<\/p>\n

    Geschwindigkeit und Ladezeiten von Figma h\u00e4ngen stark vom Verhalten der Designer hinsichtlich der Echtzeit-Kollaboration ab. Figma wurde auf dem Konzept erstellt, Dinge zusammen in Echtzeit zu entwerfen. Falls es sich durchsetzt und von der breiten Masse akzeptiert wird (genau wie Google Docs), dann wird Figma eine goldene Zukunft haben.<\/p>\n

    Umsonst bis Ende 2016<\/b><\/p>\n

    Was sollte ich Ihnen noch erz\u00e4hlen? Ich finde, das Figma ein sehr interessantes Tool ist, dass definitiv eine \u00dcberlegung wert ist. Falls Sie mit Sketch, Adobe und Ihren Arbeitsfl\u00fcssen im Bereich Design komplett zufrieden sind, dann ist das nat\u00fcrlich okay. Kein Grund, daran im Moment irgendwas zu \u00e4ndern.<\/p>\n

    Falls Sie nach Alternativen zu den genannten L\u00f6sungen suchen, dann k\u00f6nnten Sie Figma ausprobieren. Stellen Sie jedoch sicher, dass Sie dies vor Ende 2016 tun, da es f\u00fcr jeden gratis ist, der sich vor dem 31.12. anmeldet.<\/p>\n

    Lassen Sie mich in den Kommentaren wissen, was Sie von Figma halten!<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"

    Als Webdesigner und Web Worker haben Sie wahrscheinlich schon von Sketch geh\u00f6rt. Figma ist im Prinzip wie Sketch. Mit einem gro\u00dfen Unterschied: Figma l\u00e4uft zu 100% in Ihrem Browser und l\u00e4sst Sie mit Ihren Kollegen in Echtzeit zusammenarbeiten. Ziemlich genial, oder?<\/p>\n","protected":false},"author":3,"featured_media":1643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[85],"tags":[],"class_list":["post-1635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1635"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1635\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1643"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}