デザイナーと協力する際に便利なツール、Figma プロパティ講座

開発者のためのピグマガイドブック

デザイナーと平和によくコラボしてみたいなら？ ピットが合うチームメンバーに出会うのは復帰服ですよね…

「今まで一緒に働いていた開発者のうち、ㅇㅇ様が一緒に働くのは本当に良いです〜」

します。どんな根拠でこう言うのか。 =) だから、デザイナー＆開発者コラボレーションの過程のどの部分でコミュニケーションの不便さを経験するのかをよく知っています。

シームレスなコラボレーションのための最も簡単で迅速な方法=最適なコラボレーションツールを使用する

角雪し、円滑なコラボレーションのための最も簡単で迅速な方法は、まさに、最適なコラボレーションツールを使用することです！おそらくゼプリンをたくさん使っていますが、残念ながらゼプリンにはないいくつかの機能があります。

いくつかの簡単な例を挙げると、ジェフリンにはワークフロー（ページリンク関係、全体的な流れの順番）、特定のコンポーネントに使用するインタラクションアニメーションの種類と詳細な属性、レスポンシブ関連の属性（水平/垂直配置）などは表示されません。それで、これらの内容は、デザイナーがゼプリン以外の形式で（PPT、スラックなど）伝えてくださったり、あるいは開発作業をしてからデザイナー様に何度も聞いてみたはずです。

これらの問題は、コラボレーションに遭遇するしかないプロセスの1つと軽く考えることができます。ところで、その軽い問題のうち、上記の問題はゼプリンの代わりにピグマというコラボレーションツールを使用すれば十分に未然に防止する簡単な方法があります。それでは、ピグマの使い方を身につけて予防しますか？それとも、今後1年、5年、10年をその細かい問題を繰り返し続けていきますか？

私はある日、開発者と協力して、偶然の機会にピグマというツールに触れました。ピグマは簡単に言えばPhotoshop+ゼプリンです。 （理解を助けるためにPhotoshopを例に挙げましたが、PigmaとPhotoshopは厳しく機能が異なるツールです） ところで、このPigmaというツールがあまりにも新世界なんです！開発者の方はどう感じるか分からないが、デザイナーの立場ではゼプリンを使うのが結構不便でした。もちろんゼプリンを全く使わないよりはましですが。

ところがピグマでデザインガイドの内容を共有すると、これまでゼプリンに表示できなかった内容まですべて自動的に表示されます。では開発者様もゼプリン以外に仕方なくPPT、カトークなどで配信されていたギターなどの内容をもうこれ以上あちこちで確認する必要もなくなるんですよ。ピグマ一つだけ確認すればいいのですから。

そしてデザイナーが作業したシアンと実際に開発された成果物のデザインが異なって出てきた経験があります。これはいろいろな理由があるだろうが大きく次の二つの理由のために発生すると見なされます。

1. 開発作業に必要な内容がゼプリン（デザインガイド）に十分に表示されないこと
2. その不足した内容をダジイナーがテキストで直接作成するとき、誤って何か間違って表記する場合。または、更新されたコンテンツをまだリアルタイムで更新できない場合

このうち1番は少し前にも話した部分です - 「ゼプリンに表示できなかった内容」。 2番はデザイナーが手作業でガイドを作成する際に発生する可能性がある問題です。例えば「Aページの確認ボタンを押すとBボタンに移動させてください」 このような内容はゼプリンに表示できないため、別のテキストで作成しなければなりませんか？人が手作業で作成するので、当然、たまに間違いが発生するしかありません。リアルタイムアップデートもできません。企画が変わるたびに、ファイルのあちこちにあるその多くの関連内容をいちいち探し、それをまた手作業に全て変更してくれなければなりません。ところがピグマを使うと、デザイン要素の属性が「自動」に「リアルタイム」シンクが合わせられて、このようなミスが発生することがありません。

そして何よりも最高のものは、とても簡単です！新しく勉強しなければならないこともほとんどなく、ノートパソコンに何か新しくインストールする必要もありません。ゼプリンとほぼ似ているので、開発者はゼプリンにはなかった機能の使い方だけを少し見てください。勉強することなく一度だけ使ってみるとすぐに身につけることができるでしょう。そしてピグマはウェブでも使えるので、ノートパソコンにプログラムをインストールする必要もありません。当然、Windows、Macはすべてサポートしています。

ここまで読んで、もうピグマを使ってみたい気持ちができましたか？それならもう残った問題は、デザイナー様を説得しなければならないという点です。デザイナー様がピグマを使ってこそ、そのデザインガイドの内容をピグマとしてお届けできます。デザイナー様がPhotoshop、イラストレーターを使っているならピグマに乗り換えるのが200% 1000%良い選択です。ところがスケッチやXDを使っているなら、あえてピグマに乗り換えずにそのツールを使い続けるのも大丈夫です。スケッチ、XDはピグマに似たツールだからそこにもゼプリンのような機能があるんです。ちょっと不便な点は、スケッチは有料で、Windowsで使用できないという点、XDは開発者のノートパソコンにプログラムをインストールしなければならないということです。スケッチやXDも良いツールですが、実は大勢はピグマイです。ウーバー、エアーB＆BのようなユニコーンスタートアップからMacrosoftのような巨大企業までもピグマを書いているほどです。

とにかく働くデザイナー様がPhotoshop、イラストレーターを使用中だと仮定して引き続き申し上げます。デザイナーがピグマの使い方を学ぶのは難しくありません。使い方が似ています。問題は、従来、他のツールで作業していたデザインワークの形式を変えなければならないという点です。 Photoshop、XD、イラストと互換性がありますが、完全に互換性がないため、ある程度手作業をしてくれるしかありません。残念ながら、この部分は余裕が少ない場合は、アルバイトの外周をお勧めします。外注を求めるには代表者承認も必要ですが、代表様には添付した代表様向けPDFファイルをお送りください。デザイナー様にも同様に添付したデザイナー用PDFファイルまたは下記の内容を複製してお送りください。外注を救うことさえ面倒な場合は、ただ私に外注を要請してもいいですよ。

開発者様が後日、ある有名なユニコーンスタートアップの核心開発者様になる過程で、このチュートリアルがとても笛～金でも何か良い役割ができたことを願っています。 🤣

To.デザイナー

ピグマについてすでに聞いたことがあると思います。 Photoshopやイラストレーターなど従来の主流グラフィックツールとの使い方がほぼ似ています。デザイナーである私がチャンダムコンデポショップ、イーラーを使ってみたデザイナーの方ならピグマの使い方もすぐに習得できますよ。ピグマ公式YouTubeチャンネルに使用方法がとても詳しく出ているので、その映像を見ていただくのもいいです。

ところが、問題はすでに既存のツールでデザイン作業をしているので、ピグマに続いて作業するには、それらのファイルをピグマファイルに変換しなければならないということです。自分でやるにはかなり面倒で時間をつかむ毎日から変換作業はアルバイト外周に任せようと代表に軽くクン提案させてください〜！ ^^

目次

1. ピグマを使用する前に必要な準備と選手の知識
2. デザイナーとのコラボレーションで頻繁に発生するコミュニケーションのトラブルシューティング
3. その他知っておくと良い内容

講義の教材を見て理解しにくい部分がある場合は、いつでも気軽にお問い合わせください！ Inflearnでお問い合わせいただき、インスタグラムでお問い合わせいただくこともできます！ @needesign_official