FramerでJavaScriptから設定可能なCSSプロパティを確認する方法💻

はじめに (対象読者・この記事でわかること)

この記事は、Framerを日常的に使っているデザイナー・開発者、特に JavaScript でコンポーネントのスタイルを動的に操作したい方を対象としています。Framer の Code Component や Override から CSS プロパティを設定する際、どのプロパティがサポートされているかを正確に把握できていないケースが多いです。本記事を読むと、Framer の内部で JavaScript から参照可能な CSS プロパティの一覧取得方法、公式ドキュメントの確認手順、実際のコード例とデバッグ手順が分かります。これにより、思わぬスタイルの未適用や、ランタイムエラーを未然に防げるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。
- HTML/CSS の基本的な知識
- JavaScript（ES6 以降）の基本的な文法
- Framer の基本操作（プロジェクト作成、Code Component の追加、Override の概念）

Framer における JavaScript から操作できる CSS の概要

Framer は内部で React ベースのコンポーネントを使用していますが、ユーザーが記述する JavaScript（主に Override 関数）は、React の style プロパティにオブジェクト形式で CSS を渡す形で実装されます。そのため、基本的に「React が受け付ける CSS プロパティ」＝「JavaScript から設定可能な CSS プロパティ」となります。

しかし、Framer が独自にラップしている UI コンポーネント（例: Frame, Stack, Text）は、いくつかの追加プロパティや除外されたプロパティがあります。たとえば、borderRadius はショートハンドとして borderTopLeftRadius 系統を個別に扱える一方、appearance のようなブラウザ固有のプロパティはサポート外です。

この違いを把握するためには、次の二つの情報源を併用します。

1. Framer の公式ドキュメント – Override の API リファレンスに「style オブジェクトに渡せるプロパティ」の一覧があります。
2. ブラウザの開発者ツール – 実際に Framer の UI がレンダリングされた DOM を調査し、style 属性に反映されている実プロパティを確認できます。

本稿では、これら二つの手法を組み合わせて、正確かつ網羅的に確認できるフロー を紹介します。

Framer で JavaScript が設定可能な CSS プロパティを実際に確認する手順

ここが記事のメインパートです。以下のステップに従って、Framer のプロジェクト内で利用できる CSS プロパティをリストアップし、必要に応じてカスタム検証コードを作成します。

ステップ 1：公式ドキュメントからベースリストを取得する

1. Framer の公式サイト（https://www.framer.com/docs/overrides/）にアクセスし、Override セクションを開く。
2. 「style」オブジェクトの説明箇所に記載されている「Supported CSS properties」の表を確認する。通常は color, backgroundColor, opacity, width, height, ... といった一般的なプロパティが列挙されています。
3. これらをテキストエディタにコピーし、JSON 形式の配列に整形する。例：

Json

[
  "backgroundColor",
  "border",
  "borderRadius",
  "boxShadow",
  "color",
  "display",
  "flexDirection",
  "fontSize",
  "height",
  "margin",
  "opacity",
  "overflow",
  "padding",
  "position",
  "width",
  "zIndex"
]

4. 注意点：公式ドキュメントは随時更新されるため、最新バージョンを必ず確認すること。

ステップ 2：実際の DOM から実装可能なプロパティを抽出する

公式リストだけでは網羅できないケースがあります。実際に Framer が生成する DOM を調査して、すべての CSS プロパティがどのように反映されるかを確認します。

1. Framer のプロジェクトで任意のページを作成し、Frame コンポーネントを 1 つ配置する。
2. その Frame に対して Override を追加し、以下のコードを貼り付ける。

Javascript

export function MyOverride(props) {
  // すべての style プロパティを取得し、コンソールへ出力
  console.log("Current style keys:", Object.keys(props.style || {}));
  return props;
}

3. プレビュー（Web）モードでページを表示し、ブラウザの開発者ツール（F12）を開く。
4. コンソールに出力された Current style keys の配列を見ると、Framer が自動的に付与しているデフォルトスタイルと、ユーザーが上書き可能なプロパティが分かります。

5. さらに、実際の DOM 要素（div[data-framer-name] など）を右クリックし、「Styles」パネルで表示されるすべてのプロパティ名をコピーする。Chrome は Copy > Copy Styles が便利です。

6. コピーしたスタイル文字列をスクリプトでパースし、ユニークなプロパティ名だけを抽出します。簡易的な Node.js スクリプト例：

Javascript

const fs = require('fs');
const styleText = fs.readFileSync('styles.txt', 'utf8'); // 事前にコピーしたスタイルテキスト
const props = new Set();
styleText.split(';').forEach(rule => {
  const name = rule.split(':')[0].trim();
  if (name) props.add(name);
});
console.log([...props]);

7. 以上で、実際に Framer が内部で使用している CSS プロパティの完全リストが得られます。

ステップ 3：公式リストと実体リストの比較・統合

1. ステップ 1 で取得した公式リストと、ステップ 2 で抽出した実体リストを比較し、差分を可視化します。lodash の difference 関数が便利です。

Javascript

const _ = require('lodash');
const official = require('./official.json');
const actual = require('./actual.json');

const onlyInOfficial = _.difference(official, actual);
const onlyInActual = _.difference(actual, official);

console.log('Only in official:', onlyInOfficial);
console.log('Only in actual:', onlyInActual);

2. onlyInOfficial に含まれるが実体に無いプロパティは、現在の Framer バージョンでは未実装、または内部的に除外されていることが分かります。逆に onlyInActual は、公式ドキュメントに記載がないが実際は利用可能な「隠しプロパティ」や、Framer が自動付与した内部スタイルです。

3. 目的に応じて ホワイトリスト（利用を保証したいプロパティ）と ブラックリスト（サポート外でエラーが起きやすいプロパティ）を作成すると、開発時の型安全性が向上します。

ハマった点やエラー解決

• プロパティ名のキャメルケース vs ケバブケース
  Framer の Override では JavaScript オブジェクトでキャメルケース（backgroundColor）を使用しますが、開発者ツール上の CSS 表示はケバブケース（background-color）です。比較スクリプトで統一しないと誤検出が起きます。解決策は、文字列を camelCase に正規化するユーティリティ関数を導入することです。

• 非表示要素（display: none）に対する取得失敗
  display: none の要素はスタイルパネルに表示されないことがあり、実体リストが不完全になるケースがあります。要素の computedStyle を window.getComputedStyle(element) で取得し、display が none でもプロパティ名を抽出するようにすると回避できます。

• Framer のアップデートでリストが変わる
  Framer は頻繁にアップデートされ、内部実装が変わります。手動でリストを管理すると古くなるリスクがあります。CI パイプラインに上記スクリプトを組み込み、プルリクエスト時に自動で最新リストを生成するフローを作ると保守が楽になります。

解決策まとめ

1. キャメルケース正規化：function toCamel(str){ return str.replace(/-([a-z])/g,(_,c)=>c.toUpperCase()); } を利用。
2. computedStyle の活用：const styles = getComputedStyle(elem); Object.keys(styles).forEach(k=>props.add(k)); で確実に取得。
3. CI で自動リスト生成：GitHub Actions で npm run generate-css-list を走らせ、css-props.json をリポジトリにコミット。

まとめ

本記事では、Framer の Override から JavaScript で設定可能な CSS プロパティを 公式ドキュメントと実際の DOM の両側面から検証し、網羅的にリスト化する手順 を紹介しました。

• 公式リスト取得 → 基本的なサポート範囲を把握
• DOM 解析 → 実装上の実体プロパティを抽出
• 比較統合 → 未実装・隠れプロパティを可視化し、ホワイトリストを作成

これにより、スタイル設定時の予期せぬエラーを防ぎ、Framer のデザインとコードの一貫性を高めることができます。次回は、取得したプロパティリストを型定義（TypeScript）に組み込む方法や、デザインシステムとの連携手法を深掘りする予定です。

参考資料

• Framer Overrides Documentation
• MDN Web Docs – CSS Properties Reference
• Chrome DevTools – CSS Overview
• 「React – Inline Styles」 (公式)
• 「JavaScript – Object.keys」 (MDN)