デザインのインポート(Figma、Penpot、Illustrator、InDesign)
完成したデザインを Figma、Penpot、Illustrator、InDesign から取り出し、Lolly に持ち込みます — 静止画として固定するのではなく、そのまま作業を続けられ、ツールと組み合わせられ、Lolly の決定論的な書き出し経路でレンダリングできる、生きた編集可能なレイアウトとしてです。他のすべてと同様に、インポートの全工程はお使いのデバイス上で行われます — ファイルはブラウザ内で解析され、アップロードは一切行われません。
すでに作ったものすべてにとって朗報があります — どれも、描いたアプリの中に取り残されたままにはなりません。別のツールで何時間もかけたデザインは、あなたのデザインのグローバル設定にすでに沿った、編集可能なセッションとして届きます — 保存すれば、それは Lolly を持つ誰もが開いて中身を埋め直せる、再利用可能なテンプレートになります。
インポートは、Lolly のフリーキャンバスである Layout Studio にあります。開いて、キャンバスツールバーの Import a design をクリックし、ファイルを選んでください。アートボードはファイルのフレームに合わせてリサイズされ、すべてのレイヤーが同じ開いたキャンバス上の編集可能なボックスになります — つまり、インポートされたアートボードは、最初のクリックの時点からごく普通の Layout Studio セッションなのです。
インポートできるもの
取り込めるファイルの種類はいくつかあります — ネイティブの Figma バイナリ、Penpot のエクスポート、Illustrator や PDF のファイル、InDesign のマークアップファイル、そしてあらゆる SVGです。最後のこれが最も間口の広い入り口です。SVG は汎用的なエクスポート(あるいはネイティブの保存)フォーマットなので、ほとんどどんなデザインアプリも、これを通じて Lolly にたどり着けます。
| ファイル | 内容 |
|---|---|
.fig | ネイティブの Figma ファイル(File → Save local copy)。ブラウザ内だけで完全にデコードされます — Figma アカウントもプラグインも API キーも不要です。 |
.penpot / .zip | Penpot のエクスポート(標準のエクスポートバンドル)。 |
.ai / .pdf | Illustrator のファイル(既定の PDF互換 オプションで保存したもの)、または任意の PDF。ベクターの塗り、テキスト、画像はページから直接読み取られます。 |
.idml | InDesign のレイアウト(File → Export → InDesign Markup)。生の .indd は直接読み取れません — 先に IDML を書き出してください。 |
.svg | あらゆる SVG — Figma や Penpot の SVG エクスポート、または手書きのマークアップ。ヒント: Figma の SVG から編集可能なテキストを得るには、Figma のエクスポートダイアログで「Outline text」のチェックを外してください。 |
各アプリの対応
- Figma — ネイティブの
.figには File → Save local copy、またはフレームを SVG としてエクスポートします。(見出しを再入力可能な状態に保つには、SVG エクスポート時に Outline text のチェックを外してください。) - Penpot — 標準の
.penpotエクスポート、または任意の SVG エクスポート。ブランドトークンが双方向で行き来する場所でもあります — 詳しくは後述します。 - Illustrator — ネイティブの
.ai(既定の PDF互換設定のまま)または.pdfはそのまま直接開けます。SVG への変換は不要です。 - InDesign —
.idmlには File → Export → InDesign Markup を使います。印刷用レイアウトが、編集可能でブランドに準拠した Lolly セッションになります。(生の.inddは読み取れません — IDML を書き出してください。)
レイヤーはどうなるか
インポーターはデザインのレイヤーをフリーキャンバスのボックスモデルへマッピングし、編集可能な状態をできる限り保ちます:
- テキストはテキストのまま。 文字のフレームは本物のテキストボックスになります — 内容、サイズ、配置、太さ、行の高さ、そして文字単位の色までそのまま引き継がれるので、見出しは塗り直すのではなく打ち直せます。
- 図形は図形のまま。 長方形、角丸長方形、楕円、ピル形状は、塗り、不透明度、回転、角丸半径を保持したネイティブの図形ボックスになります。
- 画像は抽出されます。 ビットマップは My images(お使いのデバイス上のライブラリ)に格納され、画像ボックスとして配置されます。
- 複雑なベクターアートは忠実にフラット化されます。 Lolly のボックスモデルでは表現できないパス、グラデーション、その他の塗りは、鮮明な単体の SVG 画像ボックスへ焼き込まれます。編集可能性は失われても、見た目の結果は保たれます。
- ジオメトリは正確です。 位置、サイズ、回転はブラウザ自身によって解決される(元のファイルを描画したのと同じ数学的処理)ため、インポートされたレイアウトは元データときちんと一致します。
ブランドに自動的に準拠する
スクリーンショットを貼り付けるのではなくインポートすることの意義はここにあります — 結果として得られるのは、見知らぬアートボードではなく統制されたレイアウトです。
- タイプはブランドの書体へ自動的に置き換わります。 インポートされたフォントはすべて、あなたのブランドパックが備える書体のいずれかになります(モノスペース系のファミリーはブランドの等幅書体にマッピングされ、ウェイトは実在するカットに丸められます)。これは意図された挙動です — デザインは到着した時点ですでにブランドに沿っています。
- 色は保護されます。 インポートされた塗りはすべて、ネイティブのボックスが使うのと同じ色のサニタイザーを通過します。そこから先は、通常のピッカーでブランドスウォッチにスナップさせることができます。
- それ以外はすべて通常のセッションと同じです。 ドラッグ、回転、スナップ、グループ化、クリッピング。テーマ対応アイコン やライブラリアセットを配置し、保存し、URL として共有し、Batch にかけることもできます。
レンダリング
インポートされたデザインは、ネイティブのデザインとまったく同じように書き出せます — SVG、PDF、PNG、JPG、WebP を同じ決定論的パイプラインで生成し、正確なページサイズと物理単位、ベクター出力ではアウトライン化されたタイプ、刻印可能なすべてのフォーマットに Content Credentials が付与されます。デザインの新しい住まいはその URL になるため、一度限りの Figma ファイルが、再現可能でパラメータによってアドレス指定できるアセットに変わります。
一度限りのデザインをテンプレートへ
ここから、インポートは単なる変換ではなくオーサリングになります。インポートされたレイアウトは通常の Layout Studio セッションであるため、ネイティブなセッションにできることをすべて引き継ぎます:
- 誰でも再利用できるテンプレートになります。 保存すれば、そのレイアウトは1つの URL として存在するようになります。Lolly を使える人なら誰でもその URL を開き、文言を変更し、画像を差し替えて、自分自身のバージョンをレンダリングできます — デザインアプリもデザインスキルも不要で、作者がロックした部分はロックされたままです。アートボードをインポートした人がその作者となり、それ以外の人は空欄を埋めるだけです。
- ツールと組み合わせられます。 どのボックスも、別の Lolly ツールをライブなアセットとして保持できます — 自身の QR コードを描画するバッジ、ライブチャートを載せたカード、アセットピッカー経由で差し込まれた別のレンダリングなど。これらはライブのままで、読み込みのたびに再描画されます。平坦化された画像になることは決してありません。そのため、インポートされたポスターは、元のファイルには決してできなかった、生成された常に最新のコンテンツを載せられます。
- 通常のセッションと同じようにスケールします。 バッチグリッド(スプレッドシートの1行につき1つの完成アセット)から駆動したり、Projects フォルダー に保管したり、フォルダー全体を1つの zip としてレンダリングしたりできます。1つのインポートされたデザインが、一貫性のあるバリエーションの一群に変わります。
完全に宣言的なツール — サイドバーの入力項目、ハードコードされた制約など、そのすべて — を作るには、依然として tool.json を手で書く必要があります(Authoring Tools を参照)。インポートが得意なのは、素早く視覚的にこなせる残り90% の部分です — マニフェストを書くことなく、統制され、共有可能で、ツールを埋め込めるレイアウトを作れます。
ブランド自体を双方向でやり取りする
インポートは一方向の流れですが、ブランドのプリミティブは双方向に行き来します。Lolly の色は DTCG デザイントークン — Penpot がネイティブにインポート・エクスポートし、Tokens Studio が Figma に持ち込むのと同じフォーマット — であるため、Figma や Penpot でデザインに使うパレットと、Lolly が適用するパレットは、手作業で同期させる2つのリストではなく、1つのドキュメントです。
制限と安全性
- インポートされた SVG は信頼できないものとして扱われます。スクリプト、イベントハンドラー、foreign object はパース前に取り除かれ、ディスクにフラット化されたものは取り込み時にもう一度サニタイズされます。何も実行されず、何もデバイスの外へ出ません。
- 非常に大きなファイルは2,000要素を上限とします — それを超える分はタブをロックさせる代わりに、警告とともに破棄されます。
- ボックスモデルの範囲外にある効果(複雑なブレンドの重なり、特殊なストローク)は、編集可能なプロパティとして往復させるのではなく、画像へのフォールバックとしてフラット化されます。
Lolly が読み込めるすべてのフォーマット
デザインファイルはその入り口の1つにすぎません — 上の表がそれをカバーしています。全体像を把握できるよう、ここでは Lolly が取り込めるすべてのものを紹介します。デザインのインポートと同様に、すべてのファイルはお使いのデバイス上で解析され、アップロードされることは一切ありません。
画像
写真やグラフィックを、任意の画像ピッカーまたは My images ライブラリにドロップしてください。
| フォーマット | 説明 |
|---|---|
png · jpg/jpeg · webp | ネイティブにデコードされます。静止画は取り込み時に縮小され EXIF/GPS が除去された上で My images に保存されます。 |
gif · apng · アニメーション webp | アニメーションラスターとして認識され、フレームをそのままにそっくり保存されます — 配置してもアニメーションのままです。 |
avif | お使いのブラウザがネイティブにデコードできる場合に読み込めます(同梱のフォールバックはありません)。 |
heic / heif(.heic、.hif) | ブラウザがデコードできない場合でも、同梱の libheif フォールバックによって iPhone の写真をデコードします。 |
svg | サニタイズされ(スクリプト、on* ハンドラー、javascript: URL を除去)、クリーンな viewBox に正規化されます。 |
データ
表を貼り付けるかドロップすると、ツールの繰り返しブロックがそこから自動入力されます(最大1,000行)。
| フォーマット | 説明 |
|---|---|
csv | RFC 4180 準拠 — 引用符付きフィールド、"" によるエスケープ、カンマや改行を含むフィールド、CRLF/LF、BOM に対応。 |
json | 行オブジェクトの配列、ヘッダーなしの位置ベース配列、あるいは { "data": [...] } / { "rows": [...] } によるラッパーに対応。 |
Lottie(.json、.lottie) | Bodymovin JSON と dotLottie のアニメーションが検証され、ライブなベクターアニメーションとして配置されます。 |
動画
| フォーマット | 説明 |
|---|---|
mp4 · mov | ISO-BMFF コンテナで、そのまま保存されます(トランスコードは行われません)。寸法はローカルで検出されます。 |
webm | Matroska/EBML 形式で、そのまま保存されます。 |
Content Credentials(検証)
Lolly は、PDF、PNG/APNG、JPG、GIF、SVG、TIFF、WebP、MP4、WebM/MKV に埋め込まれた、署名済みの C2PA マニフェストを読み取り、暗号学的に検証します — すべてお使いのデバイス上で、署名証明書と照合して行われます。詳しくは Content Credentials をご覧ください。(HEIC と AVIF は画像として読み込めますが、クレデンシャルは持ちません。)
メタデータ(除去のために読み取る)
Strip Hidden Data ユーティリティは、埋め込まれたメタデータを削除するためにそれを読み取ります — JPEG からは EXIF/GPS/IPTC/XMP、PNG からはテキストと時刻のチャンク、SVG からはコメントとエディタの名前空間、PDF からはドキュメント情報です。クリーンになったファイルは、お使いのデバイスの外へ出ることは一切ありません。