UI/UXデザインツール『Figma』入門

6-1. ファイルの共有とCodeモード

ファイルの共有を行うことで、他のユーザーにファイル共有したり、共同作業メンバーとして招待を行うことができます。 またCodeモードを使用することで、CSSやiOSのコードを書き出すことができるので、ぜひ活用していきましょう。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/09/16最終更新日:2020/01/25

1.ファイルを共有する

ファイル共有は複数の場所から行うことができます。

プロジェクト一覧から共有する

プロジェクトのファイル一覧から共有したいファイルを右クリック、もしくは3つの点が縦に並んでいるアイコンから、Shareボタンがあるのでそちらから共有することができます(図1)

図1 シェアボタン

プロジェクト詳細画面のシェアボタンから共有する

共有したいファイルを開いている場合は、画面右上にShareボタンがあるのでそこからシェアすることができます(図2)

図2 画面右上のシェアボタン

プロジェクトを共有したい場合は、Figmaファイル一覧の上部にあるプロジェクト名、右にあるプルダウンメニューからシェアすることができます(図3)

図3 シェアボタン3

 

2.ファイル共有の詳細設定について

シェアを行うと共有ウィンドウが表示され、プロジェクトにアクセスできるユーザーを制御することが可能です。

図4 共有ウィンドウ

共有ウィンドウ(図4)から次のことができます。

①プロジェクトの移動とファイルの表示を行えます。
②外部から共同作業者をプロジェクトに招待します。
③ファイルの権限設定を変更することができます。
④プロジェクトへのチームのアクセスを表示および更新します。
⑤共同編集者の権限を更新または削除することができます。
⑥共有リンクをコピーすることができます。
⑦埋め込みコードをコピーすることができます。

3.Codeモードでコードを出力する

プロパティパネル上部にあるDesignPrototype 、Codeの 3つのタブがありますが、Codeモードに移ることで、開発者がコードを調べることができるCodeモードがあります。

図5 codeモード

Codeモードでは実際に開発で使うコード(CSS/Swift/Kotlin)を出力したり、縦横のサイズ・位置・色などのプロパティを表示することができます。

まずはプルダウンメニューから「CSS/iOS/Android」を選択します。

図6 コードの種類を選択

「Code」のタブが選択されていれば、コードが出力されます。

「Table」のタブが選択されていれば、選択中のオブジェクトの様々なプロパティが表示されます。

図7 Tableを選択

理解度チェック

UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう

このレッスンの著者