3D – Perspektive in Figma erstellen | Tutorial
In dem heutigen Beitrag will ich dir erklären, wie du in Figma einen schönen 3D – Perspektive Effekt erzeugst. Ich zeige dir, wie du zum Beispiel einen Screenshot eines Progamms so erstellst, dass es so wirkt, als würde die Aufnahme im Raum schweben. Hierfür legen wir das Bild räumlich an, versehen diese mit einem Schatten und erstellen einen radialen Verlauf im Hintergrund.
Plugin „Mockup“
Da Figma aktuell (Stand 16.07.2022) keine Möglichkeit bietet Elemente räumlich oder perspektivisch zu verzerren, müssen wir auf ein Plugin zurückgreifen. Dieses Plugin heißt Mockup. Ihr geht also in den Community-Bereich von Figma und gebt in der Suche „Mockup“ ein und klickt anschließend den Filter Plugins an. Nun sollte an einer der ersten Stellen das Plugin erscheinen. Dieses installiert ihr und könnt es jetzt wie gewohnt nutzen.
Perspektive vorbereiten
Um den Screenshot mithilfe des Mockup Plugins räumlich darzustellen, musst du zu Beginn eine Form erstellen. Am besten in der Größe des Screenshots — die Farbe ist egal. Nun klickst du per Doppelklick auf die Fläche und siehst dann, dass die Eckpunkte greifbar werden. Jetzt musst du die Eckpunkte so verschieben, dass ein räumlicher Effekt entsteht. Zum Beispiel kannst du die beiden rechten Eckpunkte je nach oben und unten schieben, wodurch es so wirkt als wäre die Form in den digitalen Raum hineingestellt. Wenn der Effekt noch nicht so wirkt, wie du das gern hättest, kann dies daran liegen, dass du die Form noch horizontal stauchen musst.
Schatten erstellen
Um einen Schatten so zu erstellen, dass es so aussieht, als würde die Form leicht vor dem Hintergrund schweben, musst du folgendes tun. Kopiere die verzerrte Fläche und befördere sie in den Hintergrund. Färbe sie nun dunkel ein. Im nächsten Schritt verschiebst du sie je nach Bedarf zum Beispiel nach links unten — 40 bis 50px könnten schon ausreichend sein. Jetzt legst du einen Blur–Effekt auf die Fläche und wählst in den dazugehörigen Einstellungen einen relativ hohen Wert (Wert 100). Sollte dir der Schatten zu stark sein, kannst du mit der Transparenz der Fläche noch ein wenig nachhelfen. Probier doch auch einmal mit farbigen Schatten herum. Je nach Bild und Hintergrund kann das auch sehr gut aussehen.
kleiner Tipp: Wenn du die Schattenfläche weiter von dem Bild entfernst, kann es optisch hilfreich sein, dass die Schattenfläche kleiner wird. Verkleinere also die Form einmal und schau wie es wirkt.
Mockup Plugin benutzen
Das Plugin ist tatsächlich kinderleicht in der Bedienung. Du musst lediglich über die Schnellleiste die Plugins aufrufen und dann das entsprechende Plugin starten. Wähle nun Distort aus. Um den Screenshot in die räumlich verzerrte Fläche zu bekommen, klickst du zuerst die Fläche an und danach den Screenshot. Dir wird auffallen, dass das Plugin von selbst die entsprechenden Daten übernommen hat. Wenn du jetzt auf apply klickst, wird der Screenshot in die Fläche hineingearbeitet.
Radialen Verlauf/Gradient erstellen
Wenn ich hochwertige Designs erstelle, arbeite ich gern mit dunklen Farben, da diese Eleganz und Hochwertigkeit ausstrahlen. In dem Beispiel erstelle ich deswegen einen schwarz–grauen radialen Gradient. Wenn du den Mittelpunkt des Verlaufs heller anlegst und hinter Bild und Schatten legst, wirkt dies wie ein Scheinwerfer. Der Effekt der Räumlichkeit wird dadurch noch einmal verstärkt.
