エンジニアが最初に知っておきたい5つの機能

Figmaの基本的な利用方法から実務に役立つTipsまで紹介する本連載。第6回となるこの記事では「エンジニアが最初に知っておきたい5つの機能」について、フロントエンドエンジニアのseya(せや)が紹介します。

私はFigmaを使って、デザイナーと共同作業を進めることがよくあります。Figmaの基礎的な機能を理解することで、エンジニアはデザイナーの意図をくめるようになり、効率的なコーディングが可能になると日々の仕事で実感しています。

例えば、後述する「オートレイアウト」や「制約(Constraints)」をデザイナーが設定してくれていても、エンジニアが意図をくむことができないために想定と異なるものができあがってしまうことがあります。また、エンジニアからデザイナーに対して、デザイン作成のフィードバックができるようになることで、より生産性を上げられます。

それでは、5つの機能を紹介していきましょう。

インスペクトモード

エンジニアが知っておきたい最も基本的な機能が、スタイリング(CSS)を確認する際に使うインスペクトモードです。

まずは、デザインパネル上部からインスペクトモードに切り替えます。次に、スタイルを確認したい対象のオブジェクトを選択すると、CSSの情報が表示されます。

• インスペクトモードでオブジェクトのプロパティやCSSを確認できる

ここでは、「色」「タイポグラフィ」「border-radius」「shadow」「display:flex」「padding」などの情報を確認できます。

留意すべき点としては、displayやpaddingなどの値は、オートレイアウトが設定されていないと取得することができないことです。次項にて「オートレイアウト」について解説します。

オートレイアウト

オートレイアウトは、フレーム内の子レイヤーの高さや幅に応じて、フレーム自体のサイズを自動で変更させる機能です。

この機能が登場する前は、デザイン要素はすべてabsoluteな配置(絶対配置)をしており、内容が増えたり減ったりする際には、手動でフレームのサイズを変える必要がありました。

オートレイアウトを使ってpaddingの値や要素間のマージン、レイアウトの仕方(現状はdisplay:flexで設定するflex-start、space-between、flex-endといった値)などを指定すれば、あとは自動でフレームを調整してくれます。デザインのメンテナビリティを向上するうえで、オートレイアウトは重要な機能です。

• オートレイアウトは、デザイン要素の増減に合わせてフレームのサイズを自動調整してくれる

ここまでの説明で、エンジニアの方はお気づきかもしれませんが、これらのオートレイアウトによって付与される情報は、「display:flex」なレイアウトで組む時に必要な情報とほぼ同じです。

次の画像でわかるように、Figma上でCSSを確認するとflexでの値が表示されます。

• オートレイアウトが設定されたフレームは、CSS上では「display: flex」なレイアウトとなる

オートレイアウトは、デザインからすぐにレイアウトのスタイリングが起こしやすいです。また、これに則ることによりデザイン自体にも無理なレイアウトが生まれづらいため、エンジニアにとってもメリットの大きい機能となっています。

制約(Constraints)

制約は、親レイヤーの高さ・幅が変わった時に、オブジェクトがどう振る舞うかを指定できる機能です。これはレスポンシブな挙動について確認する際に役立ちます。

例えば、「このオブジェクトは画面が横に広がった時に一緒に長くなるのか?」といった疑問は、制約を見ることで解決できます。

制約を確認するには、制約の設定を確認したいオブジェクトを選択します。すると、右側のデザインパネルに設定が表示されます。

• デザインパネルから制約(Constraints)の設定を確認できる

例えば、下図のように制約が「左右」に指定されている場合には、「親のフレームが横に伸びたらオブジェクトも連動して左右に動く」ということを意味します。左右だけでなく、「右」か「左」のみを設定することが可能です。同様に「上下」も「上」か「下」のみを設定できます。

• フレームにオブジェクトがどのように連動するかわかる

デザイナーが制約を厳密に設定していないこともありますが、エンジニアとしては覚えておきたい機能の1つです。

コンポーネント

昨今のフロントエンド開発では、UI(User Interface)をコンポーネントとして分解して進めることが一般的になっていますが、Figmaでもコンポーネントを作る機能があります。

コンポーネントは、再利用可能なデザイン要素を作成し、一元的に管理できるようにする機能です。これがあることによりデザイン作業の効率化や、同じ目的の動作に対して一貫性のあるUIをデザインすることが可能になります。

例えば、下図のように「MEMBER」と書かれたボタンのコンポーネントを作成し、それを基に新たなレイヤーを作るとしましょう。コンポーネントを基に作成したレイヤーは「インスタンス」と呼びます。コンポーネントの色を赤系から青系へと変えると、インスタンスのスタイリングも同じように変更されます。

• コンポーネントに変化を加えると、インスタンスにも反映される

コンポーネントの機能を知っておくことで、コーディングをする際のコンポーネント設計の粒度感や、プロパティを考える時の指針となります。ある種、コンポーネントはデザインとフロントエンドコードのインターフェースとも捉えられるので、エンジニアもデザイナーと一緒にコンポーネントの設計に挑戦してみてもいいかもしれません。

ファイル内で使われているコンポーネントは、レイヤーパネル上部の「アセット」をクリックすると確認することができます。

• レイヤーパネル上部の「アセット」からコンポーネントを確認

バリアント

コンポーネントのバリエーションを表現できるバリアントという機能もあります。

例えば、ボタンのようなコンポーネントは、Theme(Primary、Secondary、Danger、etc.)やsize(large、medium、small)など、さまざまなプロパティを持つことがあります。

バリアントでは、プロパティの変化と見た目の違いを1つのコンポーネントとして定義できます。

• バリアントでThemeやsizeの異なるコンポーネントを作成する

エンジニア目線で何が嬉しいかというと、1つのコンポーネントにどのようなバリエーションがあるかを一目で把握することができるため、コンポーネントを実装する時に状態の漏れを出しにくくなります。

例えば、1つのコンポーネントに対してホバー時の状態、Emptyの状態、ローディング時の状態など、複数の指定がされていることは往々にしてあります。ただ、それらの一覧性が低いと、「この状態の時には、この見た目になっていてほしい」というデザイナーの意図にエンジニアが気付かずに実装してしまう可能性があります。バリアントではそういった複数の状態と、その組み合わせが見やすくなります。

また、バリアントで指定するプロパティは多くの場合、コーディングする際のコンポーネントのプロパティと一緒になります。

デザインと実装でプロパティを同じにしておくと、デザインを新しく作ったり修正したりする際に、実装の変更難易度を低くできます。実装面での考え方に精通しているエンジニアも、一緒にバリアントの設計に加わると良いでしょう。

まとめ

今回は、エンジニアが知っておきたい5つの機能についてご紹介しました。

オートレイアウトや制約は、デザイナーが細かく設定していないこともあるため、エンジニアが意図を読み取れないことが往々にしてあります。

しかし、最初から完璧なデザインができあがることはそうありません。まずはデザイナーとコミュニケーションを取って、エンジニアからもデザインの作りに関してフィードバックできるようになっていくと、中長期的にお互いの生産性を高めることができるでしょう。