UI デザインツール
- なるべく公式のものを参照する
- Figmaはアップデートが多い
- 公式以外の情報（個人ブログ等）は内容が古くなっている場合がある
- 英語は慣れ＆わからなかったらブラウザの翻訳機能を使う
- Figmaはアップデートが多い
- 公式で学習したあとに応用・発展として各種Pluginや個別の記事を読んでいくのが良さそう
- Get started with Figma design – Figma Help Center
- Figma for Beginners tutorial を見ていく
- [ ] ▶Beginner 1: Explore ideas – Figma Help Center
- [ ] ▶Beginner 2: Create designs – Figma Help Center
- [ ] ▶Beginner 3: Build prototypes – Figma Help Center
- [ ] ▶Beginner 4: Prepare for handoff – Figma Help Center
- ショートカット
- Figma design – Figma Help Center
- ここに情報がまとまってる。困ったらこのページで検索すると良さそう
- 読んでおきたい
- What to expect when moving from Sketch to Figma
- フレームについて
- 相互にネストできる
- アートボードとは違う
- Layout Grid
- https://www.figma.com/best-practices/what-to-expect-when-moving-from-sketch-to-figma/tips-and-tricks-for-the-move/
- ショートカットの案内あるのいい
- フレームについて
- Kick-start your typography system in Figma
- 色や配置はテキストスタイルではない
- WIP
https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA
- https://www.figma.com/resources/learn-design/getting-started/
- Figma の話というよりはデザイン全般の話
- Design exercises
- Team を作ったときに出てくる、 team library というファイルでどんなことができるか学べる
- 無料版だとコンポーネントはパブリッシュできない
- 微妙にUIが違う…
- Edit Styleが奥まったところにある
- デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.｜note
- 課題設定とKPIツリー の定義良い
- > デザインの整理やそれに伴う開発の効率化は効果の検証が難しく、すぐには成果に繋がりません。そのため優先度が下がり途中で滞ることが予想されます。長期的に継続して取り組むためには、達成度を測る指標やメンバーの評価に繋がる仕組みが必要だと考えました。
- Figmaなら簡単！デザインシステムの作り方を詳しく解説 | コリス
- 実践的でわかりやすい
- Figmaでグラフィックデザインをする際に使用しているプラグインや機能を紹介します｜Yang｜note
- 良い
- デザイナーでもやればできる！FigmaをJavaScriptで操作してみる - Qiita
- 馴染みやすい説明でわかりやすかった
- UIデザインをきちんとエンジニアに伝えるための、イケてる設計資料を定義してみた｜ymrl｜note
- ここまでやるの大変そう
- https://www.figma.com/community/plugin/731260060173130163/Super-Tidy
- 並びを揃えるやつ
- [ ] 勉強になったFigmaのデザインシステム8選｜東 莉緒／Rio Azuma｜note
- あとで見よう
- 10 Figma Best Practices to 10X Your Workflow | by Danny Sapio | UX Collective
- 良さそう
- DesignOps推進の一環としてFigma上のコンポーネントを自動でnpmにpublishしてみる
- 参考になる
- Figma with Cookpad - Speaker Deck
- ファイル運用の例
- [ ] 11 super-simple tips to help improve your Figma workflow (2022)