twenty/packages/twenty-docs/l/ja/developers/frontend-development/work-with-figma.mdx

---
title: Figma で作業する
info: Twenty の Figma を使用した共同作業方法を学ぶ
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Figma は、デザイナーと開発者の間のコミュニケーションの壁を埋めるのを助ける協働インターフェース設計ツールです。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。
このガイドは、Figma を使って共同作業する方法を説明します。

## アクセス

1. **共有リンクにアクセスする:** プロジェクトの Figma ファイルは [ここ](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty) からアクセスできます。
2. **サインイン:** まだサインインしていない場合、Figma はサインインを促します。
   開発者モードや専用のフレーム選択など、キー機能はサインインしたユーザーのみが利用できます。

<Warning>

アカウントがないと効果的に協力することはできません。

</Warning>

## Figma 構造

左側のサイドバーで、Twenty の Figma の異なるページにアクセスできます。 それらは次のように整理されています: それらは次のように整理されています: それらは次のように整理されています: それらは次のように整理されています: それらは次のように整理されています:

- **コンポーネントページ:** これは最初のページです。 デザイナーはこれを使用して、デザインファイル全体で使用される再利用可能なデザイン要素を作成および整理します。 例えば、ボタン、アイコン、シンボル、またはその他の再利用可能なコンポーネントとして使用されます。 これにより、デザイン全体で一貫性を保つことができます。
- **メインページ:** 2 番目のページはメインページで、プロジェクトの完全なユーザーインターフェースを示しています。 _**再生**_ を押すことで、アプリプロトタイプを完全に使用できます。 **メインページ:** 2 番目のページはメインページで、プロジェクトの完全なユーザーインターフェースを示しています。 _**再生**_ を押すことで、アプリプロトタイプを完全に使用できます。 _**再生**_ を押すことで、アプリプロトタイプを完全に使用できます。
- **特徴ページ:** その他のページは、通常、進行中の機能に専念しています。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。 それらはアプリケーションまたはウェブサイトの特定の機能またはモジュールのデザインを含みます。 通常、まだ進行中です。

## 役立つヒント

閲覧専用アクセスでは、デザインの編集はできませんが、デザインをコードに変換する際に役立つすべての機能にアクセスできます。

### 開発者モードを使用する

Figma の Dev モードは、デザインナビゲーションの容易化、効果的なアセット管理、効率的な通信ツール、ツールボックス統合、迅速なコードスニペット、主要レイヤー情報の提供により、開発者の生産性を向上させ、デザインと開発の間のギャップを埋めます。 Dev Mode についての詳細は [こちら](https://www.figma.com/dev-mode/) で確認できます。

ツールバーの右部分で「開発者」モードに切り替えることで、デザインスペックの確認、CSS のコピー、アセットへのアクセスが可能です。

### プロトタイプを使用する

キャンバス上の任意の要素をクリックし、インターフェースの右上隅にある「再生」ボタンを押してプロトタイプビューにアクセスします。 プロトタイプモードでは、あたかも最終製品であるかのようにデザインに触れることができます。 画面間のフローや、ボタン、リンク、メニューなどのインターフェース要素が操作時にどのように動作するかを示します。

1. **トランジションとアニメーションの理解:** プロトタイプモードでは、デザイナーによって画面や UI 要素間に追加されたトランジションやアニメーションを表示でき、開発者に意図された動作やスタイルを視覚的に明確に指示します。
2. **実装の明確化:** プロトタイプは曖昧さを減らすのにも役立ちます。 開発者はそれを操作することで、特定の要素の機能や外観をより良く理解することができます。

Figma プラットフォームの学習に関するより包括的な詳細とガイダンスについては、公式の [Figma ドキュメント](https://help.figma.com/hc/en-us) を訪れることができます。

### 距離を測定する

要素を選択し、`Option` キー（Mac）または `Alt` キー（Windows）を押したまま、別の要素の上にカーソルを合わせると、それらの間の距離が表示されます。

### VSCode 用 Figma 拡張機能（推奨）

[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) を使用すると、デザインファイルのナビゲート、検査、デザイナーとのコラボレーション、変更の追跡、実装の促進ができます - すべてをテキストエディターから離れることなく行えます。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。
これは推奨拡張機能の一部です。

## コラボレーション

1. **コメントの使用:** ツールバーの左側にあるバブルアイコンをクリックしてコメント機能を使用できます。
2. **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 **カーソルチャット:** Figma の魅力的な機能のひとつにカーソルチャットがあります。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。 他の Figma を同時に使用している誰かを見た場合、`/` キー（Windows）または `;` キー（Mac）を押してメッセージを送信します。