この記事では、コードへのエクスポートに適したコンポーネントをFigmaで作成する方法を説明します。Figmaでは、コンポーネントを選択し、プラグインを使用して完成したコードを生成できます。
UPD
Figmaは、さまざまな複雑さのインターフェースを開発するためのサービスと機能のパッケージ全体を提供することに特化したアプリケーションです。アプリケーション自体はクロスプラットフォームであり、デスクトップアプリケーションとブラウザの両方で使用できます。中核となるのは、プラグインの大規模なベースをサポートするベクターグラフィックエディタです。当初から、モバイルデバイス用のCSSスタイルとコードの生成をサポートしていました。大きな利点は、クラウドにレイアウトを保存できることと、デザイナーのチーム全体で1つのプロジェクトで同時に作業できることです。開発者にとっては、リソース（ベクターアイコンなど）をPNG / SVG / JPG形式にエクスポートしたり、ページをPDFファイルにエクスポートしたりするのに便利です。
Figmaのプラグインは、デザイナーと開発者のタスクを容易にするのに役立ちます-カスタム拡張機能（プラグイン）でベースFigmaアプリケーションの機能を拡張します。
アイコンでリーフビューを描き、レイアウトを生成してみましょう。
これは、リストアイテムのおおよその構造がどのように見えるかです-左側のアイコン、そしてテキスト。
これがコンポーネントの構造になります。これは、上記で思いついた要素の垂直セットです。
それで、私たちは構造を理解し、おおよそ何をする必要があるかを理解し、今度は直接設計に進みます。これを行うには、1つの要素を取得し、Figmaコンポーネントに基づいて作成し、それに自動レイアウトを適用します。まず、テキストとアイコンをマージし、パディングを追加して、中央と左に揃えます。このようになります...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
前の例のようにレイアウトを描き、デザインを作成し、ブロックを分散し、自動レイアウトを使用して、必要に応じてすべてを配置しました。コードを生成し、写真やアイコンでニュアンスの一部を修正した結果、完成品のカードを受け取りました。Flexboxの詳細については、こちらをご覧ください。
生成したマークアップはこちらから入手できます。あなたは自分で見て、試すことができます。
私の記事があなたの役に立つことを願っています、そしてそれはタイプセットするのがずっと簡単になるでしょう。しかし、そうでない場合は、記事を差し引くのではなく、コメントを残して消化しやすい形に洗練するのを手伝ってください。