スピーカーはFigma Japnの谷さんとニジボックスの上田さん。
上田さんのモデレーターでスタート。
■自己紹介
上田さん、現在室長。
前はデザイナーだった。
■LT
■自己紹介
・谷拓樹
・Figma Japan デザイナーアドボケート
・各国にFigma支社がある。
・Figma デザイナーアドボケート、日本には2人
・各種イベントに登壇したりしてフィードバックをプロダクトに反映する。
■Figjam
・オンラインホワイトボード
・アイデアだし
・リアクション
・カメラ
・投票機能
・サイトマップも作れる
・アーキテクチャ図も描ける
・デザインレビューにも。
・パワポとかだと枠が決まっている。
・テンプレート、フォーマットも多い
・KPTテンプレート
■Figma
・Figma ファイルブラウザ
・Figjamは非構造化に向いている
・Figmaは構造化
・オートレイアウト（CSSの実装に近い）
・スタイル
・コンポーネント（アセットから選ぶ）
・コンポーネント内でスタイルを定義しておく
・ドラッグアンドドロップで簡単にマージ
・チームライブラリ
・Figmaコミュニティで公開されているものがある（デジタル庁など）
・プロトタイプ
・コメント機能
・開発モード（デザインデータは動かない）
・バリアブルズ
・実装に対してもフレンドリー
・「開発準備完了」にできる
・レイヤーでモードを変えられる（カラーモード対応）
・プレイグラウンド
・変更の差分も開発モードで見れる（変更内容を比較）
・開発モード用のプラグインもある
（Anima Reactのコードを生成）
・VS Code側のプラグインでFigmaが開ける
■質疑応答
・開発者がよりベンチになる機能など他にあればしりたいです！
gitへの連携やvsCodeとの連携など、、
→GitHubとの連携もできる。
・最初の方でスタイルを登録して使用していましたが、現在ローカルバリアブルなどもあるかと思いますがスタイルを使った方が良い場合、バリアブルを使った方がいい場合など使い分けの基準はありますでしょうか？
→バリアブルズ（定義出来るものは、色と文字列とブーリアンetc）
バイアブルズだとテキストスタイルやグラデーションの対応がまだ。
複数のモードで色を展開したりする場合はバリアブルズのほうがいい。
スタイルズで定義し、バリアブルズで使う。
今後はバリアブルズは進化していく。
・当社では現在開発ではFigma、デザインではAdobe XDと使用ツールが別れてます。上手く連携できるおすすめの手段はありますか。
→ちょっとおかしいですね。
・デザイナーとしてこれからFigmaを使いこなすためには、何を学べば分かりやすいでしょうか？
→公式のチュートリアルやドキュメント、ヘルプページ。Youtubeチャンネルもあるよ。
基本的なところだと書籍などがある。
・Figmaを利用してこなかった既存のサービスを改修する場合、どのようにFigmaを使うと効率的に開発できるのでしょうか？
→規模感にもよる、どのツールを使っていたかにもよる。
移行コストなのか学習コストなのかにもよる。
全部のデータを移行するのは難しい、リニューアルのタイミングで整理していく。
・コーダーさんとデザイナーさんが別の場合に今後はバリアブルを使うにしても変数名など理解してつかないと開発スピードに影響がでると思います。今後は職種ごとの理解範囲が広まっていくのでしょうか？
→共通言語でお互いに握っておく。
・今後、ローカルバリアブルにテキストスタイルを登録できるようにする予定はありますでしょうか？
→ロートマップに入ってはいるが、時期がいつになるかはわからない。
・プラグインでコードを生成する場合にCSSしか対応していない認識です。
taiwindやMUI等対応しているものご存じあれば教えていただけますでしょうか？
→taiwindで検索すると出てくるはず。MUIはあるかもしれない。
Figjamのホワイトボード機能がわちゃわちゃしてて楽しかったです。
もっとFigmaつよつよになりたいなーと思います。
コメント