🎓
私が考えた最強のFigmaカリキュラム(WIP)
Figmaの使い方をまとめている記事は多々あるので不要かとも思いましたが「使い方」の背景にある「適切な用途を選別する判断方法」についてはあまり言及がないので、そこを中心にまとめています。
1年前に走り書きしたまま、全然記事化できていないのでモチベーションを獲得するため「いいね」稼ぎします。もし、こんな記事を読んでみたい。と思われた方はシェアやいいねお願いします。褒められると調子にのってスグ書きます。
カリキュラム設計思想
- 機能の解説はしません
- 用意された機能をどう理解すると使いこなしやすくなるかを解説する
基礎
ワークスペースとその役割
- ツール
- left sidebar
- right sidebar
移動をマスターする
- 基本は3ステップ
- hand tool
- zoom tool
Frame / Groupの違い
- Frameは多機能
- Groupは無機能
Fussyな入力を減らそう - 公開済み
「私の考える最強のFigma」 - Fussyな入力を減らすためにできること
- レイアウト時は数値入力とキーボードをメインに
- マウス移動はざっくりの時
コメント(コミュニケーション)
- 1week程度のTODO管理
- コンポーネントの解説はカンバスに直接書こう
応用
layout grid
- ガイドとして使う
- コンテンツ幅を明示する
- 余白情報をチームで共有するのに使う
File / Pageの単位
Auto layout
- テキストに合わせて拡張するボタン
- 汎用性の高いmaster component
- auto layoutルールから除外したい時はframeを活用
- 余白絶対ズレないartboardとして活用
- frameを可変にして背景自動拡張
トークメイン
Figmaの特性
- グラフィックオーサリングツールとしての評価
- デジタルデザインツールとしての評価
- コラボレーションツールとしての評価
イチから作るのを休もう
- 既存データの改変から
- ボタンを改変してみる
これから学ぶ人へ
- 公式のドキュメントやツアーを実践しよう
- 日本語コミュニティに参加してみよう
- 名称を覚えよう
- 効率よく検索するために
- データの作り方に困ったら
- 人のデータをダウンロードして真似しよう
見るだけでできるFigma動画
Electron製のスクショアプリを作る
- frameを作る
- 文字を打つ
- Form element と リンクを コピペして持ってくる
- レイアウトを整える
- 見た目を作り込む
- auto layoutで整える
- compnentを作る
Discussion