デザインのインポート(Figma、Penpot、Illustrator、InDesign)

Layout Studio's free canvas, where Import a design lives in the toolbar

Layout Studio's free canvas, where Import a design lives in the toolbar

Layout Studio's free canvas, where Import a design lives in the toolbar

Layout Studio's free canvas, where Import a design lives in the toolbar

Layout Studio's free canvas, where Import a design lives in the toolbar

Layout Studio's free canvas, where Import a design lives in the toolbar

完成したデザインを 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 / .zipPenpot のエクスポート(標準のエクスポートバンドル)。
.ai / .pdfIllustrator のファイル(既定の PDF互換 オプションで保存したもの)、または任意の PDF。ベクターの塗り、テキスト、画像はページから直接読み取られます。
.idmlInDesign のレイアウト(File → Export → InDesign Markup)。生の .indd は直接読み取れません — 先に IDML を書き出してください。
.svgあらゆる SVG — Figma や Penpot の SVG エクスポート、または手書きのマークアップ。ヒント: Figma の SVG から編集可能なテキストを得るには、Figma のエクスポートダイアログで「Outline text」のチェックを外してください。

各アプリの対応

レイヤーはどうなるか

インポーターはデザインのレイヤーをフリーキャンバスのボックスモデルへマッピングし、編集可能な状態をできる限り保ちます:

ブランドに自動的に準拠する

スクリーンショットを貼り付けるのではなくインポートすることの意義はここにあります — 結果として得られるのは、見知らぬアートボードではなく統制されたレイアウトです。

レンダリング

インポートされたデザインは、ネイティブのデザインとまったく同じように書き出せます — SVG、PDF、PNG、JPG、WebP を同じ決定論的パイプラインで生成し、正確なページサイズと物理単位、ベクター出力ではアウトライン化されたタイプ、刻印可能なすべてのフォーマットに Content Credentials が付与されます。デザインの新しい住まいはその URL になるため、一度限りの Figma ファイルが、再現可能でパラメータによってアドレス指定できるアセットに変わります。

一度限りのデザインをテンプレートへ

ここから、インポートは単なる変換ではなくオーサリングになります。インポートされたレイアウトは通常の Layout Studio セッションであるため、ネイティブなセッションにできることをすべて引き継ぎます:

完全に宣言的なツール — サイドバーの入力項目、ハードコードされた制約など、そのすべて — を作るには、依然として tool.json を手で書く必要があります(Authoring Tools を参照)。インポートが得意なのは、素早く視覚的にこなせる残り90% の部分です — マニフェストを書くことなく、統制され、共有可能で、ツールを埋め込めるレイアウトを作れます。

ブランド自体を双方向でやり取りする

The Brand Studio's import card - a Penpot export, a DTCG or Tokens Studio file, or a plain SVG all come in through the same door

インポートは一方向の流れですが、ブランドのプリミティブは双方向に行き来します。Lolly の色は DTCG デザイントークン — Penpot がネイティブにインポート・エクスポートし、Tokens Studio が Figma に持ち込むのと同じフォーマット — であるため、Figma や Penpot でデザインに使うパレットと、Lolly が適用するパレットは、手作業で同期させる2つのリストではなく、1つのドキュメントです。

制限と安全性

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行)。

フォーマット説明
csvRFC 4180 準拠 — 引用符付きフィールド、"" によるエスケープ、カンマや改行を含むフィールド、CRLF/LF、BOM に対応。
json行オブジェクトの配列、ヘッダーなしの位置ベース配列、あるいは { "data": [...] } / { "rows": [...] } によるラッパーに対応。
Lottie.json.lottieBodymovin JSON と dotLottie のアニメーションが検証され、ライブなベクターアニメーションとして配置されます。

動画

フォーマット説明
mp4 · movISO-BMFF コンテナで、そのまま保存されます(トランスコードは行われません)。寸法はローカルで検出されます。
webmMatroska/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 からはドキュメント情報です。クリーンになったファイルは、お使いのデバイスの外へ出ることは一切ありません。