Figma on Figma：進化する視覚言語

主にデザイナー向けのツールであったFigmaは、この10年で開発者、プロダクトマネージャー、製品チーム全体を支援するエコシステムへと成長しました。デザイン以外にも手を広げる中で、ベクター言語に根ざしたビジュアル言語、つまり過去5年間私たちのブランドを象徴してきた静的なカーソルと黒くて太いアウトラインから脱却する必要性に気づいた当社は、想像から具現化への旅を切り開く上で携わった多くの人の手をアイデンティティに反映させたいと思ったのです。

当社は主張性の高いグロテスクなフォント「Figma Sans」の作成においてGrilli Typeと提携しました。また、Figma Sansに加えてFigma Condensed、Figma Mono、OH no Type提供のFigma Handという3つのフォントをご用意しています。

私たちは、次の4つの重要な基盤に基づいてブランドを刷新することに焦点を置きました。

• 共創に関与するさまざまな個人を代表する多用途のプリミティブ
• 多様な作成および構築モードに反映した動的な構成
• バリアブルを活用してコンテキスト全体で簡単に適応できる拡張されたカラーパレット
• 創造的プロセスのアクションとフローを活気づける統合された動作の原則

上記の要素を通じ、当社はFigmaの現在の立ち位置と、当社が目指す「役割や背景に関係なく誰もがアイデアを実現できる場」を反映したビジュアル言語を創り上げました。

サンドボックスで開始

探求のプロセスを開始するにあたり、Figmaのブランドスタジオは、ブレインストーミングや最初のアイデア出しから要素のインスペクトションや最終調整に至るまで、ユーザーによるFigmaの使用方法をすべて調査することにしました。

チームは共有スペースで起こる「平行遊び」に似たアクティビティのコンセプトに魅力を感じました。ブランドデザイナーのJefferson Chengは、イサム・ノグチと仙田満が設計したプレイグラウンドから初期のインスピレーションを得たことを振り返ります。「人々が集まってものづくりを行い、実験を行うための場所。Figmaのキャンバスにそっくりでした。」

チームは最終的に「プレイグラウンド」という例えから一歩踏み込み、1つの共有スペースで同時に行われるアクティビティの概念に基づいて構築を続けました。Figmaの無限キャンバスも、チームが方向性を探り、バリアブルを使って配色やパターンをテストするためのサンドボックスとして機能しました。ブランドスタジオディレクターのDamien Correllはこう説明しています。「キャンバスはさまざまなユーザーが異なる方法でオブジェクトを操作することを可能にします。開発者がインスペクションモードで長方形のような単純な形を見ている間、デザイナーは別の視点からその形を見ることができます。」

このような見方やコラボレーション方法が新たなビジュアル言語の中核となり、チームは考えられる限り多くのアクティビティをマッピングして、それぞれにルールと動作を割り当てました。これらのガイドラインは初期の探求の足がかりを提供し、1つの要素をいく通りにも操作して無数のストーリーを語ることができるビジュアル辞典の基盤を形成しました。

図像とイラストの再考

以前のイラストレーションシステムは、主役のような存在感を放つ幾何学的なシェイプ、つまり、ほぼすべての描画でお互いを押しのけ、主役として機能するシェイプに大きく依存していました。今回行われたデザインの刷新において、チームは今後数年間Figmaと共に成長できる、よりフレキシブルな言語を作り出すことを目指しました。

Damienこう強調しています。「永続的なビジュアルアイデンティティはシステムではなく、言語として捉えられるべきです。システムには厳格な規則や予測可能性が必要ですから。」

フレキシブルな言語作りを達成するため、Figmaのブランドスタジオは、「プリミティブ」のコレクションを開発しました。これは、当社のイラストの構成要素を形成する基本的なシェイプとなり、あいまいな塊から具象的な形状まで多岐にわたるもので、さまざまな形状や機能を示しています。

プリミティブは、日常のデジタルおよび物理的な技能の例からインスピレーションを受けました。

「多様なプリミティブはそれを作った人々の多様性を反映しています」とブランドデザイナーのLeandro Castelaoは説明します。微妙に不釣合でオープンエンドな性質により、いつでも新しい要素を追加できます。

各プリミティブはそれぞれ異なりますが、共通した重要な特徴を持っており、以前よりも大胆なグラフィックで、「ジャンボ」になっています。大きなシェイプ、特大のノード、大胆な色使いを想像してください。「ジャンボ」はサイズを意味しているだけでなく、ものづくりを行うときの細部へのこだわりや慎重さ、正確さも表しています。

「各要素にズームインして、不必要な部分を取り除き、構成に焦点を合わせたような感じでした」とJeffersonは加えます。重要なのは、プリミティブがベクターベースであり、Figmaで完全に作成できることです。

イームズ主義にあるように、「ディテールとは些細なつまらいものではなく、デザインを作ります。」

ジャンボノード（バウンディングボックスの角に固定された大きな正方形）は、Figma UIを強調し、キャンバスの「選択」動作を示唆します。ブランドデザイナーのMaria Chimishkyanにとって、蝶に表示されたジャンボノードは初期段階のハイライトでした。「すべてがまとまり始めたのです。簡潔で心に訴えかけるノードが有意義な選択を後押ししてくれると感じました。」

ノードはまた、動きやインタラクティブ性を表現する新たな方法を実現しました。オブジェクトの「編集中」は、四角いノードが円形に変わります。選択したオブジェクトは、Figmaで行うのと同じようにキャンバス上で移動したり、Z軸の順序を変更したりできます。プリミティブは「パッシブ」（単色のシェイプ）、「アクティブ」（パターン付き）、または「ハイパーアクティブ」（より広範な色のスペクトル）にすることができます。また、ジャンボの原則に従い、色、パターン、拡大縮小を使用してボーダーを有効化することもできます。

モーションデザイナーはブランドデザイナーと密接に協力してアニメーションの研究を行い、大規模なアクティビティやコラボレーションを表す破線のマーキーボーダーなど、要素の連携に関するアイデアを促進できるようにしました。

構成の調整

Figmaと同様、オブジェクトはキャンバス上の他のオブジェクトと相互に作用し、無数の構成を作り出すことができます。これらの配置を標準化するため、チームは製品開発プロセスの監査から取得したモダリティとアクションのリストを見直しました。「アイデア出し」はFigJamキャンバスに貼られた付箋のようなフリーフォームのコラージュで表現され、「デザイン」は操作と変換に大きく依存し、「構築」はコーディング、インスペクション、注釈の視覚的な抽象化で表現されます。

まとめると、これらの構成アレンジは以下の4つの主要な動きで構成されています。

• オーバーラップ：シェイプが互いにレイヤーを重ね合い、Figmaキャンバスの（時折の）乱雑さを受け入れます。
• 表示：選択したシェイプは、他の要素の基礎構造を「インスペクト」または明らかにできます。
• クラスタリング：シェイプとパターンが集まり、自由な構成を形成します。
• マルチムーブ：異なる構成要素が1つになります。

以前の黒いアウトラインスタイル

拡張されたカラーパレット

シェイプや構成が作品の多面性を伝達するように、拡張された当社のカラーパレットはメッセージをより際立たせます。シグネチャーカラーのパープルを維持しつつ、大胆な原色、明るいネオン色、落ち着いたアーストーンなど、コミュニティの多様性と製品の幅広い可能性を反映したカラーバリエーションを導入しました。

独特の色や色の組み合わせを認知してもらうことがブランディング成功の頂点と見なされる業界（たとえばコカ・コーラの赤やジョンディアの緑）における現代的なブランドにとって、そのようなアプローチは非現実的であるとDamienは考えています。「率直に言って、時間をかけて最初にブランドの資産価値を築いたのは[老舗ブランド]です。より洗練されたパレットを実現しようと努力している当社のすばらしい社内チームは、数字別に色を塗る、有限的な塗り絵のようなアプローチではなく、主義に基づいた方法で色を使用するスペクトラムが必要であることに気づきました。

ブランドスタジオは、バリアブルを使用してさまざまな表現を生み出し、複雑でありながら調和のとれた配色システムを開発しました。チームは同じ色相レベルで一見彩度の高くない2つの色を組み合わせ、並べて閲覧すると振動するエフェクトを作りました。黒いアウトラインがないことで、これらの色は互いにぶつかり合い、チームワークのエネルギーとフローを再現したかのような、鮮やかなコントラストと動きの感覚が生まれました。

チームは、鮮やかな原色のペアと4つの二次色からなる3つのヒーローカラースキームを構築しました。これらのスキームにはライトモードとダークモードがあり、コンテキストに応じて二次色が切り替わります。

イラストとプロダクトの画像は以下の2つの色原則に基づいています。

• 色調の鮮やかさ: 刺激的で予想外な色の組み合わせを生み出すこで、コントラストと区別のバランスをとりながら、アクティブなイメージを作り出します。
• 適応性が高い配色: 配色は柔軟に行うことができ、暗色から明色、単色から複合色まで、さまざまなニーズに応じたバリエーションを提供します。

マキシマリストの配色は、ジャンボ原則の拡大縮小と同様に、強調のために使用されます。

強調するために、マキシマリスト的な配色が用いられ、パターン、線、ハイパーアクティブなシェイプを際立たせます。

動きをつける

モーションは単なるアドオンではなく、当社の理念を表現する重要な要素です。当社では最初から、ビジュアル要素がどのように動き、相互に作用するかを検討してきました。ブランドモーションデザイナーのGilles Desmadrilleはこう説明します。「選択、アクティブ化、変換など、中心となる動きに重点を置きました。カーソルに頼らずにキャンバスを活用できます。」

すべての人のための構築の協調的なカオス

当社がブランドを刷新するプロセスはまったく直線的でなく、数か月にわたるコラボレーションを伴うものでした。チームはお互いの作業を取り入れて改良し、流れるように作業を進めました。チームがアイデアやイテレーションの考案者を見失うのはよくあることですが、スケーラブルなシステムを目指すチームにとって、これは理想的と言えます。Jeffersonはこう語ります。「Figmaはエゴをなくす上でも役立ちます。何がどこから始まったかは重要ではありません。力を合わせてすばらしいものを作ることが大切なのです。」

この全員参加のアプローチは、チームが迅速にイテレーションを行う上でも役立ちました。Mariaはこう加えます。「プリミティブを専門とする1人のデザイナーを待つのではなく、みんなで取り組んで、それを再利用しています。」チームはFigmaのデザインシステム機能を活用してブランドライブラリとツールキットを作成し、Figmaの全員がアセットを簡単に利用できるようにしました。

成長の余地

「これはゴールではなく、出発点です。」ブランドスタジオのデザインマネージャー、Taryn Cowartは続けます。「成長と変化に適応できるフレキシブルなシステムを作りました。」

これは、ブランドとしてのFigmaの進化を探るシリーズの第2部です。次回は新しいカスタムタイプフェース「Figma Sans」について詳しく説明します。

Figmaのブランドスタジオ:Andrea Helmbolt（ブランドストラテジスト）、Andy Luce（ブランドデザイナー）、Becca Ramos（ブランドデザイナー）、Catherine Bui（ブランドデザイナー）、Damien Correll（クリエイティブディレクター）、Gilles Desmadrille（ブランドモーションデザイナー）、Jefferson Cheng（ブランドデザイナー）、Kaley Aposporos（ブランドコピーライター）、Leandro Castelao（ブランドデザイナー）、Maria Chimishkyan（ブランドデザイナー）、Sydney Halle（ブランドプロデューサー）、Taryn Cowart（デザインマネージャー）

代理店コラボレーター：Buck（ホームキャンペーン）、Nimble（ストーリー）