Figmaデザインでイラストを作成する

このプロジェクトでは、Figmaデザインで魔法薬のイラストを作成します。イラストの作成は、Figmaのエディターやツールの使い方を楽しく学べる良い方法です。イラストを作成したことがなくても大丈夫。基本的なシェイプやグループ、色、フレームの使い方をわかりやすく説明します。また、レイヤーの構造がデザインに与える影響についても学びます。

手順通りに操作していくと、最終的なイラストは次のようになります。

以下の手順で魔法薬を作成していきます。

1. ボトルを作成する
2. ボトルに魔法薬を注ぐ
3. コルクで蓋をする
4. 細かい点を仕上げる
5. (オプション)デザインをフレームに追加してエクスポートする

ボトルを作成する

ボトルの作成には、楕円ツール、長方形ツール、グループを使用します。

シェイプを追加する

シェイプツールはツールバーにあります。 矢印をクリックすると、他のシェイプオプションが表示されます。

キャンバスに、1つの楕円と2つの長方形を追加します。

• 楕円を追加する: 楕円ツールを選択するか、[O]を押してキャンバスをクリックします
• 長方形を追加する: 長方形ツールを選択するか、[R]を押してキャンバスをクリックします

シェイプのサイズを変更する

次に、これらのビルディングブロックのサイズを変更します。オブジェクトのサイズを変更するには、ハンドルを選択してカーソルをドラッグするか、[デザイン]パネルの[幅]および[高さ]フィールドに希望する寸法を入力します。

いずれかの方法を使って、シェイプのサイズを次の寸法に変更します。

• 楕円: 200 W x 200 H
• 長方形1: 100 W x 100 H
• 長方形2: 120 W x 40 H

120 x 40の長方形では、ボトルの口が鋭角になりすぎないように、角を丸める必要があります。長方形を選択し、[デザイン]タブの [角の半径]フィールドに「10」と入力します。

シェイプを配置する

シェイプが揃ったので、ボトルに見えるように配置していきます。シェイプをクリックし、ドラッグしてキャンバス内で移動させます。オブジェクトを移動するときに、赤いガイドが表示されます。これは、オブジェクトをキャンバス上の他のオブジェクトに揃える目安になります。

次のようになるようにシェイプを配置します。

シェイプをグループ化する

ボトルの形ができてきました。先に進む前に、少し整理しておきましょう。左サイドバーの[レイヤー]パネルを見ると、各シェイプはそれぞれ別のレイヤーにあることがわかります。

これらのレイヤーを1つのグループにまとめたほうが、操作が簡単です。グループを使用すると、複数のレイヤーをまとめて、1つのオブジェクトのように扱うことができます。

複数のレイヤーをグループ化するには、レイヤーを選択して次のショートカットを使用します。

• macOS: Command + G
• Windows: Control + G

左サイドバーの[レイヤー]パネルには、「Group 1」という名前のレイヤーが1つだけ表示されるようになりました。Figmaで再理された状態を保つには、レイヤーに名前を付けるのも良い方法です。レイヤーをダブルクリックし、名前を「Bottle」に変更しましょう。

色を追加する

ボトルに色を付けましょう。ボトルを選択して右サイドバーの[塗り]設定をクリックすると、カラーピッカーが開きます。このチュートリアルでは、カラーコード#DEDCF9を使用します。[塗り]フィールドにこのコードを入力するか、カラーピッカーで別の色を選択してもかまいません。

塗りの色を変更したら、このレイヤーをロックします。レイヤーをロックしておけば、オブジェクトが誤って移動または変更されるのを防ぐことができます。このレイヤーをロックするには、ボトルシェイプを選択して左サイドバーの [ロック]アイコンをクリックします。レイヤーをロック解除するには、 [ロック解除]アイコンをクリックします。

ボトルが完成しました。次に、魔法薬を注ぎ入れましょう。

魔法薬を作成する

楕円を追加する

楕円ツールを使用してキャンバスに楕円を追加し、サイズを175 x 175に変更します。

楕円をボトルシェイプの上にドラッグし、赤いガイドを参考にして揃えます。前のセクションでボトルの色を変更した方法で、楕円の塗りの色を変更します。このプロジェクトでは、カラーコード#E99BF4を使用します。[塗り]フィールドにこのコードを入力するか、カラーピッカーで別の色を選択してもかまいません。

楕円を変更する

[オブジェクト編集]設定を使用して、ボトルの中の魔法薬が揺れているように見えるようにします。

楕円を選択し、ツールバーの [オブジェクト編集]をクリックしてベクター編集モードに切り替えます。ベクター編集モードでは、シェイプ全体を変えることなく、オブジェクトの個々の頂点を操作できます。

ベクター編集モードで楕円の一番上にある頂点をクリックし、下の方へドラッグして少し右に寄せます。わかりにくい場合は、次のGIFを参照してください。

魔法薬が希望通りの見た目になったら、ツールバーの[完了]をクリックしてベクター編集モードを終了します。次に、泡をいくつか追加しましょう。

楕円ツールで泡を追加する

このプロジェクトでは楕円ツールを多用します。今度は、これを使って魔法薬のボトルに泡をいくつか追加しましょう。

楕円ツールをドラッグして、小さな泡をいくつか作成します。すべて同じサイズにする必要はありませんが、ボトル内部に収まるぐらい小さなものにしてください。ここでは6 x 6と12 x 12の楕円の組み合わせを使用しています。先に進む前に、楕円の塗りをもう少し鮮やかな色に変更しておきましょう。私たちはカラーコード#985DF6を使用しました。

ボトル内に泡を配置したら、カーソルをドラッグしてすべての泡の楕円とより大きい魔法薬の楕円を選択し、次のショートカットを使用してグループ化します。

• macOS: Command + G
• Windows: Control + G

左サイドバーのすべての楕円レイヤーが、「Group 2」という名前の1つのレイヤーにまとめられました。このレイヤーの名前を「Potion」に変更し、 をクリックしてロックします。

コルクを作成する

長方形ツールでコルクを作成します。

キャンバスに長方形を追加し、サイズを75 x 75に変更します。[デザイン]タブの [角の半径]設定を使用して、長方形の角を25に丸めます。

長方形の塗りを#CE856Cに変更し、レイヤーの名前を「Cork」に変更します。これをボトルの口へドラッグします。

レイヤーを構造化する

コルクがボトルの上に見えていては困るので、左サイドバーでレイヤーを並べ替えます。レイヤーの順序は、キャンバス上のオブジェクトがどのように表示されるかを決定します。

「Cork」レイヤーを「Bottle」レイヤーの下に移動し、コルクの上の部分だけが表示されるようにしましょう。こうすると、コルクがボトルの中に入っているように見えます。「Cork」レイヤーを選択し、「Bottle」レイヤーの下にドラッグします。レイヤーを移動し終えたら、 をクリックしてロックします。

光の反射を追加する

魔法薬はほぼ完成です。あとは、光の反射を少し追加して華やかさを添えましょう。

キャンバスに長方形を2つ追加し、一方のサイズを20 x 10に、もう一方のサイズを40 x 10に変更します。[デザイン]タブの [角の半径]設定を使用して、両方の長方形の角を20に丸めます。

両方の長方形の塗りを#F2F2FFに変更します。それぞれをボトルの口に移動します。両方の長方形を選択し、次のショートカットを使用してグループ化します。

• macOS: Command + G
• Windows: Control + G

レイヤーの名前を「Glare」に変更してロックします。

(オプション)イラストをフレームに追加してエクスポートする

Figmaのイラストをエクスポートする場合は、複数のレイヤーを1つのフレームに追加できます。フレームは、Figmaの主なビルディングブロックの1つです。グループと同じように、フレームを使用すると、すべてのデザイン要素を1か所にまとめることができます。

ツールバーの フレームツールを使用して新しいフレームを追加し、その中へコンテンツをドラッグするか、既存のオブジェクトを直接選択してフレームに変換することができます。ここでは、2番目の方法をやってみましょう。

レイヤーをロック解除し、カーソルをドラッグしてすべてのオブジェクトを選択します。すべて選択できたら右クリックし、[選択範囲のフレーム化]を選択します。4つの個別のレイヤーが、「Frame 1」という名前の1つのレイヤーの下にネストされます。名前の横にある 矢印をクリックすると既存の名前付きのレイヤーが表示され、個々に選択して編集することもできます。新しいレイヤーの名前を「Magic Potion」に変更します。

イラストをエクスポートするには、「Magic Potion」レイヤーを選択し、右サイドバーの[エクスポート]設定を使用してデザインをエクスポートします。

次のステップ

おめでとうございます。基本的なシェイプをいくつか使っただけで、Figmaで魔法薬のイラストを作成できました。ほかのイラストにも挑戦してみたければ、下のクマのイラストを自分で作ってみてください。このイラストは、このプロジェクトで学んだのと同じツールを使用して作成されています。自分で完璧と思えるような作品ができたら、Figmaコミュニティに共有してください。

次のデザインを楽しみにしています!