figma

初心者が「streamline」プラグインを使ってみる【figma】

ヨイカゲの主 — Mon, 17 Feb 2025 12:41:16 +0000

「streamline」とは
figmaとは
ダウンロード
「streamline」を使用してみる
まとめ

「streamline」とは

公式サイト→https://www.streamlinehq.com/

「streamline」とはfigmaのプラグインで、アイコン・イラスト・絵文字などを無料でダウンロードできます。さっそく使用していきます。

figmaとは

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

figmaとはWebサイト・スマートフォンのアプリのデザインに使用されるツールです。有名なものであれば、Photoshopなどがありますが「有料」です。figmaは「無料」で充分に使用できるのが特徴です。私は音楽など月額で加入しているもの（...

ダウンロード

step1
検索窓に「streamline」と入力
「♢〇□＋」のボタンをクリックし、検索窓に「streamline」と入力します。
step2
実行ボタンをクリック。
検索で出てきた「streamline」をクリックすると、「streamline」の画面が出てきますので、右下にある実行ボタンを押下。
step3
完了。
figma上に「streamline」が出現しました。

「streamline」を使用してみる

WordPressのアイコンを検索してみる

「Wordpress」のアイコンを検索

上部のタブが「Icon」になっていることを確認し、検索窓に「Wordpress」と入力します。

かわいいアイコンが沢山出てきました。

イラストを検索してみる

汎用性の高い「白黒のイラスト」や、「カラーのかわいいイラスト」などアイテムが豊富で嬉しいですね。

要素・物体を検索してみる

これが無料で？使えそうですね。

絵文字を検索してみる

かわいい絵文字。絶対使う！

まとめ

課金をするとより多くのイラストにアクセスできるようですが、私は「できるだけお金をかけないで」figmaを楽しんでみます。ですが、無料でも「Elements」やイラストがあって検索しやすいのも魅力です。

初心者が「oblique」プラグインを使ってみる【figma】

ヨイカゲの主 — Sun, 16 Feb 2025 10:45:26 +0000

「oblique」とは
figmaとは
ダウンロード
「oblique」を使用してみる
まとめ

「oblique」とは

「oblique」とはfigmaのプラグインで、図形・文字に影をつけることによって、対象を立体的に見せることができます。影の長さ・角度も調整できます。

figmaとは

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

ダウンロード

step1
検索窓に「oblique」と入力
「♢〇□＋」のボタンをクリックし、検索窓に「oblique」と入力します。
step2
実行ボタンをクリック
検索で出てきた「oblique」をクリックすると、「oblique」の画面が出てきますので、右下にある実行ボタンを押下。
step3
完了
「oblique」が使用できる状態になりました。

「oblique」を使用してみる

フレームから「長方形」を選択し、塗りは「4C68C5」、線は「太さ5」「角の半径50」にします。

テキストから長方形という意味の「rectangle」を追加します。

「oblique」を使用するための「素材」を用意します。ここではフレームツールの「長方形」と「テキスト」を素材とします。

簡単な設定をしてみる

step1
長方形に奥行を出してみる。
「長方形」をクリックし、「oblique」を起動する。
step2
簡単な設定をして「project」をクリック。
黒丸の右隣りに「チェック」を入れて、「project」を実行します。
step3
完成。
長方形が立体的になりました。

奥行を長くしてみる

step1
奥行を「30」に設定します。
デフォルトで「10」だった奥行を「30」に設定して、塗りつぶしにチェックを入れて「project」をクリックします。
step2
完成。
先ほどより奥行がレベルアップしました。

角度を変えてみる

角度「235」※影が左・上に付く

step1
角度を「235」にしてみる。
デフォルトで「135」だった角度を「235」にして塗りつぶしにチェックを入れて「project」をクリックします。
step2
完成。
影が左・上に付くようになりました。

角度「335」※影が上・右に付く

step1
角度を「335」にしてみる。
デフォルトで「135」だった角度を「335」にして塗りつぶしにチェックを入れて「project」をクリックします。
step2
完成。
影が上・右に付くようになりました。

角度「435」※影が下・右に付く

step1
角度を「435」にしてみる。
デフォルトで「135」だった角度を「435」にして塗りつぶしにチェックを入れて「project」をクリックします。
step2
完成。
影が下・右に付くようになりました。

文字に影を付けてみる

塗りつぶしを「黒」にしたイメージ

まとめ

素晴らしいプラグインでした。初心者の私はまだここまでですが、使いこなせば幅が広がりますね。

初心者がヘッダーで「オートレイアウト」を使用してみる【figma】

ヨイカゲの主 — Sun, 09 Feb 2025 09:26:21 +0000

figmaとは
オートレイアウトの機能
オートレイアウトの良さ
オートレイアウトでヘッダー作成
背景色・要素内余白（パディング）設定
- ハンドルについて
- 配置について
まとめ

figmaとは

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

オートレイアウトの機能

要素の周りの余白（パディング）を設定できる機能
中身の要素間の余白・並び方を設定できる機能

オートレイアウトの機能として、要素の周りの余白（パディング）を設定できる機能と、中身の要素間の余白・並び方を設定できる機能があります。

整列・配置の間隔調整を自動（オート）で行ってくれます。

オートレイアウトの良さ

中身の文字数が変化してもレイアウトが維持されるので、ボタン・ヘッダー・フッターその他レイアウトに使用するときに便利です。

また、場合によっては折り返ししてくれるので、レスポンシブデザインも簡単に作成しやすいのがメリットです。

オートレイアウトでヘッダー作成

step1
ヘッダーを作成。
テキストツールなどを使用して好みのヘッダーを作成します。
step2
オートレイアウトを追加。
左側のロゴを外して、ナビゲーションメニューを全て選択します。「右クリック」から「オートレイアウトを追加」を選択します。
step3
ナビゲーションのレイアウトが変化。
ナビのレイアウトが変化しましたが、よくみると要素間の幅が310に設定されているようです。
step4
デザインパネルから間隔を調整。
右サイドバーにある「間隔」から、「自動」を選択します。
step5
ナビゲーションが美しく整列。
ナビが美しく整列しましたが、ロゴとのバランス調整が必要です。
step6
ヘッダー全てを選択して「オートレイアウトを追加」
ロゴ・ナビゲーションを含む全てを選択して「右クリック」→「オートレイアウトを追加」を選択します。
step7
完成。
美しいヘッダーが完成しました。

背景色・要素内余白（パディング）設定

デザインパレットの「塗り」を#68F2cbにして、オートレイアウトの「パディング・左右の間隔」を調整します。

ハンドルについて

オートレイアウトの「パディング・左右の間隔」は、画面上に出てくるハンドルをドラックすることでより簡単に操作することもできます。

配置について

現在の配置は「中央寄せ」になっていますが、「右寄せ」「上寄せ」など配置を調整することもできます。

まとめ

ヘッダーを作成するときは、オートレイアウトできまりですね。

初心者が「コンポーネント機能」を使用してみる【figma】

ヨイカゲの主 — Sun, 09 Feb 2025 09:24:41 +0000

figmaについて
コンポーネントとは
インスタンスを使いまわそう
コンポーネントを作成
コンポーネントを削除
コンポーネントを探す
バリアントとは
- バリアントを登録
まとめ

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

コンポーネントとは

ひとまとまりのパーツを登録して、再利用するテンプレートです。ボタン・ヘッダー・フッターなど同じパーツを使いまわす場合や、似たようなパーツを使いまわすときに使用します。

インスタンスを使いまわそう

コンポーネントはおおもとの部分で、コンポーネントを変更するとインスタンスも変更されます。

インスタンスに変更を加えても、他のインスタンス・コンポーネントには影響がありません。

コンポーネントを作成

step1
コンポーネントを用意
ここでは「かわいい星型のアイテム」にします。
step2
コンポーネントを作成をクリック。
右クリックで、「コンポーネントを作成」を選択します。
step3
アセットパネルに出現。
レイヤーパネルの文字が紫になり、アセットパネルにコンポーネントが出現します。
step4
インスタンスを挿入
アセットパネルから選択すると、インスタンスを挿入の画面が出てくるのでクリックすればインスタンスが作成されます。

コンポーネントを削除

コンポーネントを削除する場合は、コンポーネントを選択後「delate」するだけで削除できます。

コンポーネントを探す

コンポーネントを探すときは、インスタンスを選択した状態でデザインパネルの「このファイルから」をクリックすると見つかります。

バリアントとは

コンポーネントと色・形など似ているバリエーションを登録することができます。

バリアントを登録

step1
「バリアントの追加」を選択。
コンポーネントを右クリックして「バリアントの追加」をクリックします。
※メインコンポーネントとなっていますが、コンポーネントとのことです。
step2
バリアントを作成。
コンポーネントの近くに作業スペースができるので、ここでは色・数字を変えて作成します。
step3
アセットパネルに出現。
左側のサイドバーにある「アセットパネル」にバリアントが追加されました。
step4
デフォルトのインスタンス、バリアントのインスタンスを挿入。
クリックで量産できます。

まとめ

サイトを制作する時間を大幅に短縮できて、大規模サイトには便利な機能ですね。

初心者が「スタイル機能」を使いまわししてみる【figma】

ヨイカゲの主 — Wed, 05 Feb 2025 12:05:55 +0000

figmaについて
スタイルとは
スタイルの種類
スタイルを登録
- カラーコードを登録
- 登録したカラーを呼び出す
まとめ

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

スタイルとは

スタイルとは「色」「フォント」などの値です。白色は「♯fff」などのカラーコードを用いて表記します。気に入った色など複雑になるので、またもう一度設定するのは手間・時間がかかります。

figmaの「スタイル機能」を使用して使いまわしましょう。

スタイルの種類

カラー	テキスト	エフェクト	グリッド
色	フォントの種類太さサイズ	ドロップシャドウなど	レイアウトグリッドを登録できるスタイル

使いまわしできるスタイルの種類は、カラー・テキスト・エフェクト・グリッドです。

スタイルを登録

カラーコードを登録

カラーコードのスタイルを登録してみます。

step1
登録する色を用意。
ここでは「＃FBD115」の色を使用します。
step2
スタイルを適用を選択。
右サイドバーにある「塗り」の4つの〇があるアイコンをクリックします。
step3
スタイル・バリアブルを選択。
プラスマークをクリックします。
step4
スタイルの作成。
名前に任意の名前（ここではyellow）と入力し、「スタイルの作成」をクリックで完了です。※説明は空欄可

登録したカラーを呼び出す

登録したカラーコードを呼び出すときは、「塗り」の横の「4つの〇のアイコン」をクリックすると、登録したカラーコードが出てくるので選択すればOKです。

登録したカラーコードの右側のつまみをクリックすると、編集をすることができます。

まとめ

よく使う色・フォントなどを登録しておくと、デザイン制作がスムーズに進んだり統一感が出たりと、良いことづくめですね。

初心者が「ボタン」を作成する【figma】

ヨイカゲの主 — Wed, 05 Feb 2025 12:02:34 +0000

figmaについて
ボタンを作成

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

ボタンを作成

シンプルなボタン

シンプルなボタンを作成していきます。

余白（横90・上下30）、角丸（30）、線の太さ（5）

step1
テキスト→「オートレイアウト」
テキストツールで「ボタン」と入力します。その後右クリックで「オートレイアウトを追加」を選択。
※オートレイアウトを追加することで、ボタンが伸び縮みしても文字が柔軟に動いてくれます。
step2
テキストの周りの余白（パディング）を設定。
パディングでは、ボタンの周りの余白を設定できます。ここでは左右90・上下30とします。
step3
背景色・外枠を設定。
背景色は白色（＃fff）、線の色は黒色（＃000）で太さは「5」にします。
step4
角丸にする。
外側の枠を角丸にします。
Step5
完成しました。

立体的なボタン

影があるようなデザインにもできます。

背景色（#FFF103）、下線（#A89F02・太さ10）、角丸（30）

アイコンを使用

アイコンのプラグインを使用して、アイコンを付けることもできます。

アイコンのプラグインについてはこちらから↓

初心者が「iconify」プラグインを使ってみる【figma】

「iconify」プラグインとは公式サイト：「iconify」とはfigmaのプラグインで、ダウンロード前の準備ここではfigmaのアプリを使用した説明になります。figmaとは？をまとめています↓ダウンロードstep1検索窓に「iconi...

初心者が「要素をまとめる機能としてのフレーム化」をしてみる【figma】

ヨイカゲの主 — Tue, 04 Feb 2025 06:57:07 +0000

figmaについて
フレーム化
まとめ

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

フレーム化

フレームの機能として「デザインのサイズを定義をする」以外に、「複数の要素をまとめる」フレーム化が便利らしいので、使用してみます。

グループ化の違い

要素をまとめるのに使用する「グループ化」もありますが、画像・長方形を拡大縮小したときの挙動が違います。

フレーム化（拡大縮小時）

拡大しない

グループ化（拡大縮小時）

拡大される

その他の違いをまとめてみました。

	フレーム化	グループ化
拡大縮小	拡大しない	拡大される
単体OK（子要素なし）	〇	×
オートレイアウトの適用	〇	×
背景色・padding設定	〇（子要素がある場合）	×
Windowsのショートカット	ctr + alt + g	ctl + g

※フレームからグループに切り替える場合
設定した「背景色・padding」も消えてしまうので注意

フレーム化をしてみる

step1
フレーム化。
「かわいい猫ちゃんの画像」とテキストを「フレーム化」します。
step2
フレーム化を実行。
フレーム化したい要素を選択して、右クリックで「選択範囲のフレーム化」を選択します。
step3
完成。
選択した範囲が、一体化しました。

背景色

好きな色を指定すると、要素全体に「背景色」を設定することができました。

まとめ

グループ化ではなく、フレーム化にすると背景色が付いた状態で「エクスポート」できますね。

画像のエクスポートについて【figma】

ヨイカゲの主 — Tue, 04 Feb 2025 06:50:34 +0000

figmaについて
画像のエクスポート
- 画像のフォーマット
- スマホ用画像注意点
まとめ

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

画像のエクスポート

画像を保存したい場合は、右側のサイドバーの「エクスポート」から可能です。

figmaでは、レイヤー・グループ・フレームなどを画像として保存することができます。

画像のフォーマット

画像のフォーマットとは、画像の種類のことです。用途に合わせて使用していくことになります。

	PNG	JPEG	SVG	PDF
用途	透過が必要な写真・イラスト	写真	ロゴ・アイコン	プレゼンテーション資料
透過	〇	×	〇	×

PNG・・・透過が必要な写真・イラストに使用されます。

JPEG・・・写真に使用されます。

SVG・・・ロゴ・アイコンに使用されます。

PDF・・・プレゼンテーション資料に使用されます。

スマホ用画像注意点

1x・・・等倍の画像の解像度

2x・・・２倍の画像の解像度

スマホ用の画像は、画像密度が2倍以上になるような解像度が望ましいです。

まとめ

私は画像をエクスポートして、「squoosh」で「WebP」というWordpressでおすすめと言われているフォーマットに変換して使用しています。

WebP

Googleが開発した画像ファイル形式。JPEG・PNGと比べて圧縮率が高く、画像をほぼ損なわずにファイルサイズを小さくすることができます。

「WebP」に変換する方法は、figmaのプラグインからでも可能です。

figmaでの画像の扱い

ヨイカゲの主 — Tue, 04 Feb 2025 02:56:50 +0000

figmaについて
画像の挿入
縦横比を保ったまま
画像補正

figmaについて

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

画像の挿入

ドラック＆ドロップで挿入

figmaのキャンバス内に、画像ファイルをドラック＆ドロップで簡単に挿入できます。

背景画像として読み込む

長方形・円を利用して、背景画像として画像を読み込むこともできます。

step1
長方形を選択。
シェイプツールから「長方形」を選択します。
step2
「塗り」→「背景画像」
長方形を画面に出してから、「塗り」を選択してカスタムから「背景画像」をクリックします。
step3
好きな画像をアップロード。
パソコンから自分の好きな画像をアップロードします。
step4
完成。
長方形に癒しの画像がはめ込まれました。

図形・背景画像の「拡大」について

長方形の範囲の中で、長方形の範囲を埋めるように画像が拡大・縮小されます。

範囲に入りきらない部分は非表示になります。

図形・背景画像の「サイズに合わせて調整」について

長方形の範囲の中で、画像のすべてが表示されるように拡大・縮小されます。

図形・背景画像の「トリミング」について

バウンディングボックスが表示され、トリミングを実行できます。

図形・背景画像の「タイル」について

長方形の中に画像というタイルをしきつめたような状態の画像を作成できます。「％」で、倍率の変更もできます。

縦横比を保ったまま

拡大・縮小する際に、縦横比を保つ方法は「 shift 」を押したまま「辺・頂点」を操作します。

画像補正

つまみを操作すると、補正効果を追加することができます。

初心者が「Blobs」プラグインを使ってみる【figma】

ヨイカゲの主 — Sat, 01 Feb 2025 07:08:00 +0000

「Blobs」とは
figmaとは
ダウンロード
「Blobs」を使用してみる
- かわいい猫ちゃんとコラボ
- カラフルな液体シェイプ
まとめ

「Blobs」とは

「Blobs」とはfigmaのプラグインで、液体シェイプのような有機的シェイプを作成できます。

figmaとは

ここではfigmaのアプリを使用した説明になります。

figmaとは？をまとめています↓

figmaとは「初心者がfigmaをはじめる準備をする」

ダウンロード

step1
検索窓に「Blobs」と入力
「♢〇□＋」のボタンをクリックし、検索窓に「Blobs」と入力します。
step2
実行ボタンをクリック
検索で出てきた「Blobs」をクリックすると、「Blobs」の画面が出てきますので、右下にある実行ボタンを押下。
step3
バーを調節して、「Insert」
「complexity」と「Uniqueness」のバーを調節して「Insert」を押すと液体シェイプのできあがりです。

「Blobs」を使用してみる

かわいい猫ちゃんとコラボ

有機的な液体シェイプの中に、猫ちゃんを入れてみました。

カラフルな液体シェイプ

カラフルで、様々な形の液体シェイプが出来上がりました。

まとめ

無料で簡単に液体シェイプを作成できるので、おすすめです。