Wie wir alle Prozesse der Entwicklung und Implementierung von Design um ein Werkzeug herum aufgebaut haben.
Hallo! Ich bin Vanya Solovyov , Design Director bei DocDoc (Teil der Sberbank-Gruppe). Heute ist die Tim-Tim-Kolumne, in der ich beschreiben werde, wie wir mit anderen Teams auskommen.
2017 wurden unsere Schnittstellen in Sketch erstellt , Prototypen in Marvel zusammengestellt und die Entwicklung über Zeplin durchgeführt . Alles war Standard für die Zeit bis Figma erschien.
In diesem Artikel geht es nicht um den Vergleich von Werkzeugen. Solche Artikel wurden bereits in Hülle und Fülle geschrieben. Sie erzählt, wie Figma in unserer Firma geholfen hat:
- Design, um öffentlich zu werden, und nicht das Privileg eines Designers;
- den gesamten Prozess der Entwurfsarbeit ohne unnötige Dokumentation organisieren;
- Beseitigen Sie unnötige Tools und Ressourcen, um sie zu unterstützen.
Für den Designer
Der Designer speichert Layouts nicht mehr lokal als Dateien. Es werden keine Screenshots von Schnittstellen mit dem Manager ausgetauscht und die erforderlichen Layouts werden nicht an andere Designer gesendet. Das Layout hat einen Link und steht allen Teilnehmern des Prozesses zur Verfügung.
Erstellte ein Modell → stellte einen interaktiven Prototyp zusammen → übergab ihn der Entwicklung - und das alles über einen Link.
Der Prozess der Erstellung des Designs ging nicht mehr „über die sieben Siegel hinaus“, sondern wurde öffentlich. Ein häufiger Fall in unserer Arbeit: Der Designer erstellt eine Benutzeroberfläche, ein anderer Teilnehmer der Aufgabe gibt das Layout ein und hinterlässt seinen Rat in Form eines Kommentars.
In Figma ist es praktisch, nicht nur Ihre Layouts zu pflegen, ein gemeinsames Designsystem zu verwenden, sondern auch mit Entwicklern, Testern und Managern zu interagieren. Wenn ein Produktteam eine Funktion sieht, ist es sehr wichtig, keine unnötigen Versionen und Layoutzustände zu erstellen, um nicht das gesamte Team zu verlangsamen. Andrey Goranov, Designer.
Für Manager
Wir haben sieben Produktmanager, von denen jeder in seinem Bereich führend ist. Für ihre Bequemlichkeit haben wir die Akten so organisiert, dass jeder sein eigenes Projekt in Figma hat : einen Termin bei einem Arzt, Diagnostik, Telemedizin usw. Ein Link reicht ihnen, damit alle Entwicklungen zu ihren Aufgaben zur Hand sind.
Beispiel für ein Telemedizinprojekt
Sie bringen Verbesserungen in Form von Kommentaren in den erforderlichen Teil des Layouts. Wir haben gemeinsam beschlossen, keine großen Änderungen zu akzeptieren: weder in den Protokollen noch in Jira oder in den Boten. Im Kommentar wird der notwendige Designer erwähnt und eine Benachrichtigung per Post an ihn gesendet.
Alles wird online gespeichert. Schütteln Sie nicht, dass Sie von einem anderen Computer aus keinen Zugriff auf das Layout erhalten. Ich weiß mit Sicherheit, dass Verbesserungen nur in Form eines Kommentars im Layout vorgenommen werden können und vorgenommen werden. Das ist sehr cool. Darüber hinaus können Sie im Kommentarverlauf Ereignisse wiederherstellen. Grisha Garshin, Managerin
Für Entwickler und Tester
Zuvor hatten sie und Designer, als wir über Zeplin Layouts an Entwickler weitergaben , eine andere Vorstellung von Layouts. Designer sahen ein vollständiges Bild der Übergänge in Sketch und Entwickler nur einen bestimmten Bildschirm in Zeplin . Die Jungs verstanden nicht immer, welchem Bildschirm sie folgen sollten, und verbrachten Zeit damit, Fragen zu stellen.
Entwickler haben nur ein bestimmtes Layout in Zeplin gesehen
In Figma sehen Entwickler genau das gleiche Bild wie die Designer. Aus Gründen der Einheit halten wir uns an eine solche Organisation von Layouts: horizontale Übergänge zwischen Bildschirmen, vertikal - innerhalb von Bildschirmen. Dies half den Jungs, sich in den Modellen „zu Hause“ zu fühlen.
Horizontale Übergänge zwischen Bildschirmen, vertikal - innerhalb von Bildschirmen
Es ist praktisch, dass sich alle Layouts an einem Ort befinden und jeder Zugriff hat. Es ist bequem, eine Überprüfung durchzuführen - es gibt Kommentare. Layouts sind immer relevant und in der gleichen Form für alle Teilnehmer. Es ist praktisch, separate Layouts für iOS und Android zu verwenden . Eine weitere coole Sache ist, dass Sie einen Link zu einem bestimmten Bildschirm erstellen und in die Dokumentation einfügen können. Irina Mukhina, Testerin.
Wir verwenden dieselben Variablennamen in Farben und Stilen. Dies hilft, keine unnötigen Entitäten im Layout der Benutzeroberfläche zu erzeugen. Entwickler können jedes Element im Layout unabhängig entladen, ohne Zeit damit zu verschwenden, den Designer dazu aufzufordern. Sie können beispielsweise den SVG- Code für das Symbol abrufen oder im gewünschten Format exportieren.
Wenn Sie sich an Online-Dienste wie Figma gewöhnen , wirken die vorherigen Tools primitiv und sehr weit entfernt. Kein Datei-Hosting, Lizenzprobleme, stattdessen Softwareinstallation - nur ein Link zur Aufgabenbeschreibung in Jira . Um die CSS- Stile eines Elements abzurufen, sind zwei Klicks ausreichend. Peter Dorozhkin, Entwickler.
Für einen Vermarkter
Wir erledigen auch Web-Marketing-Aufgaben in Figma . Sie haben ein eigenes Projekt, in dem alle Layouts gespeichert sind. So können Marketingdesigner leichter an unserer Corporate Identity festhalten - alle Elemente sind in Figma enthalten .
Finden Sie die Aktie, die Sie im Herbst 2018 gemacht haben? Pf, einfach!
Es funktioniert gut und umgekehrt: Der Marketingdesigner zeichnete Illustrationen und übertrug sie an Figma . Der Produktdesigner brachte sie zu seiner Benutzeroberfläche und passte bei Bedarf Form und Farbe ein wenig an - denn alles ist vektoriell.
Wir arbeiten derzeit an einem Illustrationsdesigner in Figma.
Dem Designer kann leicht erklärt werden, wo und welche visuellen Elemente geändert / entfernt / hinzugefügt werden müssen. Anstelle von tausend Wörtern können Sie einmal zeigen, wo und was zu tun ist. Designer können jederzeit auf diese Kommentare zurückgreifen. Katya Fedyunina, Vermarkterin
Und wenn sich die Marketingaufgabe aber direkt auf das Produkt bezieht, geht die Teamarbeit von Designern aus zwei Abteilungen auf eine neue Ebene. Der eine entwickelt ein visuelles Konzept, der andere versucht eine Benutzeroberfläche - alles in einem Layout und auf einmal!
Hauptgedanke
Design ist das Ergebnis der Arbeit des Teams, nicht nur einer Person. Bemühen Sie sich, dass jeder Teilnehmer bequem mit ihm interagieren kann. Entfernen Sie sich von lokalen Tools und suchen Sie nach Tools, die Sie und Ihre Prozesse verbinden.