WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

「Figmaを開いたのだけど、何をしていいのかわからない」

そう感じたことはありませんか？結局どこに何があって何をすればいいの？と思いつつ何もできず、そっとブラウザを閉じる――そんな経験、ありませんか？

今の時代、巷にあふれる解説動画をみればわからなくもないですが、本当の初心者はその内容ですら理解しづらい場合があります。

そこで今回は、初心者のあなたに向けて、本当に初歩的な最初の一歩をやさしく案内します。

デザインファイルをつくる

最初の画面からデザインファイルをつくりましょう。

若干の違いがあるかもしれませんが起動時の画面です。

画面左のドラフトをクリックすると一番上に「デザイン」が出てきます。こちらをクリックしましょう。

ちなみに Drafts（ドラフト）とは個人用スペースで他の人には見えないファイルが置いてある場所です。初心者はまずDraftsから始めればOKです！

Teams（チーム）とは他の人と共有・共同作業するためのスペースです。チームを作ると、そこにプロジェクトやファイルを整理して置けます。会社やプロジェクトごとに管理するイメージです。

次は作業するスペースをつくりましょう。画面真ん中の何も置かれていないうすいグレー部分を「キャンバス」と言います。画面中央下にある矢印などが並んだツールバーの左から2つ目の「フレーム」をクリックしてください。

こちらが「フレーム」になります。今は何となく文字や写真を置くボードみたいなものと考えてください。

画面にマウスを持ってくると小さな四角が出てきます。

四角の右下を伸ばすとサイズが大きくなります。

サイズは、右のサイドバーにある各設定部分から「サイズ」にある数値を入力すれば変更できます。

今回は1920と900に変更します。

サイズが変更できました。

文字を打つ

続いて文字を打ってみましょう。

画面下のツールバーから「テキスト」を選択します。

画面をクリックすると短いタテの線が現れます。

テキストを入力しましょう。テキストはそのままだと小さく表示されてみづらいですよね。
左ツールバーの最上部にある「50％」をクリックし100％など数値を入力します。

テキストのサイズを変えましょう。文字を2回クリックして文字全体が青背景で囲まれる状態にします。
クリックの回数ごとに1→2→3と変化します。このとき連打気味にすると良いです。

左のツールバーにある「タイポグラフィ」にある「Inter」の下にある「12」がサイズをあらわす数値です。
※ちなみに初期設定は、Interと書体のRegularという太さで、12ポイントのサイズになっています。

画面にマテキストのサイズを96ポイントにしました。

背景を付ける

最後に背景をつけましょう。

画面下にあるツールバーの左から3つ目から四角いマークをクリックしてください。
すると長方形や線など図形が選べるようにあります。今回は一番上の「長方形」を選択します。

何もない場所をクリックすると小さな四角が出てきます。これを 1 の「フレーム」と同じ要領で右下に伸ばしてください。

テキストが隠れてしまったので、作った四角の上にマウスを持ってきて右クリックをしましょう。
上から7つ目の「再背面に移動」を選んで左クリックしてください。テキストが前面に表示されます。

テキストをマウスで選んで移動させましょう。天地や左右で中央に来るとオレンジ色の線が表示されます。

ついでに色も変えましょう。背景を選択したまま右のサイドバーにある「塗り」の下にある色の情報部分をクリックします。「D9D9D9」の左にあるグレーの四角を選択すると色が変えられるグラデーションのあるウインドウが表示されます。
今回は赤に変えたいので右上に白フチの円を移動してください。

赤い背景に変わりました。

フチの色も変えてみましょう。先程の「塗り」の下にある「線」から色が変えられます。
「塗り」と同様に色を選びましょう。ついでに線の太さも変えましょう。線の右下にある「太さ」の欄で変えられます。ここでは「10ポイント」にしました。

サイズの最後にテキストも同様に変えましょう。

まとめ

いかがだったでしょうか。

FigmaはAdobeのIllustratorやPhotoshopとは違いブラウザで操作できる画期的なツールであるため特別にソフトを購入しなくても使える便利なツールです。

ホームページ制作においては、AdobeのXDにとってかわるだけでなく、多機能で巨大化したIllustratorやPhotoshopなどと比べて始めやすいアプリケーションという印象があります。

この記事がインストールしてみたはいいけど、何から始めればいいのかわからない貴方のお役にたてたらうれしいです。