Kundenprofilkarte erstellen
Projektübersicht
- Produkt: Figma Design
- Themen: Hinzufügen und Gestalten von Rahmen, Formen, Text und Bildern
- Länge: 20 Minuten
In diesem Projekt erstellen wir eine Kundenprofilkarte. Du kannst diese nur für dich erstellen oder als Vorlage speichern, mit der sich alle Mitglieder deines Teams selbst vorstellen können.
Um eine Figma-Designdatei zu erstellen, klicke im Datei-Browser auf Drafts (Entwürfe) und dann auf New design file (Neue Designdatei). Du kannst in deinen Webbrowser auch figma.new eingeben, um direkt zu einer neuen Datei zu gelangen.
Layout mit Rahmen, Formen und Text erstellen
Füge zunächst in der Arbeitsfläche alle gewünschten Objekte hinzu, wie etwa:
- Einen Rahmen für dein Design
- Ein Rechteck für den Hintergrund, das du mit einer Farbe oder einem Bild füllst
- Eine Ellipse (Kreis) für einen Avatar
- Zwei Textebenen für deinen Namen und weitere Informationen über dich
Keine Sorge, falls das alles jetzt noch nicht so aussieht, wie du das gerne haben möchtest. Das passen wir gleich im Design-Tab an.
Rahmen hinzufügen
Was ist ein Rahmen?
Rahmen sind die Hauptbausteine in Figma. Ein Rahmen ist ein Container, in dem du Designelemente wie Formen, Text und Bilder platzieren, organisieren und strukturieren kannst.
Ein Rahmen kann eine beliebige Größe haben und eine beliebige Anzahl von Designelementen enthalten. Du kannst auch mehrere Rahmen verschachteln, um komplexe Designs mit mehreren Hierarchieebenen zu erstellen.
Erstelle zunächst einen Rahmen und füge diesem Objekte hinzu.
- Klicke in der Symbolleiste auf das Rahmenwerkzeug.
- Klicke auf die Arbeitsfläche, um einen Standardrahmen (100 x 100) zu erstellen. Jeder Rahmen, den du einfügst, wird dem Ebenen-Tab in der linken Seitenleiste hinzugefügt.
- Ändere im Design-Tab in der rechten Seitenleiste die Breite in 390 und die Höhe in 750.
Tipp: Mit dem Handwerkzeug kannst du dich in einer Datei bewegen, ohne ein Objekt auszuwählen oder zu verschieben. Mit den Tasten und kannst du die Ansicht auch vergrößern und verkleinern.
Rechteck und Ellipse hinzufügen
Füge jetzt in den Rahmen ein Rechteck und eine Ellipse ein:
- Rechteck hinzufügen: Wähle das Rechteckwerkzeug aus und klicke in den Rahmen.
- Ellipse hinzufügen: Wähle das Ellipsenwerkzeug aus und klicke in den Rahmen.
Die Abmessungen müssen noch nicht gleich stimmen, das können wir später noch anpassen.
Text hinzufügen
- Klicke in der Symbolleiste auf das Textwerkzeug.
- Klicke in den Rahmen, um eine Textebene zu erstellen.
- Gib deinen Namen ein und klicke anschließend auf eine beliebige Stelle in der Arbeitsfläche.
- Erstelle eine zweite Textebene und gib eine Beschreibung ein.
Tipp: Jetzt ist ein guter Zeitpunkt, um zu prüfen, ob sich alle Objekte innerhalb des Rahmens befinden. Unten siehst du einen Screenshot des Ebenen-Tabs.
Das Rechteck, die Ellipse und der Text sollten in den Rahmen eingebettet sein. Wenn dies nicht der Fall ist, klicke auf die in der Arbeitsfläche angezeigten Objekte und ziehe sie in den Rahmen.
Objekte im Design-Tab bearbeiten
Die Position und das Aussehen jedes in der Arbeitsfläche angezeigten Objekts wird durch dessen Einstellungen bestimmt. Wenn du auf ein Objekt klickst, um es auszuwählen, werden im Design-Tab in der rechten Seitenleiste Informationen zu dem Objekt angezeigt. In diesem Abschnitt ändern wir die Eigenschaften der Objekte, um ein stimmiges Design zu erhalten.
Kartenhintergrund erstellen
- Ziehe das Rechteck zur linken oberen Ecke des Rahmens. Wenn rote Linien angezeigt werden, bedeutet dies, dass Figma versucht, das Rechteck am Rahmen auszurichten.
- Gib im Design-Tab für die Breite 390 und für die Höhe 200 ein.
Tipp: Du kannst die Größe eines Objekts manuell ändern, indem du das Objekt auswählst und mit dem Cursor an den Ecken ziehst. Während du die Größe eines Objekts änderst oder das Objekt verschiebst, werden in der Arbeitsfläche rote Führungslinien angezeigt. Sie erleichtern dir das Ausrichten des Objekts.
Füge dem Rechteck jetzt eine Farbe hinzu:
- Wähle das Rechteck aus und klicke unter Fill (Füllen) auf den Farbwert.
- In der Farbauswahl kannst du verschiedene Farben ausprobieren.
Gesicht in Kreis (Avatar) einfügen
Größe und Position anpassen
- Gib für die Höhe und Breite jeweils 185 ein.
- Ziehe den Kreis so, dass sich die obere Hälfte im Rechteck befindet und der Kreis horizontal mittig im Rahmen angeordnet ist.
Strichstärke festlegen
- Wähle den Kreis aus und klicke auf das Pluszeichen neben Stroke (Strichstärke).
- Ändere die Strichfarbe in Weiß oder FFFFFF.
- Lege für die Strichposition “Outside” (Außerhalb) fest.
- Ändere die Strichstärke in 8.
Bildfüllung hinzufügen
- Wähle den Kreis aus und klicke unter Fill (Füllen) auf den Farbwert.
- Klicke auf Solid (Gefüllt) und ändere den Fülltyp in Image (Bild).
- Bewege den Mauszeiger über dem schwarz-weißen Schachbrettmuster im Overlay und klicke auf Choose image (Bild wählen).
Text anpassen
Name als Überschrift formatieren
- Wähle die Textebene mit deinem Namen aus.
- Klicke auf eine Seite des Textfelds und ziehe es größer. Dadurch werden die Eingabefelder für die Breite und Höhe aktiviert. Gib für die Breite 320 ein.
- Klicke auf Align horizontal centers (Horizontal zentrieren).
- Wähle unter Text für die Textausrichtung Center (Mitte) aus.
- Ändere die Schriftgröße in 32.
- Ändere die Schriftstärke von Regular (Regulär) in Bold (Fett).
- Ziehe die Textebene unter den Avatar.
Breite und Ausrichtung der Beschreibung anpassen
- Wähle die Textebene mit deiner Beschreibung aus.
- Klicke auf eine Seite des Textfelds und ziehe es größer. Dadurch werden die Eingabefelder für die Breite und Höhe aktiviert. Gib für die Breite 320 ein.
- Klicke auf Align horizontal centers (Horizontal zentrieren).
- Ändere die Schriftgröße in 16.
- Ziehe die Textebene unter deinen Namen.
Kartenecken abrunden
Wähle zum Abschluss den Rahmen aus und gib für Corner radius (Eckradius) 24 ein.
Fertig! Herzlichen Glückwunsch! 🎉
Du möchtest weiter mit deinem Design experimentieren? Hier ein paar Ideen:
- Füge in das Rechteck ein Bild ein, sodass dein Avatar einen schönen Hintergrund erhält.
- Speichere die Karte als Komponente, die von anderen genutzt werden kann.