FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

Figma Code Connect を進めて見えてきた改善ポイント

Figma

こんにちは。
ピクトリンク開発部 サイトチーム に所属しています松本です🐹

はじめに

昨年のアドベントカレンダーにて、『Figma Code Connect がなかなか進まない話』というタイトルで記事を書きました。

tech.furyu.jp今回の記事では、その後少しずつ整備を行い実際にCode Connectを進め始めて見えてきた改善ポイントを実作業をベースに紹介します。

前提条件
  • Figma Dev Modeが契約されていること
  • Figmaデスクトップアプリがインストールされていること
事前準備
  1. MCPサーバーを設定します。
    Figma公式のYoutubeチャンネルに投稿されている、『Figmaチュートリアル：FigmaデスクトップMCPサーバーの設定方法』こちらの動画が分かりやすいかと思います！
  2. Figma Code Connectを設定します。

上記作業が完了したら、Code Connectを開始する準備が整いました。
※詳しくは公式のヘルプページやチュートリアルなどのガイドが揃っているので、ご確認ください🌱

 

【AlertBanner】

サイト上部にアラートとして表示する帯状のコンポーネントです。

Figmaデザイン

現状デザイン側では、背景色、左右のアイコンについてプロパティが分かれておらず、この5種類がバリアント(Type)として用意されています。

プロダクトコード
  • propsにはchildren,color, icon, urlが存在する
  • icon未指定であれば左側のアイコンを表示しない
  • url未指定であれば右側『>』アイコンを表示しない
Code Connectファイル
const FIGMA_URL = 'FigmaデザインのURL';

figma.connect(AlertBanner, FIGMA_URL, {
    props: {
        color: figma.enum('Type', {
            Important: AlertBannerColor.IMPORTANT,
            Warning: AlertBannerColor.WARNING,
            Information: AlertBannerColor.PINK,
            InformationNoLink: AlertBannerColor.PINK,
            Nomal: AlertBannerColor.PINK,
        }),
        icon: figma.enum('Type', {
            Important: AlertBannerIcon.CAUTION,
            Warning: AlertBannerIcon.CAUTION,
            Information: AlertBannerIcon.ATTENTION,
            InformationNoLink: AlertBannerIcon.ATTENTION,
            Nomal: undefined,
        }),
        url: figma.enum('Type', {
            Important: '#',
            Warning: '#',
            Information: '#',
            InformationNoLink: undefined,
            Nomal: undefined,
        }),
    },
    example: ({ color, icon, url }) => (
        <AlertBanner color={color} icon={icon} url={url}>
            テキスト
        </AlertBanner>
    ),
});

現状デザイン側では、背景色、左右のアイコンについてプロパティが分かれておらず、この5種類がバリアント(Type)として用意されています。

なので、Code Connect用の設定ファイルでも全てTypeに対してそれぞれのプロパティの設定を書いてあげている状態になっています。

ちなみにType:ImportantをCode Connectのダイアログで確認するとこんな感じで表示されます。

もっと良くできそう

5パターン以外のアラートの種類が出現した際に柔軟に対応できるようにするためには、Typeで管理している状態を分離させるとより分かりやすく管理できそうだと思いました。
デザインデータでVariantType(実装:color), IconType(実装:icon), hasLink(実装:url)みたいな複数プロパティで管理するとか。

そうするとCode Connectファイルは以下のように、プロパティに対して必要な値のみを設定する感じになります。

const FIGMA_URL = 'FigmaデザインのURL';

figma.connect(AlertBanner, FIGMA_URL, {
    props: {
        color: figma.enum('VariantType', {
            Important: AlertBannerColor.IMPORTANT,
            Warning: AlertBannerColor.WARNING,
            Information: AlertBannerColor.PINK
        }),
        icon: figma.enum('IconType', {
            Caution: AlertBannerIcon.CAUTION,
            Attention: AlertBannerIcon.ATTENTION,
            None: undefined,
        }),
        url: figma.enum('hasLink', {
            hasLink: '#',
            hasNotLink: undefined,
        }),
    },
    example: ({ color, icon, url }) => (
        <AlertBanner color={color} icon={icon} url={url}>
            テキスト
        </AlertBanner>
    ),
});

必要な情報が必要な場所に設定されるようになり、分かりやすくなります。

 

【Button】

基本のボタンコンポーネントです。

Figmaデザイン

基本のボタンコンポーネントセット(紫の点線で囲われている部分)は画像左側でこの6種類が存在し、アイコンありのパターンやサイズ違いは画像右側のように別のコンポーネントセットで用意されています。

プロダクトコード
  • propsにはchildren, style, icon, size, disabledが存在する
  • icon未指定であればアイコンを表示しない
  • size未指定であればデフォルト値適用
  • disabledの制御を行う場合はbooleanを渡す
Code Connectファイル
const FIGMA_URL = 'FigmaデザインのURL';

figma.connect(Button, FIGMA_URL, {
    props: {
        style: figma.enum('Type', {
            Primary: ButtonStyleType.PRIMARY,
            Secondary: ButtonStyleType.SECONDARY,
            Tertiary: ButtonStyleType.TERTIARY,
            Quaternary: ButtonStyleType.QUATERNARY,
            /**
             * Disabled: 基本的な非活性デザイン
             * OutlineDisabled: 背景色などの関係でDisabledが使用できない時に使用する非活性デザイン
             * 上記4種類のボタンに対するDisable表現なので設定しない
             */
            //Disabled: ButtonStyleType.PRIMARY,
            //OutlineDisabled: ButtonStyleType.PRIMARY,
        }),
        /**
         * Disableがバリアントに含まれているのでこういった設定
         */
        disabled: figma.enum('Type', {
            Primary: false,
            Secondary: false,
            Tertiary: false,
            Quaternary: false,
            Disabled: true,
            OutlineDisabled: true,
        }),
    },
    example: ({ style, disabled }) => (
        <Button buttonStyleType={style} disabled={disabled} >
            ラベル
        </Button>
    ),
});

デザイン側で混乱を招かないよう、あえてCode Connectで値を渡さないという選択をとっていますが、何が設定されてどういうデザインになるのか紐付けが分かりにくい状態です。

もっと良くできそう

それぞれのButtonStyleTypeに対しDisableのデザインが存在するので、そのプロパティ(スタイルと状態)は分けると分かりやすくなりそうです。

こんな感じ

上記デザイン構成で、さらに実装側で非活性のデザインを指定できるようにするとCode Connectファイルはこのようになります。

const FIGMA_URL = 'FigmaデザインのURL';

figma.connect(Button, FIGMA_URL, {
    props: {
        style: figma.enum('Type', {
            Primary: ButtonStyleType.PRIMARY,
            Secondary: ButtonStyleType.SECONDARY,
            Tertiary: ButtonStyleType.TERTIARY,
            Quaternary: ButtonStyleType.QUATERNARY,
        }),
        disabled: figma.enum("disabled", {
            Default: false,
            Disabled: true,
            OutlineDisabled: true,
        }),
        disabledStyle: figma.enum("disabledType", {
            Disabled: ButtonDisabledStyleType.DEFAULT,
            OutlineDisabled: ButtonDisabledStyleType.OUTLINE,
        }),
    },
    example: ({ style, disabled, disabledStyle }) => (
        <Button buttonStyleType={style} disabled={disabled} buttonDisableStyleType={disabledStyle} >
            ラベル
        </Button>
    ),
});

設定した値がどう効くのかがパッと見で分かりやすくなったように感じます！　

参考

help.figma.com

こちらのページでは、アイコンの有無など全てを含めて一つのButtonコンポーネントセットとして扱っていました。

弊チームではコンポーネントセットが細かめに分かれていますが、統合や分離はデザイナーの管理しやすさ優先で決めてしまって良さそうだなと🤔

 

改善の余地あり！　

単純なコンポーネントは、Figmaファイルを作成してサクサクとCode Connectできましたが、複数のプロパティによってコンポーネントの状態が変わる物に関しては、プロダクトコード・デザイン共に工夫して今よりも分かりやすくできそうだなと感じます！　

さいごに

当初、早く進めたいという気持ちが先行し「プロダクトコードに合わせてFigmaを変える」か「Figmaに合わせてプロダクトコードを変える」かという考えに陥りがちだったのですが、実際にはデザインと実装の両方を少しずつ寄せていく作業なのだなと強く感じました。

Figmaは

  • デザイナーが管理しやすいこと
  • Figma上でコンポーネントとして再利用しやすいこと
  • プロダクト内でも使い回しやすいこと

といった、デザインシステムとしての扱いやすさも重要です。

今回の作業で、開発からもデザインのバリアントやプロパティの改善提案ができるようになり、両方の視点から改善について考えるきっかけになりました。