今回やりたい事_説明
- figmaって使ったことないけど基本が知りたい。
- figmaでwebサイト制作のワイヤフレームを作成したい。
- figmaでプラグインを利用したい。
今回の記事が参考になる方
- figmaはまったく利用した事がない人
- デザイナーではない人。
- webページのワイヤー（ラフ）作成はもっぱらExcel利用中の人。
▼環境案内▼
PC：Windows OS 10（非エンジニアなので細かいことは書かない。）
figma：無料プラン（すでにアカウント作成済み）
Excel：Excel2016
NETWORK：普通に自宅のWi-fi か 会社有線LAN環境
１．figmaのダウンロード
こちらの公式サイトへアクセス
https://www.figma.com/ja/downloads/
▼ 「Windows用デスクトップアプリ」 を選択
▼ここで念のため、ページが日本語でない時にはこの選択で日本語に切り替えてくださいね。
▼ 自分のPCで任意フォルダ にexeファイルをダウンロードする
２．figmaのセットアップ
▼ FigmaSetup.exe をダブルクリックする
▼ FigmaSetuo.exe をダブルクリックする
figmaアカウントをすでに所持している方は
「Log in with browser」を選択してください。
figmaアカウントをまだ所持していない方は
「No account? Create one」を選択してください。(アカウント作成は省きます。悪しからず。)
３．figmaの利用_フレームを準備する
▼ Figmaを起動させて、デザインファイルを新規作成 を選択する
▼ 無題→名前を付ける（今回はTEST_20220822とする）
▼ ＃アイコンを選択してフレームを選択する
＃＞フレームの選択。画面右にデザインフレームが表示される
今回は以下を選択してみる
▼スマホ＞iPhone 13/13Pro
▼デスクトップ＞デスクトップ
ここまでで基本は終了です。
あとは図形を入れたり、テキストを入れたり、画像をコピペで挿入して作成してみてください。
一つだけレイヤーについてTipsです。
２つの図形を重ねたいけれど、単純に重ねても図形の前後関係は選択できないです。具体的にはこの２つ図形があるとして丸の図形を四角の図形に重ねてもダメです。
↓
こうじゃーーーないんだよーーー状態
↓
修正は非常に簡単です。「Rectangle 1」と「Ellipse 1」の位置を上下変更するだけです。
４．figmaのプラグインを利用してwebページのワイヤー（ラフ）作成を簡易にやってしまう。
先にお伝えします。方法はコチラだけではありません。
個人的に一番簡易だと思うのでその点だけ悪しからず
▼ まずはプラグインをインストール。「Figma to HTML,CSS,React&more!」です。長い。。
▼ Importタブを選択して「URL to import」に参考にしたいURLを入れる。そしてImport to Figmaを選択する
そ、そ、そうしますと。。。なんとですね、、、あら不思議。多少は崩れもありますがFrameを取り込めちゃいました。
魔法かよ！
さっきのプラグインで「Viewport Width」部分でスマホのようなアイコンを選択してからImport to Figmaを選択するとスマホ版だってFrameとして取り込めちゃう。はい奇跡！
私は2022年前半でこれが一番驚きでした。ほんと助かる。さよならExcelのWFっと思いましたね。
このあとは色んなものをパクッてWF作成してみてくださいませ。
ここでまたまたワンポイントです。
初期の頃、Figmaで「拡大・縮小」と「画面の移動」が分からず悩んでました。でもこの操作で解決したので紹介です。
まず、「拡大・縮小」はキーボードのCtrl ＋ マウスのホイール進める、後退する。 このExcelと同じ操作で「拡大・縮小」可能です。
そしてもう一つ画面移動です。自分の画面中央にframeを移動したいのですが、この操作がわからないとうまくできないと思います。これも超簡単です。
こちらはキーボードのspaceを押下しながら ＋ マウス右クリック押下しながら移動です。これを行えば自由に移動できますよ。
本当はもう少し説明したいのですが、今日はこれくらいで、別記事でプロトタイプの案内などを行いますね。
それでは～。