お久しぶりです、田中です

九月になって少し過ごしやすい天気になってきたような気がしますが、令和になってからは思いもよらないところで気温の上下がおこったりするので体調管理に気を付けたいです。

　

弊社では日々の業務の効率化を目指し、色々なツール等を試しています

今回はデザインの観点からfigmaの導入を検討するということで田中が実際に触って試しているので、そのことについてまとめていけたらと思います！

figma導入の狙い

1.オートレイアウトによるコード生成機能でコーダーの作業時間短縮

2.ブラウザでの共有が可能で簡易的なモーションを付ける事もできるので提案の時にお客様がより完成形を想像しやすくなること

実際に触ってみる

とりあえずインストールして新しいファイルを作ってみました。

触っていけば慣れるだろうの気持ちではじめてみましたが、他製品にありがちな上のほうにメニューバーがないので既にたじたじです。下にメニューバーがあるんですね…

　

figma独自の機能というよりは、今回は普段Photoshopでやっていることをfigmaでもできるようにするということを最優先で触っていきます。

レイアウト

　

レイアウト機能についての確認。

XDにも似たような機能があるとは聞いているので社内のほかのデザイナーにとっては目新しいものではないかもしれませんが、田中はPhotoshopをメインで使用してきたので要素間の距離を指定して配置できることにちょっと感動してしまいました。

　

キャンバスで第1のオブジェクトを選択してからALT（Windows）を押し第2のオブジェクトにカーソルを合わせると2つのオブジェクトの間の水平方向と垂直方向の測定値が表示されます。

　

まだまだ不慣れなので今はデザインの段階で大きく時間をとってしまうことになりますが、慣れてきたらこの距離の測定機能があればコーダさんの作業時間の短縮につながりそうです。

エクスポート

　

webサイトの制作の際には画像やイラストの書き出しは必ず行われるのでその機能の確認。

左側のレイヤーから書き出したいものを選択して右側のメニューのエクスポートから書き出しの詳細を決めていきます。

　

見てすぐわかるUIなので操作がわかりやすいです！Photoshopの時だと一つパーツをグループにし忘れていたり、ドロップシャドウをつけっぱなしで書き出ししてしまいやり直しなんてこともありましたがプレビュー機能があれば大まかなことは書き出し前に確認ができるのでやり直しが減りそうです。

　

ほかにも個人的にSVGの書き出しができるのはありがたいなと思いました。

プロトタイプとプレビュー

　

これはPhotoshopにはない機能ですね。

次回以降の自分用に使い方のメモです。　　

　

1.プロトタイプの選択

2.デバイスからプレビューしたいデバイスを選択

3.リンクの設定

オブジェクトを選択すると丸いボタンが出てくるため。それをリンクさせたい要素にドラッグ。

4.プレビュー

右上の再生マークを選択すると実機のようなビジュアルでのページ遷移の動きなどが確認できる

　

すごい！

URLを伝えるとこのプレビューは共有ができるみたいなのでこれはfigmaを導入したい狙いでもある「お客様にわかりやすい」が達成されそうです。

画像だと見切れてしまっていますが矢印で遷移先がわかるのがよいですね。

　

ただ、トップページなどは下層ページへのリンクボタンが多く、この矢印が混雑しそうなのでデザイナー間でキャンバスの配置ルールなどを決めないとプレビューの状態は良くとも編集データがわかりにくいなんてことも起きてしまいそうです。

　

最後に

まだまだ入口の部分を触っただけではありますが、それでもいろいろな機能がある印象でした。

データ共有をしての修正が今までよりも簡単になりましたが、新しい機能から自由度が上がった分、ルール決めをしていかなければならないなと感じました。今後はfigmaの独自機能を使いこなして作業時間の短縮とお客様にわかりやすいい提案用デザインの制作を目指していきたいです。

　

今回はデザインという観点からfigmaの導入を検討している段階なのですが、業務に使うツール以外にも仕事のしやすい環境づくりの一環として卓上扇風機や、ケトルなど社長に購入してもらったりしています。

普段使っているヘッドホンやキーボードなんかもちょっといいやつなんですよ ^^

　

私は撮影器具についてはあまり詳しくないのですがカメラやドローンも新しいものの購入を吟味している会話がよく聞こえてくるのでどんどん新しくなっていっているみたいですね！

弊社撮影チームが撮ってきてくれたデータの現像の際にいいカメラで腕のいいカメラマンがとる写真はこんなにかっこいいのか…と感心してしまいます。

　

最新の写真の投稿についてはInstagramに投稿をしていることが多いので覗いて頂けると嬉しいです。