目次
目次
この文書はFramerを学ぶ日本のユーザーが日本語の資料不足で困ることを解決しようと、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使う皆さんに少しでも役立てば幸いです。
コンポーネントライブラリを作る理由
効率的な作業のためには、コンポーネントライブラリの構築が重要です。複数のプロジェクトで同じコンポーネントを再利用する場合、ライブラリを通じてコンポーネントを中央管理し、一度にコンポーネントを更新し、使用されるすべての場所に変更を適用することができます。これにより、時間を節約し、規模に関係なく一貫したデザインを保つことができます。
どのような要素をコンポーネントにできるのか？
Framerでは、簡単なものから複雑なものまで、ほとんどすべてのUI要素をコンポーネント化することができます。
ボタン
フッター
ナビゲーション
ページセクション
インタラクティブなグラフィックと要素
Note: 複雑な構造でもよく使われる場合はコンポーネント化するのが効率的です。
コンポーネントをライブラリに追加する方法
左側のパネルで
Assetsタブをクリック保存するコンポーネントを選択
コンポーネント名横のもっと見るメニュー(
⋯)をクリックし、Library>Addを選択
ライブラリからコンポーネントを取得する
⌘ + /(Mac)またはCtrl + /(Windows)でQuick Menuを開く利用可能なコンポーネントを探すまたは検索
複数のプロジェクトでコンポーネントを更新する
ライブラリに登録されたコンポーネントを修正すると、そのコンポーネントを使用するすべてのプロジェクトでUpdateボタンが有効になります。
Assetsタブで更新するコンポーネントを見つけるUpdateボタンをクリック
アップデートボタンだけをクリックすることで手作業なしですべてのコンポーネントを一括更新できます。
コンポーネント管理のヒント
1. 名前規則を設定する
フォルダーにはスラッシュを使用してください。
例えば、メニューコンポーネントを命名するとNavigation/Menuコンポーネントは「ナビゲーション」というフォルダー下にグループ化されます。状態、テーマ、バリアントを含むように構成要素の名前を構造的に指定してください。
例:Buttons/Navigation/PrimaryButton
2. コンポーネントを中央化する
すべてのコンポーネントを単一プロジェクトに保管し、簡単に更新して再利用できるようにします。
3. ブレークポイントごとにバリアントを作成する
コンポーネントバリアントの名前に
Desktop、Tablet、Phoneを含めてみてください。Framerが自動的にデバイスに適したバリアントを選択します。
4. 制約を設定する
最小/最大の幅と高さを明確に設定してください。画面のサイズが調整されるときにコンポーネントのサイズが意図したとおりに変形されます。
この記事はFramer公式ブログの『コンポーネントライブラリ設定のベストプラクティス』を翻訳・脚色したコンテンツです。
