メインコンテンツまでスキップ

色・タイポグラフィ・アイコンの設定

Lucy Studioは色(Color)・タイポグラフィ(Typography)・アイコン(Icon)をプロジェクト全体のパレット/トークンとして事前に登録しておき、各画面・コンポーネントがこれを参照してスタイルを適用する仕組みを採用しています。値を画面ごとに直接入力(ハードコーディング)せず、パレットを通じて管理することで、後でブランドカラーやフォントが変わっても1か所を修正するだけで、参照している全ての画面に一括反映されます。

タイポグラフィ(Semantic Font Styles)の適用​

タイトル、本文、キャプションなどのテキストスタイルは、フォントファミリー・サイズ・太さ・行間・字間を1つのセットとして事前定義されており、再利用できます。

タイトル/本文/キャプションなど用途別に30種類以上の事前定義スタイルが用意されており、フォントファミリーはリストから名前で選択します。

各テキストスタイルはMobile / Tablet / Desktopの3つのデバイスタイプ(DeviceType)で構成されているため、スタイルを登録する際は各タイプごとに値を個別に入力する必要があります。デバイスタイプ(ブレークポイント)ごとにビューポートサイズが異なり、最適なフォントサイズも異なるためです。

カスタムテキストスタイルの追加(Add Text Style)​

事前定義済みのプリセット以外に、Text Styleテーマエディタの[+Add Custom Text Style]アクションから新しいテキストスタイルを直接追加できます。

カスタムテキストスタイル追加画面

Style Name、Font Size、Letter Spacing、Line Height、Font Weight、Font Family(ドロップダウン)を入力して保存すると、プリセット(SemanticFontStyles)と同じレジストリにカスタムスタイルとして登録されます。

ここで追加したスタイルは標準提供スタイルと同様に登録され、他の画面でも同じように選択して使用できます。

Figmaテキストスタイルのインポート(Import Figma Text Styles)​

Text Styleエディタの「Import from Figma」機能で、Figmaプラグインからコピーしたテキストスタイルのjsonを貼り付けると、解析されたスタイルをインポートできます。

ヒント

Figmaがまだインストールされていない場合は、先にFigmaのインストールを行ってください。Figmaは既にインストール済みでLucy Studio用のプラグインだけがない場合は、同じドキュメントの「Figma to LucyStudioプラグインのインストール」の部分を参照してください。

STEP 1. Figmaでテキストスタイルをコピーする​

  1. Figmaファイルでインポートしたいテキストスタイル(レイヤーまたはテキストスタイルプリセット)を選択します。
  2. インストールしたプラグインを実行し、[</> Copy Code]で選択したテキストスタイルをjson形式でクリップボードにコピーします。

Figmaプラグインでテキストスタイルをコピー

STEP 2. Lucy Studioに貼り付ける​

  1. Lucy StudioのText Styleエディタで[Import from Figma]ボタンをクリックします。
  2. 開いた入力欄に、先ほどコピーしたjsonの値を貼り付け(Paste、macOS: Cmd+V / Windows: Ctrl+V)します。
  3. [Import]ボタンを押して適用します。

Lucy StudioのFigmaテキストスタイルインポート画面

インポートされたスタイルはデバイスタイプ(Mobile/Tablet/Desktop)ごとの値が自動的にマッピングされ、既にインポート済みのスタイルは更新され、なければ新規追加されます。このようにインポートしたスタイルも標準提供スタイルと同様に使用できます。

カラーパレット(Semantic Colors)​

プロジェクトで使用する色は画面ごとに直接入力せず、事前に登録されたパレットから選択して使用します。色はプライマリカラー、背景/サーフェス、ボーダー/ライン、テキスト、ステータス表示など16グループに分類されています。

カラーパレット画面

カスタムカラーの追加(Add Color)​

事前定義済みのカラーパレット以外に、Colorエディタの[+Add Color]アクションから新しい色を直接追加できます。色の名前と値(Hexなど)を入力して保存すると、プリセット(Semantic Colors)と同じレジストリにカスタムカラーとして登録されます。

ここで追加した色は標準提供の色と同様に登録され、他の画面でも同じように選択して使用できます。

Figmaカラーのインポート(Import Figma Colors)​

Colorエディタの「Import from Figma」機能で、FigmaのVariables/Stylesで定義された色の値をインポートできます。Text Styleと同様に、Figmaプラグインからコピーした色のjsonを貼り付けることで、解析された色を登録できます。

ヒント

Figmaやプラグインのインストールが必要な場合はFigmaのインストールを参照してください。

Figmaカラーインポート — プラグイン画面 Figmaカラーインポート — Lucy Studio画面

インポートされた色は、既に登録済みの色は更新され、なければ新規追加されます。このようにインポートした色も標準提供の色と同様に使用できます。

アイコン​

アイコンは標準提供のMaterial Iconsと、直接登録するCustom Iconsの2つの方式で使用できます。ウィジェットにアイコンを指定する際、1つの選択画面で両方の種類をまとめて選べます。

カスタムアイコンの登録(Custom Icons)​

SVGアイコンをまとめて1つのアイコンセットとして登録すると、以後アイコン選択画面のCustom Iconsタブから選択して使用できます。

  1. 新しいアイコンセットを作成し、名前を付けます。
  2. セットにSVGファイルを追加します。
  3. 追加したSVGを1つのアイコンセットに変換(Generate)します。
  4. 変換したアイコンセットを登録すれば完了です。

登録したカスタムアイコンもMaterial Iconsと同様に、サイズ・色を自由に指定できます。

カスタムアイコンセット画面

標準アイコンライブラリの使用(Material Icons)​

Flutterが標準提供するMaterial Iconsセットをそのまま選択して使用できます。

補足事項​

  • 色/フォント/アイコンの値はパレット・トークンを1か所修正するだけで、参照している全ての画面に反映されます。
  • アイコン選択画面ではMaterial IconsとCustom Iconsをタブで切り替えながら選べます。