Figmaを使いこなすための初歩のステップ 2023年09月22日

Figma強化中につき、ロクナナのFigmaセミナーを受講いたしました。

・松下絵梨さん
・株式会社ロクナナ

・スタータープランは、1つのチーム内にプロジェクト1つ、ファイル3つまで。
・ローカルフォントはアプリ版でのみ使える
・.figファイルはダブルクリックしても開けない
・ズームインはShift+2
・XDと違い、一部の線だけ描画できる
・フレームの中にフレームを入れることができる。アートボードとは違う。
・スタイル:デザインタブの中の■4つボタン
・スタイルの名前を付けるときに/で名前を付けると階層を作ることができる。

■オートレイアウト
・テキストにフレームを追加できる
・余白を入れることができる。

■コンポーネントに登録
・選択し、コンポーネントの作成ボタンを押す
・登録したコンポーネントは「アセット」か「」のなかにある
・複製したものはインスタンスと呼ぶ
・Shift+Aでフレーム化とオートレイアウトを同時に作成できる

・レイアウトグリッド
・ディープセレクト:Ctrl+クリックで奥のオブジェクトを選択できる。
・マスク:シェイプに塗りとして写真を配置。写真を上、オブジェクトをしたにして、グループ化してからマスク適用。
・あまったフレームはデザインタブのフレームのサイズ自動調整で調整

■プロトタイプ
・フローの開始点を決める
・トップの固定:オブジェクトを選択してスクロールの動作を固定にする
・間違いをなくすために、オブジェクトを選んでプロトタイプタブのインタラクションで動作をつける事ができる。
・メインコンポーネントにインタラクションをつなげることによって、
 一括で遷移をつけることができる。

■まとめ
・スタータープランは、1つのチーム内にプロジェクト1つ、ファイル3つまで。
・フレームは、アートボードに該当し、なおかつ「高機能な長方形」として様々なUIパーツに利用できる。
・開発モードは2024年から無料では使えなくなる。
・VS CODEで開くプラグインがある。
・デザインシステムの良い例:デジタル庁のデザインシステム
 →コミュニティで検索

Figmaを操作するスピードも速くて的確。
こんなFigma使いになりたいと思いました。

コメント

タイトルとURLをコピーしました