今週（6/22〜6/28）はFigma Config 2026（6/23〜25、サンフランシスコ）が大きな山場でした。デザインキャンバスにGitHubのコードを直接持ち込む「Code Layers」は、Figmaがデザインツールではなくデザイン＋開発の統合環境を目指していることを明確にしました。同じ週にTypeScript 7.0 RCとVite 8.1.0のリリースも重なり、フロントエンドの道具がまとめてアップデートされた週です。
Figma Config 2026 — Code Layers・Motion・WebGPU Shaders、デザインツールの定義が変わった
6月23〜25日、サンフランシスコのMoscone Centerで Figma Config 2026 が開催されました（参加者8,000人以上）。単なる機能追加ではなく、「Figmaがなんであるか」を再定義する発表が続いた3日間でした。
出典: Figma Blog — Config 2026 Recap / TechCrunch — Figma adds code layers
今回の目玉は3本です。
Code Layers: GitHubリポジトリをFigmaキャンバスに直接クローンし、デザインレイヤーとコードレイヤーを同一ファイル内で共存させる機能。デザインから設計フレームを抽出→コード編集→Figmaに同期というループがGitHub PRと直結します。React + npmパッケージに対応。7月からwaitlistベータ開始予定。
Figma Motion: ネイティブのキーフレームタイムラインがFigmaデザインファイルに追加されました。CSS・JSON・React・MP4・WebM・SVG・GIF形式でエクスポートでき、AIツールに直接渡せます（MCP経由）。全プランのオープンベータで利用可能。
WebGPU Shaders: AIにプロンプトで指示してWebGPUシェーダーエフェクトを生成できる機能。Figmaのネイティブプロパティとして組み込まれます。
Figmaは「デザインキャンバスにコードを置く」という方向を選んだ。CursorやClaude CodeのようなAIコーディングIDEがデザインに近づいていく動きとは逆向きで、Figmaの側からコードに踏み込んでいます。デザインとエンジニアリングの境界が曖昧になっていく流れが加速しているのを感じます。デザイン〜実装ハンドオフのフローを持っているチームは、Code LayersのWaitlistに登録しておく価値があります。
💡 今すぐ試せる: Figma Motion のオープンベータを試して、既存のデザインに簡単なアニメーションを追加しCSS出力まで確認する
TypeScript 7.0 RC（6/22）— GoでコンパイラをRewrite、約10倍速に
6月22日、Microsoftが TypeScript 7.0 RC を発表しました。TypeScript 5.x〜6.xまでのコンパイラはTypeScript自身で書かれていましたが、7.0ではコンパイラをGoで全面的に書き直したバージョンがRCとして登場しています。
出典: TypeScript Blog — Announcing TypeScript 7.0 RC / Visual Studio Magazine — TypeScript 7.0 RC
Goによる再実装でネイティブコードの速度と共有メモリ並列処理が実現し、TypeScript 6.0比で約10倍のビルド高速化が報告されています。エディタ上の補完・型チェックも既に多くのチームで安定して使われているとのこと。
ひとつ注意点があります。安定したプログラムAPI（typescript-eslint・ts-morph・カスタムトランスフォーマーが依存するもの）は7.0には含まれず、7.1で対応予定です。ESLintの設定やビルドカスタマイズをTypeScript APIに依存している場合は、7.0ではなく7.1のリリース後に移行を検討してください。Stableリリースは1ヶ月以内の予定です。
「TypeScriptが速い」と体感できる機会はほとんどなかったのですが、10倍速はさすがに変わります。大きめのモノレポで型チェックに数十秒かかっていた場合、CI時間が劇的に短縮されます。RCで試してみる価値があります。
💡 今すぐ試せる: npm install -D typescript@rc でRCをインストールし、既存プロジェクトで tsc --build の速度を計測して比較する
CSS Grid Lanes（Masonry）— display: grid-lanes 1行でPinterest風タイルレイアウト
マソンリーレイアウト（Pinterest風のタイル型）は長年JavaScriptライブラリが必要でした。display: grid-lanes の登場でそれが1行のCSSになります。Safari 26+では既に安定版で動作しており、Chrome・Firefoxでもフラグ有効で試験可能です。
出典: MDN — Masonry Layout / CSS-Tricks — Masonry Layout is Now grid-lanes
/* これだけでMasonryになる */
.gallery {
display: grid-lanes;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* @supports でフォールバック（未対応ブラウザは通常グリッドに） */
@supports not (display: grid-lanes) {
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}通常の display: grid では行の高さが揃うため、異なる高さのカードを並べると大きな空白ができます。grid-lanes では各アイテムが自動的に最も短いカラムに入るため、空白なくタイル状に並びます。Masonry.js で必要だった「resize のたびに高さを計算してポジションを手動設定する」処理が不要になります。
See the Pen CSS Grid Lanes（Masonry）デモ — display: grid-lanes でJSゼロのタイル型レイアウト by BaseKENT (@basekent) on CodePen.
Masonry.js や isotope.js を使っていたレイアウトを、ライブラリなしのCSSに置き換えられます。フォールバックを display: grid にしておけば非対応ブラウザでも崩れない。Chrome・Firefoxのstable対応が揃う前にSafariで試しておく価値があります。
💡 今すぐ試せる: Safari Technology Preview で display: grid-lanes を1行追加して既存のカードギャラリーがMasonryになるか確認する
Vite 8.1.0（6/23）— Rolldown完全統合、Rust製バンドラーで10〜30倍高速ビルド
6月23日、Vite 8.1.0 がリリースされました。Vite 8.0（3月リリース）からの継続で、Rolldown（Rustで書かれた統合バンドラー）の安定化が進んでいます。
出典: Vite Blog — Vite 8.0 is out! / Vite Releases — GitHub
Vite 7.x まではバンドルに esbuild（Go製）と Rollup（JavaScript製）の2つを使い分けていました。Vite 8.0から Rolldown に一本化されたことで、開発・本番どちらも単一のRust製バンドラーが担います。esbuildとRollupを別々に管理していた二重構造が解消され、設定の一貫性も上がっています。
ビルド速度は10〜30倍の高速化が報告されており、大規模なエントリポイントを持つプロジェクトほど恩恵が大きくなります。プラグインAPIは Rollup と互換性を維持しているため、既存のプラグインはそのまま動作します。
8.1.0では Rolldown の安定性改善と、HMR（ホットモジュール置換）のエッジケース修正が主な内容です。
Viteを使っている場合、8系へのアップグレードは「速くなるだけ」で後退はほとんどない印象です。プラグイン互換も維持されているので、npm update vite してビルド時間を計測するだけで効果を確認できます。大きめのプロジェクトほど数秒単位で変わります。
💡 今すぐ試せる: npm install vite@latest で 8.1.0 に上げてビルド時間を計測。vite build --reporter verbose でステップごとの時間を確認
今週のひとこと
今週を一言で言えば「ツールの時代交代が一斉に動いた週」です。Figmaはデザインとコードの境界に踏み込み、TypeScriptはコンパイラを書き直し、Viteはバンドラーを刷新しました。それぞれ「今すぐ全員が移行するもの」ではなく「今のうちに試して準備しておくもの」として受け取るのがちょうどよいタイミングです。特にFigma Code LayersとTypeScript 7.0 RCは、安定版が出る前にRCやbetaで動きを把握しておくと、本番移行がスムーズになります。
