Figmaの学習
#デザイン #UI/UX
UIデザインのスタイルをWebやiOS、Androidのコードとして出力できる。
テンプレートのライセンス
https://help.figma.com/hc/en-us/articles/360042296374-Figma-Community-copyright-and-licensing
Attribution 4.0 International (CC BY 4.0) license. This isn't a public domain license.
CC BY 4.0
全て「CC BY 4.0」ライセンス
テンプレートのduplicatedがトレースされている。
テンプレート
公式ページ掲載のテンプレート
https://www.figma.com/templates/
サードパーティ
Figma templates, design systems and UI kits
Community
https://www.figma.com/community/explore
plugin
templage
component
コンポーネント管理
フリープランでは他のプロジェクトのコンポーネントは取り込めない。
componentの公開はprofessionalプランでないといけないみたい。
コンポーネント管理用プロジェクトを作り、そこからコンポーネントをコピーすることで対応した
参考
Figmaのプランを理解せずに契約すると多分困るので解説｜Nao Komura｜note
ショートカット
Ctrl+D
Duplicate
Ctrl+G
Groupにする
shift a
auto layout
frameにする？
shift z
参考
Figmaショートカットまとめ（シンプルで見やすい一覧表） | これを読めば思い出す
学習
チュートリアル
チュートリアル1
stroke
ボーダーの設定
https://help.figma.com/hc/en-us/articles/360040449773
text
list
https://help.figma.com/hc/en-us/articles/4405269899287--Beginner-1-Explore-ideas
スマホのフレームを選択
レイアウト調整
範囲を選択して、左揃えとかできる
左サイドバーから、componentを利用できる
コンポーネントを上下左右 fixedすることができる
チュートリアル2
テキストのコントラストチェック
コントラストチェッカーがある。
テキスト
resize containerで折返し
コンポーネントの作成
Move Componentでコンポーネント化
effect
影
スマホプレゼンテーションが可能
チュートリアル3
https://help.figma.com/hc/en-us/articles/4405337257751
プロトタイプ
コネクション
ダブルクリックでアクションが可能
アニメーション
そのアクションにフェードなどをつけられる
コンポーネントにコメントを付けられる
他学習サイト
UI/UXデザインツール『Figma』入門 | chot.design
オブジェクトのマスク
https://chot.design/figma-beginner/1a5ccc19257b/
ガイド線の表示
https://chot.design/figma-beginner/ca392da240bb/