このプラグインを使用して、Figma を単一ページの HTML Web サイトに無料でエクスポートします。 } @media(最小幅: 500px) {.ilfs_responsive_below_title_1 { 幅: 300px; } } @media(最小幅: 800px) {.ilfs_responsive_below_title_1 { 幅: 336px; } } Figma Nocode は、Figma のデザインを HTML 形式でエクスポートするための無料のプラグインです.保存したいレイヤーを選択するだけで、それを HTML ファイルとしてエクスポートできます。デザイン内のすべてのコンポーネントをインテリジェントに HTML ブロックに変換し、CSS が自動的に埋め込まれた最終的な HTML を提供します。したがって、HTML とは別に、CSS コードも生成します。最良の部分は、Figma デザインの任意の部分またはフレーム全体を HTML に変換するのに 2 クリックしかかからないことです。 UI プロトタイプを作成するために Figma を定期的に使用する場合は、このプラグインが気に入るはずです。これにより、数回クリックするだけで、Figma のデザインを HTML 対応の Web サイトにエクスポートできます。ただし、スイッチやボタンなどの一部の要素では失敗する場合があります。ただし、表、段落、テキストのグラデーション、スタイルなどの他のコンポーネントについては、完全に機能します。最終的に生成された HTML もレスポンシブであるため、機能させるには最小限の微調整を行う必要があります。 Figma を単一ページの HTML Web サイトに無料でエクスポートする方法 このプラグインFigma Nocode は完全に無料で使用できます。少し欠点は、このツールの主要言語が中国語であることです。 Figma を開き、HTML にエクスポートするデザインを開きます。アカウントをお持ちでない場合は、こちらから無料で登録できます。デザインが開いたら、エクスポートする親フレームまたはレイヤーを選択します。 その後、プラグイン セクションに移動し、[プラグインをさらに検索] オプションを選択します。 Figma Nocode を検索して、実行ボタンを押すだけです。プラグインが表示されます。 強調表示されたボタンをクリックすると、デザインのレンダリングが開始されます。完了すると、緑色のバナーを使用して表示されます。 さて、HTML をダウンロードするだけです。 3dots オプションをクリックしてから、HTML ボタンをクリックします。 HTML ファイルのダウンロードが開始されます。このファイルを保存してから、ブラウザで開きます。この 1 つのファイルに HTML と CSS の両方が含まれていることがわかります。 これでほぼ完了です。このようにして、このプラグインを引き続き使用して、Figma のデザインを純粋な HTML および CSS に変換できます。 2 回クリックするだけで、PC に保存できる HTML ファイルが作成されます。 最終的な考え: Figma Nocode は、使用できる素晴らしい Figma プラグインです。私はその仕組みが気に入りました.Figmaを頻繁に使用する場合は、いつでも簡単に使用できます.作成した Web サイトのデザインを開いて、すぐに使用できる HTML としてエクスポートできます。デザインを単一ページの Web サイトに変換するのは非常に簡単で、精度も優れています。