デバイスリンク
Figmaの最も優れた機能の1つは、Figmaを使用して作成したデザインをコードにすばやく転送できることです。アプリ開発者またはデザイナーと協力している場合、これは学ぶ価値のあるスキルです。組み込みツールと多数のプラグインの助けを借りて、Figmaではデザインをさまざまなプラットフォームにエクスポートできます。
Figmaのデザインをコードに変換する方法についてもっと知りたい場合は、適切な場所に来ました。この記事では、Figmaでコードをエクスポートする方法と、使用する必要のあるツールについて説明します。
WindowsPCでFigmaのコードをエクスポートする方法
Windowsユーザーで、Figmaでコードをエクスポートしたい場合は、さまざまなオプションを使用できることを知って幸せです。
Figma Inspect
Figmaでコードをエクスポートするために使用できる方法の1つは、FigmaInspectです。この機能を使用すると、デザインをAndroid、iOS、またはWebコードに簡単に変換できます。組み込みであるため、プラグインやサードパーティのアプリをインストールする必要はありません。
使用方法は次のとおりです。
- 関心のある要素を選択して、[検査]タブに移動します。
- [コード]セクションで、エクスポートするコード（Webの場合はCSS、iOSの場合はSwift、Androidの場合はXML）を選択します。
ツールは、選択したオプションに応じてコードを生成し、それをエクスポートできます。これは優れたツールですが、いくつかの制限があります。つまり、SVGをHTMLにエクスポートすることはできません。そのためには、プラグインを使用する必要があります。
Figmaプラグイン
Figmaは何百もの便利なプラグインを備えています。デザインをHTMLにエクスポートするために使用できるいくつかのことを説明します。
FigmaからHTMLへ
The プラグイン 必要に応じて、デザインをHTMLまたはCSSに変換できます。以下の手順に従って、プラグインをインストールし、コードをエクスポートします。
- 左上隅のアイコンを押して、メインメニューにアクセスします。
- プラグインを押します。
- コミュニティでプラグインの参照を押します。
- Figma to HTMLと入力し、上部にあるプラグインを選択します。
- インストールを押します。
- デザインに戻り、目的の要素を選択します。
- メインメニューに戻り、[プラグイン]を選択してから、[Figma toHTML]を選択します。
- HTMLまたはCSSを選択します。
- 必要に応じて、[コピー]または[ダウンロード]を押します。
Figmaのアニマ
もう1つの便利なプラグインは、Figma用のAnimaです。このプラグインを使用すると、デザインをHTML、CSS、React、およびVueに変換できます。プラグインを使用するには、次の手順に従います。
- 左上のアイコンを選択してメインメニューを開きます。
- プラグインを押します。
- [コミュニティでプラグインを参照]を選択します。
- FigmaにはAnimaと入力します。
- インストールを押します。
- エクスポートする要素を選択します。
- メインメニューを開き、プラグインを押して、FigmaにAnimaを選択します。アカウントをお持ちでない場合は登録してください。
- コードタイプを選択し、[コードのエクスポート]を押します。
MacでFigmaのコードをエクスポートする方法
デザインをMacデバイスのコードにエクスポートするには、いくつかの方法があります。
Figma Inspect
この組み込みツールを使用すると、デザインのコードやその他の値を検査してエクスポートできます。 Figma Inspectでは、Android、iOS、またはWeb（CSSのみ）の3つのコードオプションから選択できます。
MacでFigmaInspectを使用するには、以下の手順に従ってください。
- エクスポートする要素を選択します。
- 右側の[検査]タブを開きます。
- CSS、iOS、またはAndroidから選択します。
- コードをコピーします。
CSS、iOS、Androidのみに関心がある場合、これは使用するのに最適なツールです。ただし、デザインをHTMLにエクスポートする場合は、別の方法を使用する必要があります。
Figmaプラグイン
デザインをHTMLに変換したい場合、Figmaはこの目的に役立つプラグインを多数提供しています。インストールプロセスは簡単です。最も人気のあるものをいくつかリストします。
FigmaからHTMLへ
この プラグイン デザインをCSSまたはHTMLに変換できます。インストール方法は次のとおりです。
- 左上のアイコンを選択してメインメニューを開きます。
- プラグインを押します。
- [コミュニティでプラグインを参照]を選択します。
- 検索バーに「FigmatoHTML」と入力し、上部にある[プラグイン]を選択します。
- インストールを押します。
- デザインに戻り、エクスポートする要素を選択します。
- メインメニューを開き、[プラグイン]を選択してから、[Figma toHTML]を選択します。
- HTMLまたはCSSを選択します。
- コピーまたはダウンロードを押します。
Figma to Code
これとともに プラグイン 、FigmaデザインをHTML、Tailwind、Flutter、またはSwiftUIに変換できます。以下の手順に従って、インストールして使用してください。
- 左上のアイコンを押して、メインメニューにアクセスします。
- プラグインを選択します。
- コミュニティでプラグインの参照を押します。
- 検索バーに「FigmatoCode」と入力し、上部にある[プラグイン]を選択して、関連する結果を取得します。
- インストールを押します。
- デザインに移動して、目的の要素を選択します。
- 再度メインメニューにアクセスし、[プラグイン]を選択してから、[Figma toCode]を選択します。
- 目的のコードを選択します。
- [クリップボードにコピー]を押します。
iPhoneでFigmaのコードをエクスポートできますか？
新しいFigmaiPhoneアプリは、ベータ版としてのみ利用可能でした。 テストフライト 最初の10,000台のiPhoneについては、同社は完全な展開が間もなく行われると述べています。このアプリを使用すると、コンピューターでデザインを編集しながら、iPhoneでデザインを参照してアクセスし、ライブの変更を追跡できます。
現時点では、iPhoneアプリを使用してデザインを編集することはできません。つまり、iPhoneアプリを使用してコードをエクスポートする方法はありません。
Figmaはまた提供します Figma Mirror AppStoreのアプリ。このアプリを使用すると、同じネットワークに接続しなくても、デザインを任意のiOSデバイスにミラーリングできます。これにより、特定のデバイス（この場合はiPhone）でデザインがどのように表示されるかを確認し、変更を追跡できます。このアプリでは便利ですが、iPhoneにコードをエクスポートすることはできません。そのためには、コンピューターを手に入れる必要があります。
ブラウザからデザインにアクセスすることもできます。ただし、デザインを表示してライブの変更を追跡することしかできません。
iPadでFigmaのコードをエクスポートできますか？
残念ながら、iPadを使用している場合、Figmaでコードをエクスポートすることはできません。 Figmaはモバイルアプリに取り組んでおり、ベータ版がありますが、タブレットでは利用できず、iPhoneとAndroidでのみ利用できました。
FigmaMirrorアプリはiPadで利用できます。このアプリを使用すると、コンピューター上でデザインに加えた変更を追跡し、iPad画面でどのように表示されるかを確認できます。残念ながら、アプリ内でコードをエクスポートするオプションは利用できません。
アプリをインストールしたくない場合は、ブラウザからFigmaにアクセスして、デザインの変更を追跡できます。ただし、Figmaでのコードのエクスポートは、コンピューターでのみ可能です。
AndroidでFigmaのコードをエクスポートできますか
Figmaは現在Androidアプリに取り組んでおり、10,000台のAndroidフォン用のベータ版を提供しています。あなたはからアプリをダウンロードすることでテスターになることができます プレイストア これにアクセスします リンク 。パソコンの近くにいなくても、アプリ内でデザインを閲覧、表示、共有したり、変更を追跡したりできます。
このアプリは多くの目的に役立ちますが、現時点ではコードをエクスポートできません。
The Figma Mirror アプリはAndroidでも利用できます。その主な目的は、コンピューター上のデザインに加えた変更を追跡し、すべてのAndroidデバイスで見栄えがよいことを確認することです。コードをエクスポートするオプションは利用できません。
アプリをインストールしたくない場合は、ブラウザ内でFigmaを使用することもできます。ただし、それでもコードをエクスポートすることはできません。そのためには、コンピューターを使用する必要があります。
パトレオンと不和を結びつける方法
追加のFAQ
FigmaからXcodeに色をエクスポートするにはどうすればよいですか？
残念ながら、Figmaはサポートしていないため、FigmaからXcodeに色をエクスポートすることはできません。ただし、次のように使用できる回避策があります。 Figmaエクスポート 。以下の手順に従って使用してください。
1.まだインストールしていない場合は、 Figmaエクスポート 。
2.Terminal.appを開きます。
3.figma-exportファイルを含むフォルダーを開きます。
4.figma-exportを起動します。
5. ./figma-export Colors -ifigma-export.yamlを使用して色をエクスポートします。
FigmaからHTMLコードをエクスポートするにはどうすればよいですか？
前述のように、Figma Inspectと呼ばれる組み込みツールを使用すると、CSSを取得できますが、HTMLは取得できません。 HTMLコードが必要な場合は、プラグインをインストールする必要があります。
Figmaは、この目的に役立つ多数のプラグインを備えています。おすすめは FigmaからHTMLへ 。使用方法は次のとおりです。
1.メインメニューを開きます。左上のアイコンです。
2.プラグインを押します。
3. [コミュニティでプラグインを参照]を選択します。
4.検索バーに「FigmatoHTML」と入力し、上部で[プラグイン]が選択されていることを確認します。
5. [インストール]を選択します。
6.デザインに戻り、HTMLに変換する要素を選択します。
7.メインメニューに移動し、[プラグイン]を選択して、[Figma toHTML]を開きます。
8.HTMLを押します。
9.コピーまたはダウンロードから選択します。
必要なコードを入手する
Figmaを使用すると、いくつかの方法を使用してさまざまなタイプのコードをエクスポートできます。必要に応じて、組み込みのツールを使用したり、さまざまなプラグインをダウンロードしたりできます。今のところ、コードのエクスポートはコンピューター経由でのみ可能です。 Figmaはモバイルアプリのベータ版（10,000台のiPhoneまたはAndroidデバイスに限定）をリリースしましたが、このオプションはありません。幸い、コンピューターにコードをエクスポートするのはすばやく簡単です。
Figmaでコードをどのようにエクスポートしますか？この記事で説明した方法の1つを使用しますか？以下のコメントセクションで教えてください。
