新しいテーマを作成する
- 左サイドバーで Studio > Themes に移動します。
- Add a theme をクリックします。
- テーマの名前を入力し、影響する Project(s) を選択します。
- (オプション)説明とタグを追加します。
- Next をクリックして Theme Builder を開きます。
色を定義する
- 色を追加: 16 進数コードを入力するか + アイコンをクリックします。グラデーションから色を選択したり、不透明度を調整したり、スポイトツールを使って画面からサンプリングしたりできます。
- 色を管理: 色をドラッグ アンド ドロップで並び替えます。ゴミ箱 アイコンをクリックして色を削除します。
Define theme colors が ON のときにテーマにコンポーネントを追加すると、そのコンポーネントのデフォルトの色がテーマカラーのリストに自動的に追加されます。
ロックされた色の変更
色がテーマ内のコンポーネントによって現在使用されている場合、その色を削除することはできません。ただし、色を編集することはできます。色を変更すると、その色を使用するテーマ内のすべてのコンポーネントに変更が自動的に適用されます。フォントを追加する
- + Add font をクリックします。
- フォントソースを選択します。
- From your website: Font Family 名を入力します。
- Link to a font file: Font Family 名とファイルの URL を入力します。
- Embed code: Font Family 名とインポートコードを入力します。
- Preview & add をクリックします。
- 含めたいフォントの太さを選択します。
- Add をクリックします。
コンポーネントを追加して管理する
Components セクションでは、チーム向けに要素(ボタン、画像、フォームなど)を事前構成し、テーマで許可されるコンポーネントを定義できます。同じコンポーネントタイプを複数回追加してバリエーションを作成できます。たとえば、別個の「Submit」ボタンと「Cancel」ボタンを作成できます。コンポーネントを追加する
- Components の横の + Add をクリックします。
- コンポーネントを検索するか、左サイドバーのカテゴリを参照します。
- 含めたいコンポーネントを選択します。
- Add components をクリックします。
コンポーネントを編集してロックする
コンポーネントがリストに追加されたら、secondary actions(3 点)メニューをクリックして管理します。
- Rename: コンポーネントに説明的な名前を付けます(例: “Primary CTA”)。
- Edit: コンポーネントエディタを開き、Widget Studio ツール を使ってスタイルを調整します。
- Lock: このコンポーネントの編集権限を制限します。代わりに、Secondary actions メニューの横の lock アイコンをクリックしてコンポーネントをロックすることもできます。
- ロック時: ユーザーはコンテンツ(テキスト/画像)、位置、サイズのみ変更できます。色や枠線などのデザイン要素は変更できません。
- ロック解除時: ユーザーはデザインを変更する完全な制御権を持ちます。