【Figma 新機能まとめ】オートレイアウト、Dev Mode、バリアブル機能、プロトタイピング機能の使い方
こんにちは。エージェントチームの佐藤です。
今回は、2023.6.22にFigmaカンファレンス「Config 2023」で発表されたFigmaの新機能を弊社UIデザイナーがご紹介します。
※前回のfigmaアップデート記事はコチラ👀
1. オートレイアウト 折り返し、最大/最小サイズ指定
須田(UID):
今回のアップデートで、個人的に一番期待しているのがオートレイアウト機能です。
1-1. Wrap機能(折り返し)
須田(UID):
ラップ機能は、中のコンテンツをフレームの幅に合わせて自動で折り返すことができます。これまではフレームを縮小すると中のコンテンツは自動調整されなかったのですが、今回のアプデでこの問題が解消されました。
1-2. 最大/最小サイズの指定
須田(UID):
フレームに最大値・最小値を設定すると、フレームをそれ以上またはそれ以下の大きさにならないように制御できます。PC版/SP版などのレスポンシブデザインを作成する際、中のコンテンツを崩さずにクイックに調整することができます。
佐藤:
特にワンオペでやっているデザイナーさんにとってはありがたいね!
2. Dev Mode(開発者モード)
須田(UID):
Dev Modeはデザイナーがおこしたデザインデータを実装担当が確認する時に使うモードです。
須田(UID):
開発者向けのアップデートは今回が初めてになりますが、よりスピーディーなサービス改善が求められる開発現場において、デザイナーと実装担当の素早い連携が求められているからだと思います。
佐藤:
他の社員にFigmaに関してヒアリングしたところ、結構Dev Modeが気になっているようです!
須田(UID):
Dev Modeではデザインを実装する上で下記項目が使えるようになりました。
2-1. 実装する際に必要な最低限のデザインデータのみすぐ参照できるように
データ一括参照により、簡単にコンポーネントの確認ができ、情報漏れが少なくなるためバグが減ると思います。
2-2. デザインの変更履歴を参照できるように
2-3. プロジェクト管理ツールや開発ツールとの連携(JIRA、Githubなど)
2-4. VS Code連携
2-5. コード一括掃き出し
須田(UID):
レイヤー・構成規則はデザイナーによりけりですが、余分なレイヤーを残したままにしておくと、コードの一括掃き出しで余計なソースコードも掃き出されてしまうのでデザイナーは定期的にレイヤーの整理をした方が良さそうですね。
佐藤:
Dev Modeはデザインシステムを導入しているチームにとっては良い足掛かりになりそう!
須田(UID):
デザイナーはよりチーム開発を意識したメンテスキルが求められてきそうですね。
3. バリアブル機能
須田(UID):
バリアブル機能とは、Varaiable=変数とある通り、「色、サイズ、テキストスタイル」などのデザイントークンを変数として保存し、モード別にコンポーネントを一括管理することができます。
佐藤:
アプリ/SP/PC版をひとまとめにできてかなり効率があがりますね!
須田(UID):
ただ、デザインシステムを運用しているチームや大規模案件ではより効果が期待できそうですが、細かい設定が必要なのでチーム全員の視座を会わせるか、場合によっては視座の底上げが必要かもしれないですね。
佐藤:
育成には時間がかかると思うので中長期目標としては良さそうですね。
4. 高度なプロトタイピング機能
須田(UID):
インタラクションなど含めてより完成形に近いプロトタイプを作成することができます。デザイナーよりもディレクターの方が使う機会は多いかもしれないですね。
最後に
須田(UID):
今回のFigmaのアップデートは、開発スピードの向上やチーム連携の強化が背景にあったと思います。今回の記事では紹介できませんでしたが、AIを搭載した新機能も検討しているようです。AIに任せられるところは任せて、デザイナーがより力を発揮できる部分に時間をかけられるような環境ができあがるのをたのしみにしています。
また、今回のアップデートを受けて、よりFigmaが便利になった分、しっかり機能をキャッチアップしていかないと手に余りそうな感じがしました。Figmaに興味がある人とない人で差はどんどん生まれてしまう気がするので、今後もキャッチアップに励みたいと思います!
〆
この記事が気に入ったらサポートをしてみませんか?