In diesem Video geht es um das Tool Figma,
eine der drei Optionen zur Bearbeitung der Übungsaufgaben zum Thema
3. Zum einen sollen sie informiert entscheiden können,
welches Werkzeug sie einsetzen und zum anderen sollen sie die wichtigsten Elemente kennenlernen,
damit sie dann in dem Werkzeug ihrer Wahl möglichst schnell beginnen können.
Wir sehen hier eine der Standardansichten von Figma,
das sind die Drafts, die aktuellen Entwürfe,
die ich angelegt habe oder die vorgegeben waren,
schauen Sie sich gerne zum Beispiel das Prototyping,
die Basics oder das Wireframing in Figma an,
um einen entsprechenden Eindruck zu gewinnen.
Wir legen jetzt
einen neuen Draft an
In diesem grundlegenden Fenster ist erst mal noch wenig zu sehen.
Wir werden hier oben links die Werkzeuge kennenlernen, um neue Elemente hinzuzufügen.
Auf der rechten Seite können Eigenschaften bearbeitet werden. Wir können hier
zwischen einer Designansicht und einer Prototypansicht wählen und hier oben rechts
können wir unseren Prototypen ausführen, beziehungsweise das Ergebnis freigeben.
Als erstes verwenden wir einen sogenannten Frame. Wir könnten hier
rechts eine Standardgröße auswählen, zum Beispiel das Surface Book oder
das MacBook Pro oder wir erstellen ein Frame von beliebiger Größe.
Den können wir natürlich später anpassen, das heißt,
Hier könnte zum Beispiel eine Full-HD-Auflösung interessant sein.
Die Frames werden später unserer Ansichten im Programm. In diesem Frame
kann ich dann beliebige Elemente hinzufügen, zum Beispiel ein Rechteck.
Ein Dreieck oder einen Kreis. Dabei habe ich die
üblichen Funktionen und Tastenkombinationen aus Designprogrammen, zum Beispiel,
wird bei gedrückter Schifftaste sichergestellt, dass beide Dimensionen gleich groß sind.
Ich kann mit dem Mausrad durch die Ansicht scrollen,
bei gedrückter Schifftaste, scrolle ich horizontal und bei gedrückter Steuerungstaste,
summe ich raus, beziehungsweise rein.
Wenn ich die Maustaste gedrückt halte, verschiebe ich Elemente,
wenn ich hinzu noch die Leertaste gedrückt halte, verschiebe ich stattdessen die Ansicht.
Das Gleiche funktioniert auch bei gedrücktem Mausrad. Diese Elemente kann ich so gestalten,
wie ich möchte, auf der rechten Seite sind die Eigenschaften angegeben,
zum Beispiel die Breite und die Höhe, die Position,
die Drehung oder eben auch die Farbe.
Das heißt, wir können unsere Elemente einfach mal bunt einfärben.
Einmal verwendete Farben tauchen in den Document Colors hier unten auf,
sodass ich sie nicht jedes Mal manuell wieder neu auswählen muss.
Dann könnten wir noch Textelemente hinzufügen. Das ist in den meisten Softwaresystemen
irgendwie nötig. Und gar ich kann mein Rechteck benennen,
indem ich es einfach richtig nenne. Ich habe Möglichkeiten,
die Schriftgröße zum Beispiel anzupassen,
die Schriftart anzupassen und übliche Steuerung aus Optionen,
wie rechtsbündig, linksbündig,
zentriert,
oben mittig oder unten
im Text fällt
Ich kann natürlich auf das Textfeld anpassen, sodass hier,
das ist echt ein Rechteck, hineinpasst und ich gleich meinen Tipp wiedererkenne.
Ich kann Elemente ganz normal mit Steuerung und C,
Steuerung und V kopieren und einfügen,
sodass ich nicht jedes Mal die Arbeit neu beginnen muss.
Und jetzt nenne ich vielleicht das mittlere Element einmal Dreieck.
Und das Rechtelement. Ist ein Kreis.
Bauen wir uns noch eine kleine Aufgabenstellung dazu
Welches der Elemente? Ist der richtig benannt? Denn wir wollen ja
eine kleine Interaktion hinzufügen. Dazu brauche ich einen zweiten Frame.
Ich könnte jetzt einen neuen Frame erzeugen über das Werkzeug.
Ich kann auch meinen ersten Frame kopieren. In diesem Fall
brauche ich gar nicht, was da drin steht.
Das heißt, das kann ich gleich wieder löschen.
Ich werde später noch einen dritten Frame brauchen.
Den fügen wir auch mal hinzu. Auch die Frames
kann ich mir beliebig anordnen
Ich möchte jetzt eine Ansicht dafür haben,
dass das Ganze richtig beantwortet wurde.
Und eine Ansicht für den Fall, dass jemand falsch geantwortet hat.
Diese beiden Ansichten möchte ich auf verschiedene Weisen umsetzen,
um die beiden Varianten zu demonstrieren.
Die Option, dass etwas richtig ist,
ist ein Wechsel von diesem Feld dorthin
Das setzen wir schon mal um. Dazu wechsel ich die Prototyp-Ansicht und kann sagen,
wenn jemand hier auf das richtig benannte Recht erklickt,
wähle ich den kleinen Punkt aus und ziehe einfach zu dem Feld,
zu dem ich wechseln möchte.
Das Gleiche, wenn auf das Textelement geklickt wird.
Wenn hier gegen jemand falsch klickt,
dann soll das Ganze zu dem falsch frame wechseln.
Ich kann auch mehrere Elemente markieren,
bei gedrückter Schifftaste und die zum Beispiel zu einer Gruppe hinzufügen.
Group-Selection. Dann kann ich eine gemeinsame Aktion auswählen,
was die Anzahl der Pfeile in dieser Ansicht
doch deutlich reduziert
Während wir jetzt bei dem Rechteck einen Wechsel vollzogen haben,
zu sehen an der Ansicht Nevigate 2,
möchte ich jetzt beim Dreieck, statt Nevigate 2, ein Overlay öffnen.
Das heißt, dieser Frame wird nicht stattdessen eingeblendet,
sondern wird über den ersten Frame eingeblendet.
Bei der Wahl des Overlays kann ich noch wählen,
ob das Overlay in der Mitte angezeigt wird,
oben unten, links, rechts.
Wir könnten jetzt am Wort im Center wählen,
das ist natürlich nur relevant,
wenn die Frames unterschiedliche Größen haben,
dann simulieren wir das hier doch einmal
Sodass dann das Ganze von unten eingeblendet werden soll.
Während bei dem rechten Element ebenfalls in Overlay geöffnet wird.
Und das auch vom Bottoms Bottoms Center geöffnet wird.
Dann müssen wir dann nur noch wieder rauskommen. Wir können hier
den ganzen Frame auswählen und können entweder zu dem Fenster zurückspringen.
Oder wir wählen einfach hier das kleine Kreuz,
Close Overlay, sodass das Ganze wieder geschlossen wird.
Dann probieren wir das nochmal aus. Hier ist ein Starting Frame gewählt,
das ist Frame 1, das ist genau das,
was ich möchte. Frame 2 würde noch zur Auswahl stehen,
während Frame 3 ein Overlay ist und deshalb nicht als
Starting Frame geeignet ist
Als Device wähle ich Presentation,
sodass die ganze Ansicht auch auf meinen Bildschirm passt.
Dann kann ich dem Ganzen hier oben noch einen Namen geben.
Und ich bin so gut wie fertig. Oben rechts wird das Ganze
einmal ausgeführt. Es öffnet sich in einem neuen Tab.
Und ich sehe meine Elemente. Wenn ich also hier draufklicke,
sollte ein Overlay eingeblendet werden, das tut es.
Wenn ich irgendwo auf das Overlay klicke, geht es wieder weg.
Hier passiert das Gleiche. Und hier wechsle ich den Frame
. Super
Dann bin ich fertig, ich kann das Ganze teilen,
über Share will ich hier kennen, view,
anyone with the link, kann hier einen Link kopieren,
den an beliebiger Stelle einfügen und bin fertig.
Wir haben dieses Tool ausgewählt, weil es eine kostenlose Education-Lizenz bietet,
weil es die Kollaboration im Team gut unterstützt und auch ansonsten
alle Funktionen bietet, die wir benötigen.
Falls Sie dieses Tool wählen möchten, viel Erfolg bei
der Bearbeitung der Aufgabe