Pattern Generatorの機能。
Pattern GeneratorはインラインSVGからタイル状の幾何学背景を生成します。ドット、ストライプ、グリッド、シェブロンなどの模様を選び、前景色と背景色、タイルスケール、不透明度を設定します。
コントロールを調整するとプレビューがリアルタイムで更新されます。仕上がりに満足したら、ワークフローに合わせた形式でエクスポートします：CSS backgroundスニペット、スタンドアロンのSVGタイル、または1600×900のPNG。
4ステップで選び、カスタマイズし、エクスポート。
- Pattern Generatorを開き、ピッカーで模様タイルをクリックします。
- 前景色と背景色、スケール、不透明度を調整し、プレビューがブランドやレイアウトに合うまで調整します。
- Copy CSSをクリックして貼り付け可能なbackgroundプロパティを取得するか、Download SVG / Download PNGでアセットファイルをダウンロードします。
- 出力をページのスタイルシート、Figmaファイル、またはスライドデッキに配置 — アカウントもアップロードも不要です。
CSSをページに貼り付け。
コピーしたCSSは、インラインSVG data URIを含む単一のbackground宣言です。模様を表示する要素のクラスルールまたはインラインスタイルに貼り付けます：
例：コピーした行を.hero { … }またはスタイルシートのユーティリティクラスに追加します。SVGはシームレスにタイルされるため、追加のマークアップなしで全幅セクション、カード、ヒーローブロックに使えます。
模様はdata URIとして埋め込まれるため、別途ホストする画像ファイルは不要です。デプロイがシンプル — CSSを貼り付けるだけで完了です。
SVGタイルをFigmaフィルとして使用。
SVGタイルをダウンロードしてFigmaファイルにドラッグするか、Place imageでインポートします。フレームまたはシェイプを選択し、フィルタイプをImageに設定してインポートしたSVGを選びます。
フィルモードをTileに設定すると、幾何学リピートがツールのプレビューと一致します。デフォルトのタイルサイズより密または疎なリピートが必要な場合は、Figmaでスケールを調整します。
モックアップと本番CSSで同じ模様を使いたい場合に便利 — Pattern Generatorから一度エクスポートし、FigmaではSVG、ライブページではCSSを使用します。
スライドとOG画像用のPNG。
Download PNGは、現在の色とスケール設定で1600×900のラスター画像をエクスポートします。Keynote、Google Slides、PowerPointのスライド背景、またはライブCSSの代わりにフラットアセットが必要なソーシャルプレビュー画像として使えます。
PNGはSVGフィルやdata URI背景に対応していないツールにも便利 — メールテンプレート、PDFエクスポート、サムネイル生成ツールでは単一の画像ファイルが必要なことが多いです。
ブラウザ内ローカルのみ。
Pattern Generatorは完全にブラウザ内で動作します。色、スケール、エクスポートはお使いのデバイス上で計算されます — Tiny Design Shopやサードパーティサーバーへのアップロードはありません。タブを閉じればセッションは消えます。