Tutorial of Figma in GDLab

Transcript

1. Figmaチュートリアル GDLab 福山翔太
2. そもそも 　とは？ ・ブラウザで動作するUIデザインツール ・1ファイルを複数人で操作でき、チーム制作に向いている ・それぞれのOSなど作業環境に左右されない ・環境構築が簡単 ・XDと比べてリアルタイム性が高い 無料 ・そして何より
3. 環境構築編 1 ・ググってダウンロードページを開いて、自分のOSに合ったものをDL
4. 環境構築編 2 ・アカウントを作る 自前のアドレスで作る方が良いかも...？ ・Discordのリンクからチームに参加 環境構築完了 ・作ったアカウントでログイン ・学生認証を行う
5. 基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク ・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
6. 基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク ・制約 ・コンポーネント ・バリアント ・スタイル 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
7. 操作説明 … 基本概念
8. 基本概念 ・チーム ・プロジェクト ・ファイル ・ページ ・フレーム ・オブジェクト 説明が必要そうな部分 ・ブーリアングループ ・マスク ・コンポーネント ・バリアント ・スタイル ・制約 操作説明 … 他のデザインツールと大体一緒 後でやるかも... ・プロトタイプ ・フロー ・インタラクション ・アニメーション
9. 操作説明 … 説明が必要そうな部分 ブーリアングループ ・シェイプやベクターパスを結合して 　新たな図形を作る ・結合結果はレイヤーの重ね順で異なる ・長方形,直線,矢印,楕円などの 　シェイプに対してのみ適用可能 次項のマスクで違いについて説明
10. 操作説明 … 説明が必要そうな部分 マスク ・下のレイヤーで上のレイヤー全てを切り抜く ・テキストなどシェイプ以外のオブジェクトも 　マスクより上のレイヤーなら切り抜ける ・レイヤー構成 　マスクはEllipse5
11. 操作説明 … 説明が必要そうな部分 コンポーネント ・繰り返し使用する要素を登録できる機能 ・コンポーネントから生成した 　オブジェクト群をインスタンスと呼ぶ ・コンポーネントを編集すると 　全てのインスタンスが影響を受ける ・インスタンスのプロパティは編集可 　コンポーネントの編集より優先される ・別コンポーネントのインスタンスを 　入れ子にしてコンポーネントを作れる
12. 操作説明 … 説明が必要そうな部分 バリアント ・コンポーネントのVer違いを作れる ・ブーリアン型でスイッチとしても使える ・コンポーネントプロパティもほぼ同様の機能 　　バリアントはサイズやレイアウトが 　　大きく異なる場合に推奨されている
13. 操作説明 … 説明が必要そうな部分 スタイル ・コンポーネントのプロパティ版 ・登録できるプロパティは 　色,テキスト,エフェクト,グリッド ・コンポーネントやスタイルは 　チームで共有することができる ・登録するにはオブジェクトが必要
14. 操作説明 … 説明が必要そうな部分 制約 ・親フレームのサイズによって 　子要素の振る舞いをコントロールする機能 ・デバイス差などによる表示サイズ変更に 　強いUIを作ることができる ・ある座標から〇〇の位置に固定など数値で 　設定すると縮尺変更に左右されない ・上,下,左,右,上下,左右,中央など指定は様々