In diesem Artikel werde ich Ihnen erklären , wie Sie eine Komponente in Figma erstellen, die für den Export in Code geeignet ist. In Figma können Sie unsere Komponente auswählen und das Plugin verwenden, um den fertigen Code zu generieren.
UPD
Figma ist eine Anwendung, die sich auf die Bereitstellung eines ganzen Pakets von Diensten und Funktionen zur Entwicklung von Schnittstellen unterschiedlicher Komplexität spezialisiert hat. Die Anwendung selbst ist plattformübergreifend und kann sowohl als Desktop-Anwendung als auch in einem Browser verwendet werden. Im Kern handelt es sich um einen Vektorgrafik-Editor, der eine große Anzahl von Plugins unterstützt. Unterstützt von Anfang an die Generierung von CSS-Stilen und Code für mobile Geräte. Ein großes Plus ist die Speicherung von Layouts in der Cloud und die Möglichkeit, gleichzeitig mit einem ganzen Team von Designern an einem Projekt zu arbeiten. Für Entwickler gibt es einen bequemen Export von Ressourcen (z. B. Vektorsymbolen) in PNG / SVG / JPG-Formate sowie den Export von Seiten in eine PDF-Datei.
Plugins in Figma erleichtern dem Designer und Entwickler die Erweiterung der Funktionalität der Figma-Basisanwendung um benutzerdefinierte Erweiterungen (Plugins).
Zeichnen wir eine Blattansicht mit einem Symbol und generieren ein Layout.
So sieht die ungefähre Struktur unseres Listenelements aus - ein Symbol links und dann Text.
Dies wird die Struktur unserer Komponente sein - die vertikale Menge von Elementen, die wir oben entwickelt haben.
Also haben wir die Struktur herausgefunden, verstanden, was wir ungefähr tun müssen, und fahren jetzt direkt mit dem Entwurf fort. Dazu nehmen wir ein Element und erstellen es basierend auf den Figma-Komponenten und wenden das automatische Layout darauf an. Lassen Sie uns zuerst den Text und das Symbol zusammenführen, etwas Polster hinzufügen und es in der Mitte und links ausrichten. Es stellt sich so heraus ...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
Ich habe das Layout wie im vorherigen Beispiel gezeichnet, das Design erstellt, die Blöcke verteilt und mithilfe des automatischen Layouts alles nach Bedarf ausgerichtet. Ich habe den Code generiert, einige Nuancen mit Bildern und Symbolen korrigiert und als Ergebnis eine fertige Produktkarte erhalten. Erfahren Sie mehr über Flexbox hier .
Mein generiertes Markup finden Sie hier . Sie können selbst zuschauen und es versuchen.
Ich hoffe, mein Artikel wird Ihnen nützlich sein und das Setzen wird viel einfacher. Wenn nicht, dann bitte ich Sie, den Artikel nicht zu löschen, sondern mir zu helfen, ihn durch Hinterlassen Ihrer Kommentare zu einer verdaulichen Form zu verfeinern.