開発ローカル情報とは、インフラジスティックスが日々お客様と対話する中でよく耳にする、開発現場の小さな領域に限定したトピックを掘り下げて共有する特集です。
コーディング作業を効率化するため、Figmaで作成した画面デザインから自動でコード生成したい、とツールを探している方がここ最近増えている印象です。Figmaからコード生成、といってもHTML/CSSなどのスタイルコード生成までを指すのか、ReactやAngular、Vue.jsなどを想定した動的なコード生成まで実現したいのか、によって、技術的な難易度や実現方法は異なりますが、一般的に業務システムを開発する際にはフォントサイズやカラーリングなどの「静的な画面設計」だけでなく、入力時のフォームバリデーションや、テーブルのフィルタリング・ソートなどの「動的な画面設計」が必要です。
Figmaから動的コンポーネントまで生成したい
動的な設計まで反映するコンポーネントとして「Figmaからコード生成したい」というApp Builderへの製品トライアルが大変増えており、UIデザインから実装への引き渡しを効率化したい需要が高まっていることが伺えます。そんな需要の高まりから、Figmaからコード生成をしたい企業様とお話しをする機会が多くあるのですが、そこで我々がよく問いかけている質問があります。
「Figmaでのデザインプロセスは、必須でしょうか？」
誤解のないようにお伝えしておくと、Figmaは強力なツールです。UIの詳細設計を吟味し、関係者と合意を形成するプロトタイプを作成するツールとしてSketch、Adobe XDなどの多くの他製品を凌駕し、トップランナーとして進化し続けています。
Figma利用のメリットを最大化できている？
Figmaなどのデザインツールは、特にUIデザイナーの需要に細かく対応する機能が揃っています。しかし、日々開発現場の皆さまからお話をお伺いすると、現実的に専任のUIデザイナーを持つことができる組織ばかりではありません。
実際には「エンジニアが画面デザインと実装もする」もしくは「UIデザイナーがそのどちらもやる」など、UIデザインと実装の境界線は曖昧なことが多いです。そのようなケースでは、FigmaなどのデザインツールでUIデザインを作成することは、逆に実装上のスタックポイントになっているケースも多くあるように思うのです。
デザインツールは、自由なホワイトキャンバスに描画ができ、実装制限もありません。そのため、自由な領域で作成したデザインから一足飛びに動的なコードを自動生成しようとすると、微妙なレイアウトの崩れからフィルタリングの考慮不足など、不具合が多く出てしまい、その解決に悩む時間が増えてしまうのです。
そこで、先ほどの質問に戻ります。
「今抱えているプロジェクトに、Figmaでのデザインプロセスは必須でしょうか？」
もし、あなたの開発組織体制がUIデザインと実装で役割が明文化されておらず、Figmaの利用をそれほどクリティカルに考えていないとすると、それは実装効率化の観点では大きなチャンスかもしれません。
Figmaだけじゃない、組織に合うツールとプロセス
「Figmaファイルからコード生成ができる」可能性のあるツールとしてお問い合わせを頂くことの多いApp Builderですが、実は本製品のポテンシャルを最大限に発揮できるのは、このような体制と文化をもつ組織です。
- 専任のUIデザイナーを持たず、UIデザインと実装の兼務が日常的に発生する体制。
- Figmaのデザインプロセスを必須とは捉えておらず、実装効率を上げられるのであればツール変更を厭わない組織。
インフラジスティックスは、開発組織体制やプロジェクトの状況をお伺いしながら、どのようにFigmaを利用してコード生成までを実現するか、個別にご提案をしています。あなたの開発組織に合う手法やツールであれば、それが最適解です。もしインフラジスティックスの持つ製品が組織に適合すれば、導入部分よりお手伝いをさせていただきます。
もしご興味があれば、製品トライアルやコンサルタントの相談会よりお申し込みください。
