2018.04.20

Webデザイン

Figmaの新規ドキュメント&フレーム作成方法

Figmaの新規ドキュメント&フレーム作成方法のアイキャッチ画像

今回は「Figma」でデザインするためのベースとなる、新規ドキュメント作成方法について書いていきたいと思います。

Figmaとはなんぞや?という方は以前書いた記事をお読み下さい。

1.まずはサインインする

figmaのトップ画面

Figmaはインターネットブラウザを使用するデザインアプリです。まずはサインイン(アカウント登録がまだの時はまずアカウント登録しましょう!)をしましょう。

2.New Fileを作成する

figmaのニューファイル作成画面

Figmaにログインすると上記の画面(Draftsって言います)になります。左上にある「+」ボタン、もしくはサムネール上にある「+ New Flie」の領域をクリックしましょう。

3.フレームを作成する

figmaのフレーム作成画面

New Fileを作成すると上記の画面になります。次は左上にある「井(Frame Tool)」のフレームメニューをクリックしデザイン制作をするPhotoshopでいう「キャンバス」を作成します。

「井(Frame Tool)」をクリックすると右側のメニューが切り替わり、デフォルトでiPhoneやSurface Proなど様々なフレームメニューが出てきます。もちろん任意でフレームを作成することも可能です。

figmaのフレーム任意作成画面

その時は、「井(Frame Tool)」メニューをクリックしたのち、ドキュメント内どこでも良いのでクリックすれば100px×100pxの矩形が作成されますので、 右側にあるメニューからフレームのWidth(横幅)とHight(高さ)の数値を入力し、フレームの大きさを決めましょう。

figmaのドキュメント画面

これでデザインのベースとなるドキュメントが完成しました。後はこのフレーム内で作業を行っていきます。

ドキュメントを消しても大丈夫

figmaのdeleted画面

Figmaはドキュメントを削除しても「Deleted Files」にキャッシュされています。復帰させたい場合はドキュメントサムネールの右下メニューから「Restore」を選択すれば「Draft」内にドキュメントが復帰表示されます。安心ですね。

最後に

Photoshopと比較すると、新規ドキュメント作成はひとつ手間がありますがすぐに慣れると思います。

Figmaはオートセーブ機能が標準搭載されているので、万が一ブラウザが強制終了してしまっても大丈夫なのが嬉しいです。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する