デザインシステムに適したコード

デザインシステムは、デザインとコードの間のギャップを埋めるための最も強力なツールの1つです。共通の言語を作成することで、デザイナーと開発者がそれぞれのワークフローを横断して効率的に協力できるようになります。私たちは、自動レイアウト、バリアブル、コンポーネントプロパティ、そして昨年ローンチした開発モードなどの機能を通じて、デザインシステムをコードにより近づけるために一生懸命取り組んでいます。

弊社の営業チームにお問い合わせください。お客様用にカスタマイズした、デザインシステム向け最新機能の活用方法をご案内します。

これらの発展はありましたが、1つの大きな課題がまだ残っています。それは導入についてです。私はエンジニアリングマネージャーとしてこれを直接目にしてきました。顧客と話をする中で、「デザインシステムを構築したが、それが十分に活用されていない」ということを何度も耳にしました。開発者はデザインシステムの一部を使用しているかもしれませんが、デザインシステムに存在するすべてのものについて認識しているわけではありません。また、デザインシステムを使用する際、彼らは意図せずにコンポーネントやパターンを誤って使用するか、システムの意図したガイドラインと一致しない方法で使用してしまうことがあります。これは重要な問題です。なぜなら、デザインシステムの成功は、それが単に使用されるだけでなく、正しくかつ一貫して使用されることにかかっているからです。

これが、私がCode Connectを紹介するのをとても楽しみにしている理由です。Code Connectは、コードを開発者にとってよりアクセスしやすく、有用にすることで、組織におけるデザインシステムの導入を促進する新しいツールです。Code Connectを使用すると、開発モードに表示されるコードスニペットをカスタマイズできるため、開発者は自動生成されたCSSではなく、実際のデザインシステムのコードを見ることができます。その結果、より迅速かつ効率的な開発、そして組織全体でのデザインシステムの導入率の向上が実現されます。重複した、一時的なコンポーネントの作成やメンテナンス作業を削減することもできます。

デザインとコードをつなぐ

長い間、私たちは大規模なデザインシステムの導入について考えてきました。導入の障壁は単なる個々のワークフローや好みの問題だけではありません。それはデザインとコードの間により広いギャップがあることを意味します。当社のCEOであるDylan Fieldは、デザインとコードが伝統的に異なる世界に存在していると説明しています。「デザインとコードの間には自然な緊張関係があります。デザインの世界では、何を構築するかを決定することが焦点になりますが、コードの世界では、それを構築することが焦点です... 実際には、彼らは製品を実現するために協力しているパートナーです」

デザイナーと開発者は、それぞれ異なるツールを使い、異なる制約や考慮事項を持っています。デザイナーは創造性や探求を優先しますが、開発者は構造や保守性を優先します。Figmaでは、デザイナーと開発者が、自由な探求と構造化されたシステマティックな実装の間をシームレスに移動できる世界を目指しています。Code Connectは、その方向へのさらなる一歩です。

Figma Designer Advocate Ana Boyer hosts a Design to Code: Roundtable discussion with Bumble, GitHub, and HP, where they discuss the common challenges their design systems teams face in connecting design to code and share their first impressions of Code Connect.

開発者のニーズに応える

Code Connectは、コードの力をデザインツールに取り込むことで、このギャップを埋めることを目指しています。Code Connectは、JavaScriptおよびTypeScriptプロジェクト用のnpmを介したユーティリティであり、SwiftUIプロジェクト用のSwift Package Managerでも提供されています。これにより、開発者はプラットフォームに関係なく、自分のプロジェクトで簡単にCode Connectをインストールして使用できます。より多くのプラットフォームサポートが近日公開される予定で、開発者の既存のツールやワークフローへのシームレスな統合を通じて、開発者のニーズに応えることを目指しています。

パッケージとセットアップ手順はGitHubにあり、開発者はシンプルなコマンドラインインターフェースを介してそれをインストールできます。これは、開発者が既に知っていて使用しているツールとワークフローにマッピングされます。

In this session, Jake Albaugh, Figma developer advocate, shares an overview on how to more connected design system with Code Connect and some tips for getting get started.

Code Connectがインストールされると、デザインシステムチームは、デザインシステムの使用方法に関するベストプラクティスやドキュメントを、モックアップに紐付けて表示または配布できます。つまり、開発者がモックアップをクリックする際、それをデザインシステムでどのように構築するかを調べるために文書やコードを探す必要がありません。代わりに、彼らは単にクリックするだけで、デザインシステムチームが公開した承認済みでメンテナンスされたコードサンプルを取得することができます。

これには大きな利点があります。開発者がコンポーネントを書き直す必要がないため、メンテナンスをする必要のあるコードが少なくなります。ゼロからコンポーネントを作成する代わりに既存のものを使用することで、開発者はより効率的かつ効果的に作業できます。また、デザインシステムにより厳密に準拠することで、アプリケーション全体でのアクセシビリティと一貫性をより簡単に向上させることができます。

以下は、システムにCode Connectを実装する方法の例です。

1import * as figma from '@figma/code-connect'
2
3figma.connect(Button, 'https://...', {
4  props: {
5    label: figma.string('Text Content'),
6    disabled: figma.boolean('Disabled'),
7    type: figma.enum('Type', {
8      Primary: 'primary',
9      Secondary: 'secondary',
10    }),
11  },
12  example: ({ disabled, text, type }) => {
13    return (
14      <Button disabled={disabled} type={type}>
15        {text}
16      </Button>
17    )
18  },
19})
20

1import Figma
2
3struct Button_connection : FigmaConnect {
4  let component = Button.self
5  let figmaNodeUrl: String = "https://..."
6
7  @FigmaProp("Text Content")
8  var label: String = "Submit"
9
10  @FigmaProp("disabled")
11  var disabled: Bool = false
12
13   @FigmaProp(
14      "Variant",
15      mapping: [
16          "Primary": ButtonVariant.primary,
17          "Secondary": ButtonVariant.secondary,
18          "Destructive": ButtonVariant.danger
19      ]
20  )
21  var type: ButtonType = .primary
22
23   var body: some View {
24      Button(type: self.type, disabled: self.disabled, label: {
25          Text(self.label)
26      })
27   }
28}

より統一されたワークフロー

開発者がCode Connectを使用すると、彼らは新しいコードを生成するのではなく、デザインシステムチームが公開した承認済みでメンテナンスされたコードサンプルとドキュメントにアクセスします。これにより、自動コード生成に頼ることなく、デザインシステムのガイドラインに一貫性を保ち、準拠することができます。Code Connectは、デザインシステムから既存のコードとドキュメントを表示および配布するものです。デザインシステムを最も簡単な手段にすることで、導入を促進し、すべての人が同じ信頼できる情報源から作業するようにできます。

特にチームが拡大すると、これは非常に重要です。小規模なチームの場合、全員が同じ理解を持つようにすることは簡単です。しかし、チームが成長すると、隔たりが生まれ始めます。デザイナーや開発者は独立して作業をし始め、デザインシステムは共有された標準ではなく、緩いガイドラインが集まっただけのものになってしまいます。Code Connectを使用することで、チームがどれだけ大きくなっても、簡単に全員が同じ理解を持てるようにしたいと考えています。

しかし、Code Connectは始まりに過ぎません。Code Connectは、将来的にデザインと開発のワークフローをさらに統合する、多くのエキサイティングな可能性秘めています。例えば、コードとデザインの両方でデザインシステムの使用状況を自動的に監査することが可能になり、デザインとコードの同期が取れていない箇所を特定できるかもしれません。また、デザインシステムの使用状況に関する分析やインサイトを提供し、チームが実際にシステムをどのように使用しているかをよりよく理解するのに役立つ可能性もあります。もう一つの可能性は、デザインシステムの更新に関する承認フローをデザインとエンジニアリングチームの間で可能にすることです。これにより、デザインシステムへの変更がチーム全体で適切にレビューされ、調整されるようにできます。

現在、これらの具体的な機能は私たちのロードマップに含まれていませんが、デザインとコードの間をつなぐことで、将来的に多くの探求とイノベーションの機会が生まれるでしょう。私たちのビジョンは、デザインシステムやコンポーネントだけでなく、デザインとコードの間にさらに深いつながりを作り出すことです。バリアブル、アイコン、タイポグラフィなど、デザインに関連するすべての要素にそのつながりがある未来を想像してみてください。Code Connectはその基盤を築いており、この技術が将来さらに強力なワークフローをサポートすることを楽しみにしています。

Code Connectは、Figmaのビジネスプランおよびエンタープライズプラン向けにベータ版として提供され、一般公開は今年後半を予定しています。ベータ版はアイデアを提示し、それに対する反応をテストし、コミュニティからフィードバックを得ることが目的です。コンポーネントプレイグラウンドを含む、Code ConnectをFigmaのワークフローに完全に統合する予定であり、サポートを追加のプラットフォーム（Androidなど）やウェブフレームワークに拡張していく予定です。

Code Connectを利用するには、GitHubリポジトリでNPMパッケージのインストールと設定に関する手順を確認し、詳細はドキュメントをご参照ください。