Figmaデザインの基礎知識

インターフェースツアー

• 右サイドバーで、デザイン、プロトタイプの作成、レイヤープロパティの確認を行う

ツール、シェイプ、レイヤー

レイヤーの作成

• Figmaのフレーム
• Figmaデザインの基本的なシェイプツール
• デザインファイルへの画像の追加
• マスク

レイヤーの操作

• セクションでキャンバスを編成
• グリッド、列、行を使用したレイアウトグリッドの作成

オートレイアウトの使用

• オートレイアウトのプロパティを調べる
• オートレイアウトの使用

スタイル設定用エレメント

テキストとフォント

• コンピューターのローカルフォントへのアクセス
• フォントの検索と適用
• テキストへのリンクの追加
• 箇条書きリストと番号付きリスト

コンポーネント

• Figmaのコンポーネントについてのガイド
• バリアントの作成と使用
• バリアント付きのインタラクティブコンポーネントを作成
• コンポーネントのプロパティを調べる

バリアブル

• Figmaでのバリアブルに関するガイド
• バリアブル、コレクション、モードの概要
• バリアブルの作成と管理
• バリアブルモード
• バリアブルをデザインに適用する

ライブラリ

ライブラリの共有と管理

• 公開済みコンポーネントの移動

ライブラリの使用

• コンポーネントインスタンスの作成と挿入

プロトタイプ

ガイド

• Figmaのプロトタイピングのガイド
• プロトタイプの状態管理
• プロトタイプに動画を追加
• プロトタイプのアクション

プロトタイプ作成

• プロトタイプデバイスと開始点の設定
• プロトタイプのスクロールおよびオーバーフロー挙動

高度なプロトタイピング

• スマートアニメートによる高度なアニメーションの作成
• プロトタイプのバリアブルモード
• 複数のアクションおよび条件付きアクション
• プロトタイプで式を使用する
• プロトタイプでバリアブルを使用する

開発モード

概要

• 開発モードのガイド
• VS Code連携

デザインのインスペクト

• 開発モードでのデザインのナビゲーション
• 開発モードでのコードスニペットの利用
• 開発モードでの変更内容の比較
• 開発モードでレイヤーに開発リソースをリンクする

インポートとエクスポート

• Figmaへのファイルのインポート
• Sketchファイルのインポート
• Figmaからのエクスポート
• エクスポート形式および設定

ファイルユーティリティ

• ショートカットとクイックアクションの使用