つい先日知り合いのエンジニアが新サービス作るんだ〜ってFigmaを開いてワイヤーを作ってたんですが、初めて触るFigmaで一から四角作ってテキスト入れてって結構大変ですよね！
そこで、今回は超初心者でも簡単にワイヤーが作れるってことを紹介したいと思います！
1.アカウント作成
アカウントの作成からファイルの準備まで
メールの認証をしてアカウント名を設定
質問に数問回答してプラン選択
最初は何も考えずFreeでOK!
どのツールから始めるか
最初はとりあえずFigmaでOK！
Figma basic（サンプルファイル）が開く
2.フレーム作成
1の最後で作成されたFigma basicのファイルにページを追加して、画面の背景となるフレームを作成します
ページの追加
サイドメニューの上部のページ名が記載されている[Figma B...∨]をクリックすると、pagesセクションが表示されるので、[+ボタン]クリックでページを追加
追加されたページ
フレームの作成
簡単なので、今回はアセットからフレーム作成します
ヘッダーの[＃]をクリックするとデザインパネルにフレームのアセットが表示されるので、
作成したいサイズを選択
端末名とサイズが記載されているので分かりやすい！
3.UI Kit紹介
UI Kit：フォントやカラー、アイコン、UIコンポーネントなどのアセットが纏まっているファイルのこと
FigmaのUI Kitはコミュニティーから検索すると、その場でファイルを確認できます
例えば、MUIで調べると複数表示されるので、使いやすそうなものを選択
※公式が出しているKitもあれば有志のユーザーが更新して公開しているKitもあるので用途に合わせて複数確認してみるのをお勧めします！
気になるサムネイルをクリックし、[Open in Figma]のボタンをクリックすると下書きとして自身のDraftsにファイルがコピーされます
UI Kitで調べると複数のフレームワークのKitを確認できます
作りたいプロダクトのフレームワークに合うUI Kitを探してみてください！
UI Kitの活用
先程確認したMUIのUI Kitから使用したいパーツをコピーして、2で作成した[Figma basic]のフレームに必要なUIパーツを配置すると簡単に画面の作成が可能です！
他のパーツを組み合わせたりテキストを変更したりするとログイン画面のワイヤーができたりとイメージ共有したいときにサクッと作成できます！
UI Kitの種類は拘らないという方！
そんな方には、サイドメニューのAssetsタブを開いてlibraryからUI Kitを選択するとAsset
に追加されます
Assetからフレームへのパーツ追加はAssets内のパーツをダブルクリックまたはドラッグ＆ドロップで画面に追加できます
4.便利なplugin
material symbols
Tailwind color generator
5.言語設定・ショートカット
Figmaの表示言語変更
言語は英語と日本語の切り替えができるので、使いやすい方で
ショートカットキー
ワイヤーだとオブジェクトを複数作ると思うので、簡単なショートカットキーは覚えてしまっても良いと思います！
主なトピック：Nuxt.js, Vue.js, TypeScript, AWS, Amplify, OpenSearch, ServerlessFramework, Quasar, Tailwind CSS, UIUX, プロダクト開発, スタートアップ
Discussion