Figmaデザイン制作メモ – 知っておくと役立つポイント集

この記事は、Figmaで制作する中でのつまづきや気づき、そしてFigma初心者の方からよく質問される内容をまとめた、私自身の備忘録です。

誰かの「困った」を解決するきっかけになればと思い、これまで個人的に残していたメモを公開用としてまとめていくことにしました。

あくまで個人のメモのため、記事として多少粗い部分もあるかもしれませんが、ご了承ください。

Figmaで文字数に合わせて下線を自動で伸ばす方法

Figmaではオートレイアウト機能を使うことで、文字の増減に合わせて下線を自動で伸縮させることができます。
この方法を使えば、サンプル画像のような蛍光ペン風の下線や、リンク線のようなシンプルな下線も簡単に作れます。手順は以下の通りです。

1. テキストをオートレイアウト（Shift＋A）する
2. 左パネルで両サイドのパディングのみ［0］に設定
   上下のパディングはデフォルトの［10］のままでOK
3. 左パネルの［線］の［＋］アイコンから線を追加する
4. 左下にある［個々の線］アイコンから［下］を選択
5. 好みの色と線の太さに調整する。
   ・蛍光ペン風にしたい場合は線を太くする
   ・シンプルな下線にしたい場合は線を細くする

上記の方法でサンプル画像のような見た目の下線ができます。
パディングのサイズ感や有無は好みで調整してみてください。
特にこのオートレイアウト化は、プレゼン資料などのテンプレ作りに重宝するので、覚えておくと作業がスムーズにいって気持ちよくなれますよ笑

動画解説追加しました ▼

Figmaで写真にモザイク加工をする方法

Figmaでプラグインなしの標準機能のみで、写真にモザイク加工をする手順は下記になります。

1. 楕円を用意し、塗りを［20％］の透過に設定
2. 左パネルの［エフェクト］から［背景のぼかし］を選択
3. エフェクトの設定アイコンをクリックし、「ユニフォーム」で「ぼかし」を［10］に設定
4. ［エフェクト］の［＋］から［レイヤーブラー］を追加
5. エフェクトの設定アイコンをクリックし［ユニフォーム］で［ぼかし］［10］に設定

これで、サンプル画像のようなモザイク加工をプラグインなしでFigmaで制作できます。

楕円の色はデフォルトの「#D9D9D9」で整うことが多いですが、写真の色味によっては白や黒などに変更したほうが効果が出やすい場合があります。
うまくぼかしが反映されないときは、楕円の色をいくつか試して調整してみてください。

Figmaでフレーム名を自動でナンバリングする方法

Figmaでフレームを複製したときに、自動で「thumbnail 1」「thumbnail 2」…のように番号を振りたいのに、うまく増えてくれないという方へ。

ポイントは1つだけ。
フレーム名の末尾に［半角スペース＋半角数字］を入れておくこと。
これだけで複製時に数字が自動でカウントアップされます。

半角スペースなしに半角数字だけを入れている場合は増えないので、手前の半角スペースを忘れずに入れておきましょう。

Figmaで「もっと見る」の動作をプロトタイプで再現したい場合

1. 閉じているバージョンと開いてるバージョンを制作
   この時アートボードは同じ名前にする
2. もっと見るボタンに開いてるバージョンの線を繋ぐ
3. スマートアニメを選択
4. 完了

Figmaでテクスチャ画像をパターンとして使用する方法

1. テクスチャ画像をFigmaに配置
2. 右パネル［塗り］にある［画像］→［塗り］になっているプルダウンを［タイル］へ変更
3. ［％］を設定するボックスが出現するので好みのサイズ感に変更
4. 完了

Figmaでパターンをフレームに合わせて伸縮させる方法

上記のやり方だとフレーム全体の背景として使いたい場合、フレームが伸びるたびに背景を手動で伸ばさないといけなくなるので少し手間。
そこで、フレームの伸縮に合わせて、背景も伸縮させる方法は下記

［フレーム］の右パネルの［塗り］→［画像アイコン］→使用したいテクスチャ画像を入れて上記の手順を行うと伸縮するパターン背景の完成

もし複数のフレームに同じテクスチャを使いたい場合は、スタイル登録をしておくと便利です。
右パネルの［塗り］にある［画像］→［＋］からスタイルを作成しておけば、他のフレームにもワンクリックで同じ設定を適用できます。

Figmaで画像を書き出すときに保存先のフォルダを事前に指定する方法

フレーム名を「フォルダ名/ファイル名」とすると、上記画像のように自動でフォルダが生成されます。