Wie setze ich ein Figma Design in Code um?

Ich stehe vor der Aufgabe, ein von einer UI/UX-Designerin erstelltes Figma-Design in React umzusetzen. Die UI-Elemente optisch so darzustellen, wie sie im Design vorgesehen sind, sollte kein Problem darstellen. Allerdings frage ich mich, wie sich die exakten Proportionen und Abstände aus Figma 1:1 in den Code übertragen lassen.

Hat jemand Erfahrung in diesem Bereich und kann mir eine kostenlose Quelle oder hilfreiche Tipps empfehlen?

Answer 1

[Mirko Marek]

Hi LDM158,

die Entscheidung React als Framework für ein Figma-Projekt zu verwenden, hängt tatsächlich an spezifischen Anforferungen an deinem Kundenprojekt. Wenn es kleine oder mittlere Projekte sind, würde ich den Einsatz von React und andere Frameworks abraten. Es enstehen dadurch nur unnötig Fehlerquellen, es gibt einen erhöhten Arbeitsaufwand. Dabei kann man bei kleinen und mittleren Projekten auf native JavaScript-Funktionen zurück greifen, was die Seite viel performanter macht und weniger Overhead produziert.

Aber ich möchte dir nicht vorhalten wie man es umsetzen könnte, wenn ich es persönlich auch nicht schlau finde:

Hier habe ich eine passende Seite für dich heraus gesucht, damit ich hier keine 200 Sätze schreiben muss:
https://www.animaapp.com/blog/design-to-code/how-to-export-figma-to-react/
Denk daran, ich würde es dir nicht empfehlen, wenn es sich um kleine Projekte oder mittlere Projekte handelt.

Begrifferklärung Projektgrößen:

• Kleine Projekte fangen bei 1 Person an und hören bei 3 Leuten auf
• Mittlere Projekte fangen bei 1 Person an und hören bei 5 Personen auf
• Große Projekte können bis zu 30 Personen Personalaufwand bedeuten.
• Sehr große Projekte / Mega-Projekte sind Projekte die 30+ Personen umsetzen. Hier sind hierarchische Strukturen mit Abteilungen, Projektmanagern und Stakeholdern gefordert.

Woher ich das weiß: Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Comments

[LDM158]

Ist denn Anima sinnvoll für ein Projekt in production?
Ich bin auch schon auf dieses Tool gestoßen, aber es schien mir so das es über komplizierten Code erzeugt.

[Mirko Marek]

@LDM158

Hi LDM158,
leider kann ich nichts dazu schreiben. Ich habe Anima selber nicht verwendet. Natürlich kann es bei der Konventierung/Instanzierung des Projekts in React zu komplexeren Code kommen. Das bringt einige Herausforderung mit sich. Daher ist mit Mehraufwand zu rechnen. Darf ich Fragen um was es sich handelt in deinem Projekt?

Answer 2

[abbrechen]

Wenn es nur um die statische Nachbildung des Designs geht, kannst du die css Eigenschaften "margin" und "padding" für die Innen- und Außenabstände verwenden und die Pixelwerte aus Figma eintragen.

Allerdings empfiehlt es sich in der Regel, eine Webseite responsiv zu gestalten. Bedeutet, dass du darüber nachdenken solltest wie sich deine Seite bei bestimmten Fenstergrößen verhält. Das beinhaltet das Layout als auch die Text- und Abstandsgrößen.

Da es nicht sehr nachhaltig ist für roundabout fünf Breakpoints manuell die Werte zu ändern (kann schnell viel Arbeit werden), solltest du über folgende css-Themen nachdenken. Tutorials findest du dazu auf w3schools und MDN:

- grid

- em / rem

- clamp

- container queries

Woher ich das weiß: Berufserfahrung