Framerのアセット・スタイル

"スタイル"を活用し効率よく制作・運用

アセットパネル

Framerの左パネルにあるアセットは、プロジェクト内で再利用可能な要素を管理する重要な場所です。主に以下のような要素が含まれています：

• Components：再利用可能なUIコンポーネント一覧

• Styles：テキストスタイルとカラースタイルの一覧

• Code：再利用可能なCode Override一覧

この中のStylesについて詳しく説明します。

テキストスタイル

テキストスタイルは、フォント、サイズ、色などのテキスト属性を一元管理できる機能です。一度スタイルを作成すれば、サイト全体で統一したテキストデザインを維持できます。

テキストスタイルの適用：

1. テキスト要素を選択

2. プロパティパネルのText → Stylesから適用したいスタイルを選択

ブレイクポイントの設定：

デスクトップの時は64px、タブレットの時は48px、モバイルの時は32pxなどのようにそれぞれの画面サイズに対応したフォントサイズや行間を指定することができます。テキストスタイルをhoverし、Editボタンから設定できます。

カラースタイルとダークモード

サイト全体で使用するカラーを定義することができます。

また、ライトモードとダークモードそれぞれのカラーを設定できます。

キャンバスツールバーにある専用アイコンで、ライトモードとダークモードを簡単に切り替えることができます（ショートカット：⌃⌘N）。これにより、デザインの両モードでの見え方をリアルタイムで確認できます。

このようにスタイルを効果的に活用することで、デザインの一貫性を保ちながら、効率的な作業が可能になります。