Webデザインがちょっと楽になるFigmaDrawの機能

Gaji-Labo UI デザイナーの伊藤です。
まだ6月なのに暑いですね。本格的な夏が来たらどうなってしまうんでしょうか…怖くなってきたので考えるのをやめます。

今回は5月の Figma Config で発表された Figma Draw を触ってみた話をします。Figma Draw は、手書き感のある表現と、ベクター編集機能の強化によって Figma 上でイラストやビジュアル制作がしやすくなった点が推されています。実際に触ってみると、ビジュアル制作だけでなく、直接 Web デザイン制作に役立つ機能も追加されていたのでその機能に絞って紹介します。

1.作成したパターンをすぐさま適用できる「パターン塗り」

Figma 上で作成した図形をパターンにして適用できる機能です。

これまでパターン素材をデザインに適用する場合は以下のどちらかで対応していました。

1. 作成したパターンを画像として書き出し、画像をタイル塗りで適用。
2. コンポーネント化して AutoLayout で敷き詰める。

1.の場合、パターンを調整する際に書き出しと適用を繰り返す地味な手間がかかります。
2.の場合、修正箇所はコンポーネント１つで済みますが、繰り返す量やコンポーネント内の要素が増えるほど読み込みに影響が出ます。
パターン塗りはどちらの問題も解決できます。

• 作成したパターン内のパーツを調整すると、パターンを適用した全ての箇所にリアルタイムで反映されるため、都度の書き出し・適用作業が不要になります。これにより、パターンの調整・検討が格段にスムーズになります。
• 塗りのバリエーション機能なので、矩形やフレーム一つで完結できます。そのためデータが軽くなり、パフォーマンスへの影響を抑えられます。

Webデザインでのパターン塗り利用する際に気をつけたいこと

パターン塗りを Web デザインで使う場合、背景での利用が主なのでCSSの background-image プロパティで再現する必要があります。

2025年6月現在、background-image で再現ができない設定は以下の通りです

• タイルタイプ「六角形」を選択して配置
• パターン同士の間隔を指定する

この並び方で表示したい場合、タイルタイプを長方形にした状態で同じ見た目になるように調整します。

タイルタイプを六角形にした時の見た目にしたい

1. パターンにしたい図形の2倍サイズの矩形を用意。
2. 作成したパターンを1.で作成した矩形に適用。
3. FigmaDraw のパターン設定で「六角形」を選択。
4. 3.で作成したパターンをパターン表示したい箇所に適用。

パターン同士の間隔を指定する

1. パターンにしたい図形に間隔で指定した分の余白をつける。
2. 1.で作成したパターンをパターン表示したい箇所に適用する。

2.直線上に要素を繰り返し配置できる「線形リピート」

特定の要素を直線上に簡単に複製できる機能です。

コンテンツの区切りをこだわりたい時、パターンの時と同じくコンポーネント化して AutoLayout で横方向に繰り返していましたが、線形リピートでその代替ができるのではないかと感じました。

区切り線は画面を占める範囲が狭いため、パターンを大量に配置するよりは負荷は低いですが、繰り返す数や作った区切り線を使用する数が多ければ負荷が積み重なっていきます。

線形リピートを使えば、メモリ使用率を低く保てるため、大規模なファイルや複雑なデザインでパフォーマンス向上が期待できます。数と間隔をプロパティパネルから調整できるため、パーツ間に一定の間隔をあけたラインの調整・検討がしやすくなる点もメリットです。パターンの時と同じく受け渡しする際には余白を含めたパーツ作りをすることを忘れないようにしましょう。

注意点

現状間隔の数値の指定にやや癖があります。

間隔の指定がpxの場合、複製するイメージの左端が起点になるため、
「複製するイメージの幅　＋　間隔を開けたい幅」で指定する必要があります。

また、Adobe XDのリピートグリッドを使ったことがある方は、繰り返す数を増やしたい時に端を引っ張って調整するイメージがあるかもしれません。しかし、線形リピートの場合はアスペクト比固定で拡大します。繰り返す数を増やす場合は、プロパティパネルから数を指定します。

まとめ

パターン塗りと線形リピート、どちらも地味に手間がかかる工程やデータ負荷の問題を解決してくれます。Web 制作は細かい作業の積み重ねで出来上がっていくものなので、こういうちょっとした負担を解決してくれる機能追加が私はとてもありがたいなと感じます。

また、デザイナーがエンジニアへ受け渡すパーツについて意識して制作できる点もメリットの一つだと感じました。後工程のことを考えた作業が自然とできるようになっていくと良いですよね。

今回実務で使うならどうか？と考えながらFigma Drawの機能に触れたことで改めて作業工程や手渡す方法のことを意識することができました。まだ他にも役立つ機能はたくさんあると思いますので、まだ試していない方はぜひ触ってみてください！