QRコードを編集可能なベクターとしてFigmaにコピーする方法

QRコードをFigmaにコピーする手順

QRコードをFigmaにコピーするのは4つの操作だけで、プラグインは要りません。ブラウザーでコードを作り、SVGとしてコピーし、キャンバスの空いている場所に貼り付け、比率ロックを入れたままサイズを数値で指定します。全工程は1分もかからず、結果は他のFigmaのアートワークと同じように色を変えたり書き出したりできるベクターレイヤーのグループです。

1. コードを作る. ジェネレーターを開き、URLなどの内容を入力して、形・パターン・目・色・フレーム・ロゴを設定します。Figmaに届くのはプレビューが示すものそのものなので、スタイリングは貼り付けた後ではなくここで行います。
2. ダウンロードメニューを開く. Downloadボタンの横の矢印をクリックしてCopy to Figmaを選びます。ボタンが一瞬Copiedと表示され、それがSVGマークアップがクリップボードに届いた確認になります。
3. 空のキャンバスに貼り付ける. Figmaに切り替え、何も選択されておらずテキストレイヤーも編集モードでない状態にするため空いている場所をクリックし、macOSならCmd+V、WindowsならCtrl+Vを押します。
4. レイヤーを確認する. コードはBackgroundとQR-codeを含むグループとして届き、デザインで使っていればFrameとLogoも加わります。この名前が見えることが、Figmaが画像を貼ったのではなくベクターとして解釈した証拠です。
5. リサイズ前に比率をロックする. 右パネルで比率ロックをオンにし、角のハンドルをドラッグする代わりに必要な幅を入力します。幅と高さは等しいままでなければなりません。
6. 画面上でスキャンする. キャンバスを100%にズームし、スマートフォンでコードを読み取ります。ファイルを誰かに渡す前に、開く遷移先が意図したものであることを確認してください。

内容の入力欄が空のあいだ、Copy to Figmaは何もしません。ジェネレーターは入力前にスタイル付きのプレースホルダーコードを表示しますが、それをコピーするとどこにも遷移しないコードがデザインに入ってしまうため、ボタンはクリップボードに書き込む代わりに空の入力欄を点滅させます。

Figmaのキャンバスに実際に届くもの

貼り付けたKoloQRのコードは、平らな画像ではなく名前付きのレイヤーグループとして届きます。BackgroundとQR-codeを含むコンテナで、デザインが使っていればFrameとLogoが加わります。すべてのモジュールが本物のベクターパスなので、どのレイヤーも単独で選択・色変更・非表示・書き出しができます。

SVGはviewBoxから取った明示的な幅と高さを持っているので、コードはファイルが寸法を宣言していないときにFigmaが使う既定のボックスではなく、本来のサイズで届きます。これが効いてくるのは主に、間違った縮尺で貼られたコードはたいていハンドルをドラッグして直され、そこで比率が崩れるからです。

フレームのラベルは、生きたテキストではなくアウトライン化されたパスとして届きます。曲線のラベルは1文字ずつのオブジェクトではなく1本の統合パスとして出力されるため、文字列は色を変えたり動かしたりはできても打ち直せない単一の図形です。文言を変えるにはジェネレーターでラベルを編集してコードをコピーし直します。ラベルの弧はフレームから計算されるので、どのみちそれが正しい順序です。

複数のコードを一つのFigmaファイルにコピーしても問題ありません。マークアップが参照するidは、クリップパスも曲線ラベルが沿う不可視のパスも、コピーした瞬間に固有の接頭辞を与えられます。2つのSVGがidを共有していることは、2つ目に貼った図形が1つ目のクリッピングで描画される典型的な原因ですが、このワークフローは構造上それを避けています。

純粋に見た目だけのレイヤー名は意図的にきれいなままにしてあります。Background、QR-code、Frame、Logoはファイル内のどこからも参照されないので、ランダムな接頭辞を背負わず、Figmaのレイヤーパネルで読める名前を保ちます。

SVGかPNGか：Figmaに持ち込む形式

リサイズ・色変更・印刷のどれかがある場合はSVGを、捨てるつもりのモックアップにだけPNGを使ってください。2つのうちFigmaで編集可能なままなのはSVGだけです。PNGは書き出した時点で完成した画像であり、フレームの中で拡大すればすべてのモジュールの縁が甘くなります。

この非対称さは入稿の場面で人をつまずかせます。FigmaはPDFを書き出せますが読み込めません。どのジェネレーターのものであれ、PDFのQRコードはFigmaのレイアウトに入れる前に変換するか、SVGに差し替える必要があります。

PNGが間違いというわけではなく、単に最終形だというだけです。KoloQRのPNG書き出しは画面サイズの4倍でコードをレンダリングし、モックアップや、サイズが決まっている小さな印刷には十分ですが、そのピクセル数は固定です。あとからレイアウトが2倍のサイズを求めたら、PNGは拡大するのではなく作り直すことになります。ラスターのコードがどこまで安全に印刷できるかを決める計算はQRコードの解像度を参照してください。

貼り付けが文字になったり何も出なかったりする理由

貼り付けの失敗はほぼ3つのどれかです。テキストレイヤーが編集モードだった、クリップボードへの書き込みがブロックされた、あるいはSVGマークアップを解釈しない面に貼り付けた。どれもコード自体の欠陥ではなく、3つとも同じ代替手段があります——SVGファイルをダウンロードしてドラッグする、です。

• マークアップが可視文字として現れる。 Cmd+Vを押したときテキストレイヤーが編集モードだったため、Figmaがクリップボードのテキストをテキストとして挿入しました。Escapeを押し、空のキャンバスをクリックして貼り直してください。
• 何も現れない。 ブラウザーがクリップボードへの書き込みを拒否しました。クリップボードへのアクセスには安全なHTTPSページと実際のクリックが必要で、一部のプライバシー拡張機能は完全にブロックします。権限と押し問答するよりSVGダウンロードを使ってください。
• 面が違うと挙動も違う。 FigJamとFigma Slidesは、貼り付けられたマークアップをデザインキャンバスと同じようには扱いません。そこで貼り付けが文字になる場合は、ダウンロードした.svgファイルをボードにドラッグしてください。
• Copy to Figmaボタンが入力欄を点滅させる。 内容の入力欄が空で、コピーすべき実際のコードがまだありません。先にURLなどの内容を入力してください。

代替ルートは必要になる前に知っておく価値があります。Download、SVG、そしてファイルマネージャーから.svgファイルをFigmaのキャンバスにドラッグ。FigmaはドロップされたSVGファイルを、貼り付けと同じベクターレイヤーとして読み込むので、結果は何も変わりません。変わるのは手順の数だけです。

Figmaでの安全な編集とコードを壊す編集

色の変更、移動、回転、グループ化、フレーム化、比率を保った拡大縮小は安全です。片方の軸を引き伸ばすこと、クワイエットゾーンを切り取ること、コントラストを落とすこと、ジオメトリを削るブーリアン演算は安全ではありません。QRコードは正方格子のジオメトリから復号されるので、その格子を変える編集はスキャナーが読むものを変えてしまいます。

コントラストは、貼り付けた後ではなくコピーする前に決着をつけておきたい要素です。ジェネレーターのプレビューは選んだ組み合わせのコントラスト比を表示し、スキャンが難しくなりうる場合ははっきりそう伝えます。これはFigmaに相当する機能がないチェックです。Figmaは中間のグレーのコードを中間のベージュの背景に平気で描画し、何も知らせてくれません。

デザインがシンボルの一部を覆う場合——中央のロゴ、角を横切る図形——それを吸収する余裕は生成時に決まり、Figmaでは決まりません。各レベルがシンボルのどれだけを復元できるかは誤り訂正を参照し、デザインが必要とするレベルでコピー前に生成してください。

正直な限界を一つ。ここにあるどのルールも、他人の機器でのスキャンを保証はしません。コントラスト比、モジュールサイズ、誤り訂正レベルはいずれも分の良さを高めますが、実際に決着をつけるのは2台のスマートフォンでの実地テストです。

FigmaのフレームでQRコードのサイズを決める

Figmaはピクセルで測り、物理単位を持ちません。ですから、最終的な媒体で1ピクセルが何を意味するかを決め、それを守る形でQRコードのサイズを決めます。96ppiなら1cmは37.8pxなので、2cmのコードは76pxです。300ppiなら同じ2cmのコードが236pxになります。画面向けのデザインでは、1モジュールあたり4px以上を目安にしてください。

モジュール数はデザインではなく内容で決まります。短いURLに中程度の誤り訂正なら、たいてい29または33モジュールに収まり、クワイエットゾーンを含めると37または41です。1モジュール4pxならおよそ150〜165pxで、それをかなり下回ると標準的な画素密度のディスプレイでモジュールの輪郭が失われはじめます。

レイアウトがFigmaにあるからといって、印刷のルールは変わりません。印刷されたコードは読み取り距離10cmごとに約1cmの幅を必要とし、近くで読む場合の実用的な下限は2×2cm、印刷時のモジュールは0.4mm以上、インクの広がりで暗いモジュールが太る非塗工紙では0.5mmを保つべきです。

ハンドルをドラッグせず、幅を数値で指定してください。比率ロックを外したままの角のドラッグは、QRコードがわずかに引き伸ばされたままFigmaファイルから出ていく最大の原因で、4%の歪みは画面では見えず、スキャナーでは致命的です。

FigmaからQRコードを書き出す

コードの最上位レイヤーを選び、ベクター入稿ならSVG、印刷ならPDF、画面向けなら3xまたは4xのPNGで書き出します。コードではなくフレームを書き出すと周囲のレイアウトごと書き出されますが、それは印刷所が求めるもので、開発者が求めるものではまずありません。

• SVG。 レイヤー名をファイルに残したいなら「Include id attribute」をオンのままに。「Outline text」はここでは何も変えません。フレームのラベルはすでにパスとして届いているからです。
• PDF。 Figmaは読み込めないにもかかわらずPDFを書き出せるので、コードを含む印刷レイアウトの入稿形式としてPDFが自然な選択になります。
• 3xまたは4xのPNG。 100pxのコードを4xで書き出すと400pxになり、これは画面用のアセットです。印刷用として扱わず、印刷サイズから逆算してください。
• 印刷に1xは論外。 ラスターの書き出しはその中にあるピクセル数までしか大きくなれず、印刷の上限はおおよそピクセル幅÷300×2.54センチメートルです。

ウェブサイトに載せるコードなら、より良い受け渡しはそもそも書き出しではないことが多いです。開発者はビルド時にコードを生成することも、SVGファイルをそのまま配信することもでき、そのどちらも、URLが変わったときに誰も更新を思い出さないデザインファイルからの書き出し画像に勝ります。

Copy to FigmaとFigmaのQRコードプラグイン

プラグインはFigmaの中でコードを生成し、ファイルを離れずに再生成や一括生成ができます。クリップボード経由はブラウザーで生成し、形・フレーム・ロゴをより細かく制御できます。どちらも生成するのは静的なコードで、配置済みのコードの遷移先をアートワークを差し替えずに変えることはどちらにもできません。

量が問題ならプラグインを使ってください。スプレッドシートからFigma内で40枚のイベント用バッジを生成するのは、クリップボード経由では快適にしようのない作業で、一括生成のプラグインは端的にそれに向いた道具です。KoloQRにFigmaプラグインはありませんし、このページはそれを利点であるかのように装うつもりもありません。

デザインが問題ならクリップボードを使ってください。円形やその他のカスタム形状のコード、フレーム、装飾的な目のスタイル、適切な誤り訂正を背後に置いたロゴは、ジェネレーターで下す判断であり、それらは完成した形でFigmaに届きます。実際の見え方は丸いQRコードとブランドQRコードをご覧ください。

長く効いてくる違いを一つ挙げておきます。プラグインは依存です。Figmaプラグインは作者によって更新され、プラグインAPIが変われば壊れ、ときにはCommunityから消えます。クリップボードのSVGは貼り付けであり、その経路にはメンテナンスが止まりうるものが何もありません。

コードがFigmaに入ったあとにできないこと

貼り付けたコードは静的QRコードなので、遷移先はジオメトリの隣に保存されているのではなく、ジオメトリの中に書き込まれています。Figmaはそのジオメトリのスタイルを変えられても再計算はできず、そのためよくある4つの願いが手の届かないところにあります。

• 遷移先を変える。 URLを変えるとは新しいシンボルを生成することです。編集できるフィールドはFigmaにも他のどこにもありません。
• あとから誤り訂正レベルを上げる。 レベルはデータの並べ方を決めるので、完成したアートワークの属性ではなくシンボルそのものを変えてしまいます。
• フレームのラベルを打ち直す。 文字はアウトライン化されたパスとして届いています。ジェネレーターで変更してコードをコピーし直してください。
• ラスターのロゴをシャープにする。 PNGやJPGでアップロードしたロゴはSVGの中に画像として埋め込まれるため、それ以外はベクターのファイルの中でラスターのままであり、コードを拡大してもシャープにはなりません。

ラスターのロゴは、きれいな回避策がある唯一のものです。ベクター版があるならロゴをSVGでアップロードするか、FigmaでLogoレイヤーを削除してその場所に自分のベクターロゴを置いてください。シンボルはすでにその余白を空けて生成されており、覆われたモジュールを復元する誤り訂正は上に載るアートワークが何かを問いません。

アナリティクスもありませんが、それはこのワークフローではなく静的コードの性質です。要件がスキャン数や印刷後に変更できる遷移先を求めるなら、ホスティング型プラットフォームの動的コードが正しい道具で、デザインは同じやり方でFigmaに入ります。

デザインシステムの中でコードを保守しやすく保つ

貼り付けたコードは、最初に使うときにFigmaコンポーネントにしてください。遷移先が変わったら、メインコンポーネントに新しいコードを一度貼るだけで、あらゆるファイルのあらゆるインスタンスが更新されます。静的QRコードが編集可能に最も近づくのがこの形です。

コンポーネントはデザインではなく遷移先の名前を付けてください。QRコードは人間には読めないので、レイヤー名がURLを読める唯一の場所です。「QR / spring-menu」は次の人に何を見ているのかを伝えますが、「QRコード3」は何も伝えません。完全なURLはコンポーネントの説明に書いておくと、ファイル間のコピーでも残ります。

生成時の設定を、次の人が見つけられる場所に残してください。形、色、フレーム、ロゴ、誤り訂正レベルはアートワークから復元できないので、コンポーネントの説明にあるメモ——あるいはそれを生んだジェネレーターのリンク——が、半年後にコードを再現可能にします。

同じコードの2つのバージョンを1つのファイルに同居させないでください。失敗の形は具体的でよくあるものです。誰も書き出し直していないアートボードに古いコードが残り、それが印刷され、すでに廃止されたURLに人を送ります。1コンポーネント、1遷移先、更新する場所は1か所です。

入稿前のスキャンテスト

1. キャンバスを100%でスキャンする. Figmaを100%にズームし、画面上のコードをスマートフォンで読み取ります。ここで失敗するならデザインの問題——コントラスト、歪み、覆われたクワイエットゾーンです。
2. 遷移先を1文字ずつ読む. 開いたURLを意図したものと、プロトコルやトラッキングパラメーターも含めて突き合わせます。完璧にスキャンできて間違ったページに飛ぶコードが、高くつく失敗です。
3. キャンバスではなく書き出しをスキャンする. 実際に納品する形でアートボードを書き出し、そのファイルをスキャンします。エフェクト、不透明度、背景レイヤーは、キャンバス上の見た目と書き出しとで挙動が違います。
4. 最終サイズで試し刷りする. デザインが印刷に回るなら、実際の用紙に最終サイズで1枚刷り、そこでスキャンしてください。画面のコントラストは何でもよく見せます。
5. 両方のプラットフォームでテストする. iPhoneとAndroidの両方で読み取ってください。カメラアプリの二値化の仕方が違うため、ぎりぎりのコードは片方で通り片方で落ちることがよくあります。
6. その場の光でテストする. コードが置かれる照明で読み取ってください——薄暗いバー、日の差す窓辺、斜めに見る光沢ラミネートのカード。

最後の2ステップが、レイアウトでは見えないものを捕まえます。明るいデスクトップモニターで通り、暗い照明のラミネート加工されたメニューで落ちるコードは、何も変わっていません。変わったのは読み取り条件です。

同じクリップボードのSVGはFigma以外でも使える

クリップボードにあるのはFigma固有の形式ではなく標準のSVGマークアップなので、同じコピーがIllustrator、Sketch、Affinity Designer、Inkscapeにも編集可能なベクターとして貼り付きます。このワークフローでFigmaに縛られているのは、メニュー項目の名前だけです。

マークアップではなくファイルを求めるツール——文書エディター、プレゼンテーションソフト、ブラウザーベースのデザインツールの多く——にはSVGダウンロードを使ってください。ダウンロードして配置しても同じベクターのアートワークが得られ、違うのは運び方だけです。

どちらも受け付けないツールではPNGが代替になり、サイズの判断が前倒しになります。都合のよいサイズではなく、最終的な媒体が必要とするピクセルサイズでコードを書き出してください。あとから拡大しなければならないラスターのコードには、良い直し方がありません。