🍑

エンジニアのためのFigma超入門

2022/05/21に公開

Figma

エンジニアがFigmaを学ぶ利点

ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。

一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。

具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。

デザイナーの意図を汲み取ることができる
デザイナーと共通言語で話せる
実装の観点からデザイナーにFigmaの修正依頼ができる
↑の打ち返しを待たずに自分で軽微な修正ができる

というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。

スタイル

Figmaでは色・テキスト・エフェクトに対して何度も使うスタイルを定義することができます。

定義されたスタイルはFigma上の右側のパネルで以下のような形で表示されています。

ここでは、Body/1のテキストはfont-family: Hiragino Sans; font-size: 16px; line-height: 150%; font-weight: 400;と定義されています。一般に、Figma上のWeightは

Regularが400
Mediumが500、
Semi-Boldが600

のように対応しています。

定義されたデザイントークンはエンジニアとデザイナーとの間で共通言語として作用しますが、エンジニア側でこの機能の存在を知らなければ毎回Inspectからスタイルを確認し、それに沿ってCSSを書くということが横行してしまいます（そのような場面を何度か見てきました）。

反対にFigmaのスタイルの存在を知っていれば、コンポーネントライブラリのthemeで以下のようにvariantを設定することで、コンポーネントのpropsに対応するvariantを渡すだけで、上記のスタイリングを実現することができます。

theme.ts

import { extendTheme } from 'native-base';

export const theme = extendTheme({
  components: {
    Text: {
      variants: {
        body1: () => ({
          fontWeight: 400,
          fontSize: 16,
          fontFamily: 'Hiragino Sans',
          lineHeight: '150%',
        }),
      },
    },
  },
});

/// コンポーネント側で以下のように使う
<Text variant='body1'>こんにちわ</Text>

もし使用しているコンポーネントライブラリが上記のような機能を提供していなくても、以下の記事のような手法を応用すれば同様の仕組みは実現できるかと思いますので、興味があればご参考にしてみてください（手前味噌で恐縮ですが...）。

また、Figma上でスタイルを定義する際にスタイル名にスラッシュ（/）を入れるとスタイルをグルーピングすることができます。

実装上では以下のようにして階層構造化するとFigmaのスタイルと粒度を一致させることができるでしょう。

colors.ts

export const colors = {
  Primary: {
    Main: '#2097E5',
    Light: '#EBF5FA',
  },
};

Variants

Variantsは同一コンポーネントに対して複数の状態を定義することができる機能です。

例えばボタンコンポーネントには一般的にボタンが押せる状態（Enabled）とボタンが押せない状態（Disabled）があると思います。

Figmaでは、下記のように複数の状態を持つボタンコンポーネントをvariants化することで、その状態のプロパティ名と値を設定することができます。

ここではボタンコンポーネントのvariantsにEnabledというプロパティ名を定義し、そこにtrueとfalseという２つの値を用意しています。

また、variantsの値がtrueとfalseの場合は以下のようにインスタンス化されたコンポーネントの状態をtoggleボタンで変更することができます。

エンジニアがvariantsの役割を分かっていると、Figma上で定義されたvariantsを元にデザイナーがそのコンポーネントに対してどのような状態を持つことを期待しているのか汲み取ることができるのに加えて、デザイン上と実装でプロパティを一致させることができます。

また、実装側でも以下のようにFigma上の定義と粒度を合わせることがで来ます。

theme.ts

import { extendTheme, IButtonProps } from 'native-base';
import { colors } from '@src/styles';

export const theme = extendTheme({
  components: {
    Button: {
      variants: {
        primary: ({ disabled }: IButtonProps) => {
          return {
            bg: disabled ? colors.Disabled : colors.Main,
          };
        },
      },
    },
  },
});

ただ、コンポーネントが持つ状態が多く存在する場合、それら一つ一つのvariantをFigma上で定義するのはデザイナー側の負担にもなり得ます。

反対に実装上はReactであればpropsの値を一つ変更するだけで状態の変更を実現できるので、コンポーネントの持つ状態についてはStorybook等のUIコンポーネントカタログツール上で運用している会社もあるそうです。これについてはチームの状況と照らし合わせながら運用方法を議論すると良いでしょう。

また、最近では以下のようなツールも出てきており、Figma上でコンポーネントカタログを作成するのも容易になっているので参考にしてみても良いでしょう。

Auto Layout

Auto Layoutとは、Figma上のフレームやコンポーネントに対して付与することができるプロパティで、オブジェクト内の要素数やテキストの長さが変わった際にどのように振る舞うかを設定できます。

例えば、以下のように要素がバラバラに並んでいるFrameがあったとします。

こちらのFrameに右側のパネルからAuto Layoutを付与すると、以下のように要素を整列させることができます。
右側の矢印のマークで、要素の向きをHorizontalにするのかVerticalにするのか決定でき、その下のマークで要素の間隔、最下段のマークで要素のFrameに対するPaddingを設定できます。

勘が良い方であればこの時点でお気づきかと思いますが、Auto LayoutはCSSでいうFlexboxとほぼ同じです。

上の例で言えば、要素は垂直（Vertical）方向に並んでいるので、CSSで言えばdisplay: flex, flexDirection: 'column'と同義になります。また、各アイテムの間隔は50pxで並んでいるので、CSSで言うgapと対応しており、Paddingはそのままpaddingと対応しています。

Reactでコンポーネント化する場合は以下と近しい実装になるかと思います。

export const AvatarCard: React.FC = React.memo(() => {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '50px',
        padding: '27px 42px',
      }}
    >
      <Image src={Avator1} width="140px" height="140px" />
      <Image src={Avator2} width="140px" height="140px" />
      <Image src={Avator3} width="140px" height="140px" />
    </div>
  );
});

この概念を頭に入れておけば、次回Figmaのデザインを元に実装する際は該当FrameやコンポーネントのAuto Layoutの設定を確認すると実装がしやすく（かつ正確に）できるようになるかと思います。

余談ですが、先日Config2022で発表されたFigmaの新しい機能では、Auto Layoutでアイテムの間隔にマイナス値を設定することが出来るようになりました。

それによって、以下のように各アバターが重なったデザインもAuto Layoutで実現することができます。

この他にもたくさん新しい機能が発表されたので、興味のある方は以下の動画を参考にしてみても良いでしょう。

おわりに

デザイナーとフロントエンド開発者が円滑に仕事を進めるためには、お互いにデザインの言語・認識を共有しておく必要があります。

例えばデザイナーがあるインターフェイス要素をAと呼んでいるのに対しエンジニアがその要素をBと呼んでいては、それは認識を共有できているとは言えません。

エンジニア側がFigmaの理解を深めることで、もちろんエンジニアには「よりスタイリングの実装がやりやすくなる」といった利点はありますが、それ以上にデザイナーとエンジニア間で共通認識を増やせることに意味があると思っています。

Figmaの知識があればスタイルやVariantのプロパティ、コンポーネントの命名についても一緒に議論することができ、より変更に強くスケーラブルなデザインシステム構築の一助となるでしょう。

最後まで記事を読んでいただきどうも有難うございました！