こんにちは。コラボスタイルで UI/UX エンジニアをしている太郎です。
コラボスタイルではプロダクトのデザイン時に Figma を使用しています。
共有機能を使いエンジニアに大雑把な CSS 情報や細かな動作のニュアンスまで一括で伝えることができるので実装時のズレが減り、満足度が高いです。
そんな Figma で実際に業務で使用している最近のお気に入りのプラグインを 3 つ紹介します。
Tokens Studio for Figma (Figma Tokens)
デザイントークン管理用のプラグインです。
カラーパレット管理&デザイントークンのために導入してみたら実はプロパティパレットとして凄く優秀で、border-radius,box-shadow,Typography などを良く使うプロパティを設定しておき、パレットから選択するだけで同一ルールでデザインを作成できます。
これがあると細かなニュアンス以外はマウス選択で完了しちゃうのでお気に入りのプラグインです。
Fill Text with AI
文章の使用用途を入力すると AI が文章を作ってくれます。
ダミーテキストをより具体的な感じにしたい時に使っていますが、場合によってはこのまま提供することもあります。
元々は ChatGPT を利用していましたが、これを見つけてからは Figma 上で完結するようになったので体験が良くなりました。
A11y - Color Contrast Checker
選択した要素が WCAG の基準を満たしているかを素早く確認することができます。
自分では気を付けているつもりでも配慮が足りない箇所がどうしても出てしまうのでこのプラグインを使って A11y の基準を満たしているかを確認しています。
大きい画面を作った後に問題が多いと悲しいのでパーツを作る → A11y チェック → 次のパーツへのプロセスを細かく繰り返すようにしています。
これ系で一番シンプルな操作性だったので良く利用しています。
終わりに
今回は３つのプラグインを紹介しましたが、AI 系の台頭によって面白いプラグインが増えてきている印象です。プロダクトデザインプロセスも大きく変化し始めているので、この変化を楽しみながら素敵なデザインを作っていきたいですね。
「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。
Discussion