《Figmaと運用 Vol.6》“Figmaでつくる”を組織に広げる──SmartHRに根づくデザインシステムとコラボレーションの現在
SmartHRがFigmaを本格導入したのは2021年頃のこと。それまでUI制作、バージョン管理、レビューを用途別のツールで分断していた制作フローは、Figmaによってひとつに統合されました。現在ではFigJamの活用も進み、デザイン業務にとどまらず、職種横断のコミュニケーション基盤として定着しています。本記事では、公開デザインシステム「SmartHR Design System」とFigmaライブラリの運用体制を軸に、プロダクト開発から社内文化にまで広がるSmartHRのFigma活用の実態をひも解きます。（「Web Desigining 2025年8月号」より抜粋）
プロフィール
植田 将基 さん
株式会社SmartHR プロダクトデザイン統括本部マネージャー
2021年4月にSmartHRのプロダクトデザイングループの9人目として中途入社。主に、SmartHR基本機能のプロダクト開発チームでデザイン業務を担当している。サブプロジェクトとして、デザインシステム以外にもユーザーリサーチ推進室の運営に参画。2023年頃からデザイナーの育成やピープルマネジメントを通して組織づくりに取り組む。最近の趣味は財テク、旅行、ゲーム。備忘録としてブログを少々。https://smarthr.jp/
POINT①｜一過性ではなく、機能し続けるデザインシステム
株式会社SmartHRがFigmaを本格的に導入したのは2021年頃。それ以前は、UIの作成に「Sketch」、バージョン管理に「Abstract」、レビューに「InVision」と、用途ごとにツールを使い分けており、非効率でした。Figmaの導入により、編集とフィードバックをひとつで完結できるようになり、業務の効率化が進みました。
また、インターネット経由でデザインファイルを開発のステークホルダーと共有できるようになり、コラボレーションがデザインツール上で完結するようになりました。
現在ではFigJamの活用も広がり、プロダクト開発にとどまらず、コミュニケーションツールとして、さまざまな職種で利用されています。
SmartHRでは、自社のデザインシステム「SmartHR Design System」をWeb上で公開しています。その網羅性やわかりやすさに一定の評価をいただき、Webアプリケーション開発に携わる方々の間でもたびたび話題にしていただいています。加えて、同システムに準拠したUIコンポーネントのFigmaファイルもあわせて公開しています。
このFigmaファイルは、社内で隔週から月1回の頻度で更新しています。更新作業は私を中心に複数の有志メンバーで行っており、実装されたコードベースの変更点をキャッチアップし、Figmaのライブラリに反映しています。デザインシステムは私の入社以前に構築されましたが、前職でFigmaを使用していた経験を生かし、コンポーネントの整備やガイドラインの策定、基準の追加といった作業に関与するようになりました。
デザインシステム自体も継続的にメンテナンスされており、プロダクト開発においては日常的に参照される判断基準として機能しています。また、ブランディングの文脈では、営業資料やサービスサイトの制作のためのブランドガイドラインとしても活用されています。社内で自然に使われているツールであり、外部公開についても「UIをオープンソースとして公開するという理念の延長で、たまたま外から見える状態が続いている」といったスタンスです。
POINT②｜UIコンポーネントのオリジナルは編集権限を限定
FigmaのUIコンポーネントについては、大元のファイルの編集権限を私（植田）一人に限定しています。誤操作によるコンポーネントの削除や、ピクセル単位でのズレといった事故を防ぐためです。
編集作業は、ブランチを作成して行う運用ルールとなっており、大元のファイルにマージする際には、2〜4人のメンバーで内容をチェックしたうえで、最終的に私がマージと公開を行います。
デザインに関しては、デザインシステムによってガイドラインが明確に定められており、大きなブレが生じることはほとんどありません。新しいコンポーネントを作成する際も、いきなり作業に入るのではなく、その目的や背景をまず共有し、議論を重ねたうえで、ようやくFigma上での具体的な作業に着手するという流れになっています。
COLUMN｜進化が早いからこそ、習得するうえでは課題も
Figmaは毎年のように大幅なアップデートが行われるため、社内教育用のマニュアルがすぐに古くなってしまう点に課題を感じています。特に初学者にとっては、操作に慣れるまで一定のハードルがあります。その点、FigJamはUIの変更が少ないため、教育にかかる負担が比較的軽いのが利点です。全社的な導入にも適していると思います。なお、私（植田）は、Figmaを使って得た気づきを自身のWebサイトに掲載しています（下図）。自分の言葉にすることで、理解がより深まると感じています。
wentz-design.com
https://wentz-design.com/tags/figma/
POINT③｜定例会議はFigJamを活用し、付箋で情報共有
SmartHRでは、FigmaとFigJamをUIデザイン以外の領域でも幅広く活用しています。例えば、社内外イベント用のスライド作成や、社内報に掲載する記事用バナーの制作にもFigmaが用いられており、日常的なクリエイティブ業務の基盤となっています。使用している職種も多岐にわたり、プロダクトデザイナーをはじめ、プロダクトマネージャー、プロダクトエンジニア、コミュニケーションデザイナー、マーケターなど、職種を問わずFigmaが業務に組み込まれています。
特にFigJamは、全社員が利用するホワイトボードツールとして定着しており、情報共有や進捗管理のハブとして機能しています。週次の定例会では、各プロジェクトの成果物リンクや報告事項、抱えている課題などをFigJam上に貼り付け、プロダクトデザイナーが横断的に連携しやすい体制が整えられています。
定例会用のFigJamボードには、レビュー、部署横断の連携、雑談などのセクションが設けられており、特に雑談スペースは活発に活用されています。業務の枠を超えたコミュニケーションの場として機能しています。
また、社内で人気なのが、Slack用スタンプをFigmaやFigJamでコンポーネント化した取り組みです。カニのスタンプなど、独自の社内文化を反映したアセットが全社的に親しまれており、円滑なコミュニケーションに役立っています。
取材・文：小平淳一
※本記事は「Web Desigining 2025年8月号」より抜粋しています。
