Design to Code 書き出しの詳細

第 38 課 の API とデモも参照してください。

概念の対応

.ic の概念	コード出力
rect/g + display: flex	<div> + flex ユーティリティ（flex items-center …）
Flex の方向、揃え、サイズ、間隔、パディング	Tailwind の flex ユーティリティ / CSS
flex でないコンテナ内の子の x / y	そのコンテナを基準にした絶対配置
cornerRadius / fills / strokes / dropShadow	rounded-* / bg-* / border / shadow-*
画像塗りのある rect	<img src> と object-fit / object-position
CSS グラデーション塗りが 1 つの rect	CSS background-image
ellipse	CSS border-radius: 50%
単色の塗りとストロークがあるリーフ path	ベクタージオメトリを持つインライン SVG <path>
単色ストロークがあるリーフ line / polyline	開いたベクタージオメトリを持つインライン SVG <path>
rect / ellipse + clipMode: clip	クリップ要素上の CSS overflow: hidden
rotation / scaleX / scaleY	ローカルの左上を基準とした CSS transform
ノードレベルの blendMode	CSS mix-blend-mode
visibility: hidden / visible	レイアウト空間を残す CSS の visibility
text + content	テキストノード。既知の $token 内容 → テキスト値
テキスト装飾の線、スタイル、色、太さ	CSS text-decoration
fontVariant / fontKerning	CSS font-variant / font-kerning
wordWrap / wordWrapWidth	white-space、overflow-wrap、max-width
maxLines / textOverflow	CSS のラインクランプ、または切り取った行数
iconfont (lucide)	lucide-react の <Search />
iconfont（その他のファミリー）	@iconify/react の <Icon icon="family:name" />
$color.bg 変数	bg-[var(--color-bg)]（css-var）/ リテラル（resolved）
reusable ルート	React コンポーネント定義
ref + descendants のオーバーライド	props を持つコンポーネントインスタンス
name	コンポーネント / prop / class 名

コンポーネントと出力ルール

componentStructure: 'preserve'（デフォルトであり、Pencil の特長）では、各 reusable ルートがコンポーネントになり、すべての ref がインスタンスになります。インスタンス間で現れる上書き可能な属性（content、fills、fontVariant と fontKerning を含むタイポグラフィ、テキスト装飾、opacity、visibility、cornerRadius、明示的な width/height、minWidth/maxWidth/minHeight/maxHeight、padding、margin、flex の間隔、flexDirection、alignItems、justifyContent、flexWrap、alignSelf、flexGrow、flexShrink、flexBasis、strokeWidth、strokes、そしてドロップシャドウのフィールド）は、テンプレート値をデフォルトとして props に引き上げます。

数値の lineHeight は .ic ではピクセル高さなので、React の出力は単位なしの倍率として扱わず px を付けます。ブール値の fontKerning は CSS の normal または none になります。

間隔の配列は CSS のショートハンド文字列になり、テキスト装飾のフィールドは 1 つの prop にまとまり、シャドウのフィールドは 1 つの boxShadow prop にまとまります。太さ 0 の装飾は、キャンバスと同じく none として描画されます。

テキスト

テキストの書き出しは、単位なしの 1.2 行高を、明示的な lineHeight がないときに使い、ブラウザの flex 間隔をキャンバスのテキストメトリクスに近づけます。明示した数値の lineHeight は引き続きピクセルで書き出します。

明示的な改行は white-space: pre で保持されます。wordWrap が有効で wordWrapWidth が正の値のとき、出力は pre-wrap と overflow-wrap: anywhere を使い、その幅を最大幅にします。

正の maxLines は、ellipsis（デフォルト）には CSS のラインクランプを、clip には行高で切り取る上限を追加します。すでに折り返された reusable テキストの折り返し幅だけを編集すると、コンポーネントの prop になります。

折り返しのオンとオフを切り替えたり、切り詰め設定を変更したりすると、インスタンスが展開され、書き出したレイアウトがその編集に従います。キャンバスは現在、テキスト計測に whiteSpace 設定を適用しません。

カスタムの textOverflow マーカー文字列には、標準 CSS の同等物がありません。

画像と塗り

reusable な画像では、画像 URL だけを変えると、インスタンスの fills オーバーライドがコンポーネントの <img src> prop に結び付きます。塗り種別、フィット、位置、塗り不透明度を変えるとインスタンスが展開され、生成される要素とスタイルがその編集を反映します。リーフの画像は、単一の塗り不透明度とノード不透明度を <img> 上で合成します。楕円の単一画像塗りは、角丸の <img> として書き出します。子を持つ画像塗り付きの矩形と楕円は、位置指定のラッパーを使い、装飾用の <img> をその子の背後に置きます。ラッパーがノード不透明度を持ち、<img> が塗り不透明度、フィット、位置を持ちます。

有効な CSS の線形、放射、または円錐グラデーション塗りが 1 つだけの矩形は、そのグラデーションを background-image として書き出します。インスタンスでグラデーション値だけを編集すると、コンポーネントの prop になります。

単色、対応しているグラデーション、画像、またはパターンの塗りが複数ある矩形と楕円は、ペイント順に積み重ねた背景として書き出します。単一のパターンも CSS 背景として書き出します。

キャンバスの conic-gradient(circle at …) 構文は、CSS の conic-gradient(at …) に変換されます。画像レイヤーは fill、contain、cover、none、scale-down と位置をサポートし、子コンテンツはペイントより手前に保ちます。

パターンは本来のタイルサイズと繰り返し設定を保持します。独立した不透明度、画像の scale-down、または対応している 2D パターン変換が必要なペイントでは、ジェネレーターが子の背後にクリップされた装飾レイヤーを出力します。

CSS が対応するレイヤーのブレンドモードは、塗りスタックの内部に留まります。パターン変換は、明示的な寸法を持つ矩形と楕円で matrix、translate、scale、rotate、skewX、skewY をサポートします。

キャンバスは URL ベースのパターン画像もデコードし、これらの変換を適用します。reusable インスタンスでスタックまたはパターンを編集すると、そのインスタンスは展開されます。

それ以外のグラデーション形式、未対応のパターン変換構文、linearBurn や linearDodge のように CSS に同等物がないブレンドモードは、引き続き個別の処理が必要です。

不透明度が 1 未満の単一の単色塗りは CSS の color-mix を通して書き出され、子要素を暗くせずに塗りアルファを保ちます。ノード不透明度は、別の CSS opacity のままです。reusable インスタンスで半透明の塗りを編集すると、そのインスタンスが展開され、生成されるペイントは不透明度を保ちます。

変換とレイアウト

ノードの回転（ラジアンで保存）と scaleX / scaleY は、CSS の rotate(...) scale(...) 変換として原点 0 0 とともに書き出され、キャンバスのローカル変換の順序と一致します。インスタンスの変換を編集すると、そのインスタンスが展開され、変更されたジオメトリが書き出しに含まれます。

clipMode: clip の矩形と楕円は、生成された HTML と React コードで子をクリップします。角丸の矩形は角の半径を保持し、楕円は border-radius: 50% を使います。reusable インスタンスのクリップモードを変更すると、そのインスタンスが展開され、クリップ状態が保持されます。erase と soft のマスクには CSS の overflow に直接対応するものがなく、クリップとしては書き出されません。

flex でないコンテナでは、子はキャンバス上のローカルな x / y を CSS の left / top 位置として使います。flex の子は通常の flex フローのままです。Yoga はこれらの flexShrink を既定で 0 にするため、ノードが別の値を指定しない限り、書き出しは flex-shrink: 0 を設定します。flex でないコンテナ内の、保持されたコンポーネントインスタンスには位置指定のラッパーが付きます。インスタンス内の子を移動すると、そのインスタンスが展開されて編集が残ります。複数のトップレベルノードがすべて明示的なサイズを持つとき、書き出しは相対配置のフレームも追加し、回転および反転した境界を含めて間隔を保ちます。測定できるサイズがないルートは、通常の文書フローのままです。

ノードレベルの visibility は CSS の visibility になるため、非表示のノードはレイアウト空間を保ちます。既定の inherited 状態は CSS の継承を使います。reusable インスタンスの可視性を変更すると、子孫への編集を含めてコンポーネントの prop になります。

ベクター図形

有効な d データを持つパスは、矩形のプレースホルダーではなくインライン SVG として書き出します。Path に子があるとき、その SVG は位置指定のラッパー内で子の背後に置かれ、ベクターの輪郭と各子のローカル座標を保ちます。

単色、線形または放射グラデーション、画像から作られた塗りレイヤーは、キャンバス順に別々の SVG パスとして書き出され、各レイヤーの不透明度を保ちます。CSS が対応するブレンドモードは隔離された SVG グループの中で適用されるため、下にある塗りレイヤーとだけ合成されます。

それらのペイント種別の有効なストロークは、ペイント、不透明度、線・三角形・菱形の端点マーカー、塗りルール、幅、キャップ、ジョイン、マイターリミット、ダッシュ設定を保持します。複数のストロークを持つパス、線、ポリラインは、共有ジオメトリと CSS が対応するレイヤー合成で、各ストロークをキャンバス順に書き出します。

閉じたパスは、すべてのレイヤーをクリップまたはマスクすることで内側または外側のストローク揃えも保持します。開いたパスは中央揃えのままです。

グラデーションと画像ペイントは、パスの viewBox に従います。パスの画像塗りは fill、contain、cover、none、scale-down をサポートし、中間のパーセント位置も含みます。

一般的な fill / contain / cover の揃えは SVG パターンを使います。それ以外のフィットと位置は、クリップされた SVG foreignObject と CSS の object-fit / object-position を使います。

画像ストロークは、位置が 0%、50%、100% の fill、contain、cover に SVG パターンを使います。別のフィットや位置を使う単一の画像ストロークは、位置指定の HTML 画像と SVG ジオメトリマスクを使い、Chromium と WebKit でキャップ、ジョイン、端点マーカー、内側または外側の揃えを保ちます。

これらのフィットや位置を使う重なった画像ストロークも、SVG ストロークレイヤーとあわせて、キャンバスのペイント順、対応する CSS ブレンドモード、不透明度、端点マーカーを保持します。書き出したコードでは、永続的な画像 URL または data URL を使ってください。

ドロップシャドウは SVG の図形に従い、Path の子には影を付けません。reusable インスタンス上のパスのペイント、ジオメトリ、マーカー、ストローク揃え、またはシャドウのオーバーライドは、そのインスタンスを展開し、SVG が編集を反映するようにします。

linearBurn や linearDodge のように CSS に同等物がないブレンドモード、円錐グラデーションとメッシュグラデーション、その他のパスフィルターには、別途 SVG での処理が必要です。

リーフの線とポリラインは、同じ SVG パイプラインを使います。ローカルな端点または点リストは、塗りのない開いたパスになります。SVG の viewBox はジオメトリのローカル原点に従い、幅 0 または高さ 0 の軸を中央に置くため、オフセットしたパスや細い水平・垂直のストロークも生成コードの中で見えたままになります。ストロークには、有効な単色、線形グラデーション、放射グラデーション、または画像ペイントを 1 つ使えます。線、三角形、菱形の矢印は、ストロークのペイントを使うローカル SVG マーカーを使います。reusable な線またはポリラインのインスタンスに対するジオメトリ、ペイント、マーカーの編集も、そのインスタンスを展開します。それ以外の線の効果は、引き続き個別の処理が必要です。

ノードレベルの blendMode は CSS の mix-blend-mode になり、インスタンスがそれを変更する場合はコンポーネントの prop も含みます。light は CSS の lighten に対応します。CSS に同等物がないモードは SVG 書き出しに従い、normal として描画されます。塗りレイヤー自身の blendMode はそのノード内の他の塗りと合成され、ノードレベルの mix-blend-mode としては扱いません。

実用的な例

次の例は、分析ダッシュボード、SaaS の料金ページ、モバイルのチェックアウト画面を IC エディターのキャンバスに読み込みます。3 つのシーンはいずれも入れ子の flex レイアウトとセマンティックな色変数を使います。チェックアウトは 390 × 844 の狭いアートボードを使います。キャンバス上でノードを選択して編集し、API.exportCode でキャンバスの現在のドキュメントから生成したコードを更新、コピー、またはダウンロードしてください。HTML/CSS を選んだ状態では、HTML プレビューを使い、生成されたページをアートボードサイズのままサンドボックスのフレームで表示します。デザインを切り替えると、編集できる別のシーンが読み込まれます。

例は、ノード ID をキーにした semanticElements マップを API.exportCode に渡します。このマップは、選んだキャンバスの矩形とテキストを、両方の書き出しで HTML ランドマーク、見出し、<button type="button"> コントロールに変えます。このマップは、このデモの書き出し設定に属します。ボタンの動作とナビゲーションは、アプリケーション側で接続してください。

料金ページは、1 つの reusable なプランカードテンプレートと 3 つの ref インスタンスを使います。エディターはインスタンスを展開して描画と編集を行います。このデモは、テキスト、色、タイポグラフィとテキスト装飾、不透明度、明示的なサイズとサイズ制約、間隔、flex の揃えと項目サイズ、単色の境界、ドロップシャドウの編集を、React と .ic のダウンロード向けにインスタンスのオーバーライドへ戻します。Growth カードはアクセントの境界を示します。数値の flexBasis とサイズ制約の値は、HTML/CSS と React のスタイルでピクセル値になります。カードの構造、または未対応のプロパティが変わると、書き出しは展開したノードを使うため、結果は引き続きキャンバスと一致します。

3 つの React 書き出しは、React 19 と Tailwind CSS 4 を使ったブラウザテストでも描画されます。テストは主要なテキスト位置を HTML プレビューと照合し、ジェネレーターが変わってもこれらの例を実行できる状態に保ちます。

.ic ファイルをダウンロードすると、オンラインアプリで Import from… > .ic からデザインの編集を続けられます。HTML ファイルをダウンロードし、ブラウザで直接開いてください。

React の場合は React プロジェクトをダウンロード を選ぶと、現在のキャンバスから Vite、React 19、Tailwind CSS 4 のスターター ZIP を取得できます。展開してから pnpm install と pnpm dev を実行してください。

書き出したコンポーネントは src/App.tsx にあります。スターターは、デザインが Inter を使うとき、そのフォントをローカルにバンドルします。

現在のキャンバスにある一時的な blob: 画像は public/assets にコピーされ、ローカルパスで参照されます。data URL はインラインのまま、リモート URL はリモートのままです。

src/responsive.css は、この 3 つの例に狭い画面向けのレイアウトを追加し、src/App.tsx のアートボードサイズのコンポーネントは保ちます。既存のプロジェクト向けに .tsx ファイルだけをダウンロードすることもできます。

ジェネレーターが現在出力するのは表示用のマークアップです。書き出しのあと、ナビゲーション、チェックアウトの操作、決済、ライブデータをアプリケーションのロジックへ接続してください。