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

signed by Lollykookaburra.webpWEBPAI generated自分で確認するGet the signed filepixels, not shapes193 KB
すでに作ったものを持ち込みましょう

デザインファイルは取り残されません

Figma、Penpot、Illustrator、InDesign、またはあらゆるSVGアプリで仕上げた作品を、ひとつのアプリの中に閉じ込めておく必要はありません。Designを開いてデザインをインポートをクリックすると、そのファイルは平坦化された画像ではなく、生きたレイアウトとして開きます。すべてのレイヤーが編集可能なボックスになり、そのまま作業を続けたり、ツールを組み合わせたり、同じルールでレンダリングしたりできます。

Fig Figma .fig · SVG
Pen Penpot .penpot
Ai Illustrator .ai · PDF
Id InDesign .idml
SVG 任意のSVG 汎用
デザインファイル

Figma、Penpot、Illustrator、InDesign、またはあらゆるSVG

編集可能なキャンバス

すべてのレイヤーが、テキストを打ち直し、スタイルを変え、移動できるボックスになります

ツールを組み合わせる

QRコードやライブチャート、別のレンダリングを追加できます

どこでもレンダリング

SVG、PDF、PNG、動画 - URLから再現可能です

編集可能なまま

テキストはテキストのまま、図形は図形のまま、画像はライブラリに加わります。デザインの作業をそのまま続けられます - スクリーンショットを描き直すことは決してありません。

取り込んだ時点で準拠済み

フォントはブランドの書体に置き換わり、すべての塗りはネイティブのボックスと同じカラーガードを通過します。外部で作られたアートボードも、届いた時点ですでに統制されています。

テンプレートになる

保存すると、そのレイアウトは再利用できてURLから開けるツールになります - Lollyを使える人なら誰でも開いて、中身を入れ替えてレンダリングできます。デザインアプリは要りません。

Design's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes543 KBDesign's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes490 KB

Design's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes543 KBDesign's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes490 KB

Design's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes543 KBDesign's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes490 KB

Design's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes543 KBDesign's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes490 KB

Design's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes543 KBDesign's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes490 KB

Design's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes543 KBDesign's free canvas, where Import a design lives in the toolbarsigned by LollyPNG自分で確認するGet the signed filepixels, not shapes490 KB

完成したデザインを Figma、Penpot、Illustrator、InDesign から取り出し、Lolly に持ち込みます - 静止画として固定するのではなく、そのまま作業を続けられ、ツールと組み合わせられ、Lolly の決定論的な書き出し経路でレンダリングできる、生きた編集可能なレイアウトとしてです。他のすべてと同様に、インポートの全工程はお使いのデバイス上で行われます - ファイルはブラウザ内で解析され、アップロードは一切行われません。

すでに作ったものすべてにとって朗報があります - どれも、描いたアプリの中に取り残されたままにはなりません。別のツールで何時間もかけたデザインは、あなたのデザインのグローバル設定にすでに沿った、編集可能なセッションとして届きます - 保存すれば、それは Lolly を持つ誰もが開いて中身を埋め直せる、再利用可能なテンプレートになります。

インポートは、Lolly のフリーキャンバスである Design にあります。開いて、キャンバスツールバーの Import a design をクリックし、ファイルを選んでください。アートボードはファイルのフレームに合わせてリサイズされ、すべてのレイヤーが同じ開いたキャンバス上の編集可能なボックスになります - つまり、インポートされたアートボードは、最初のクリックの時点からごく普通の Design セッションなのです。

インポートできるもの

取り込めるファイルの種類はいくつかあります - ネイティブの 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 ファイルが、再現可能でパラメータによってアドレス指定できるアセットに変わります。

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

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

完全に宣言的なツール - サイドバーの入力項目、ハードコードされた制約など、そのすべて - を作るには、依然として 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 doorsigned by Lollyvector SVG自分で確認するGet the signed file19 paths~3.2k nodes35 groups2 images175 KBThe Brand Studio's import card - a Penpot export, a DTCG or Tokens Studio file, or a plain SVG all come in through the same doorsigned by Lollyvector SVG自分で確認するGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

インポートは一方向の流れですが、ブランドのプリミティブは双方向に行き来します。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 からはドキュメント情報です。クリーンになったファイルは、お使いのデバイスの外へ出ることは一切ありません。