BASEプロダクトチームブログ

ネットショップ作成サービス「BASE ( https://thebase.in )」、ショッピングアプリ「BASE ( https://thebase.in/sp )」のプロダクトチームによるブログです。

ノンデザイナー向けのFigma講習会をやってみました報告

f:id:nomjic:20190927184846p:plain おつかれさまです。UIデザイナーの野村(@nomjic)です。

先日お書きしたFigmaのプラグイン紹介記事でも少し述べましたが、UIデザインツールであるFigmaはノンデザイナーが作図や資料作りを行うにあたっても有用です。

もっとユーザが増えたら好ましい... と日頃から思っていたら、社内でノンデザイナー向けにFigma講習会を行う機会を得ましたので、その経緯や講習会の内容、所感などを書かせていただく次第です。

講習会を企画するに至る背景

ノンデザイナーが作図するの、つらそう

弊社では、ノンデザイナーの人(プロダクトマネジメントやエンジニアリングのメンバー)がちょっとした作図をしたり、UIのワイヤフレームを作る時には、Google Slidesを使用する場合が多いです。

普段デザインツールを使用している身からすると、スライド資料作成ツールを使って絵図を描くなんて「あの人たちは何という苦役に耐えているのか...」と思ってしまうのですが、一方でAdobeのツールやSketchが多機能すぎてハードル高い、というのも理解できます。お値段も張りますしね。

Figmaが良いのでは

図作りに大変な労力を割いていることを見かねた弊社デザイナーが、「Figmaは比較的簡単に使えるし、勧めてみようか」と考えてノンデザイナー向けのFigmaチュートリアルを作成してくれました。(チュートリアルは本記事の後半に掲載します。)

そして、「講習会をしたいのだが手伝ってもらえまいか」と私にご依頼いただき、「ハイ!やります!Figma万歳!」と承った次第です。

なぜ Figma ?

デザインツールが数多ある中でなぜFigmaを選んだかと言うと、理由は以下の通りです。

  • 操作方法が(比較的)シンプル
  • ブラウザ上で操作可能なので、OSを問わない
  • 情報をシェアしたりコメントつけたりするのが楽
  • 操作概念がGoogle Slidesに近い

※ 注記:Figmaのバグ
Figmaをお勧めするにあたって触れざるを得ないバグが一件あります。
全角文字を入力した直後に半角入力モードに切り替えて文字を入力すると、切り替える直前に入力していた全角文字が消えます。
詳しくはこちらのnote記事などご参照ください。 このバグさえ無ければなんの抵抗もなくFigmaお勧めできるのですが...。

Figma講習会実施

概要

時間:60分
内容:Figmaの運用ルールと基本操作の説明 & ハンズオン
講習対象:プロダクトマネジメントのメンバー(エンジニアも参加OK)
目的:①基本操作の理解 ②楽しむ

講習内容

以下のような流れで講習会を実施しました。

1. Figmaの概要紹介(5分)

講習会の導入部です。
FigmaがUIデザイン以外にも様々な用途で使えること、コラボ作業がしやすいというメリットがあること... 等を3分程度で説明しました。

2. Figmaの運用ルール説明(5分)

Figmaはデータのシェアが非常に容易であるゆえに、うっかり機密情報を漏らしてしまう危険もあります。そのあたりの点を踏まえて、ライセンス管理やデータシェアに関するルールの説明を行いました。

3. 基本操作の説明(チュートリアルをなぞる)(20分)

事前に作成したチュートリアルをなぞる形でハンズオンして、基本操作を理解します。 (このチュートリアルは本記事の後半に掲載しますので、ノンデザイナーの人がFigmaの使用方法を学びたい時の参考にしていただけたら幸いです。)

4. componentの概念紹介(5分)

Figmaにおけるcomponentの概念と扱いについて、簡単にですが説明します。

  • 1つ作れば複数箇所で使いまわせる便利なやつです。
  • オブジェクト志向言語で言う所のClassとInstanceみたいなやつで、継承関係持ってます。

という程度のざっくりした説明をしました。

5. 課題を与えて各々トライ(25分)

最後に、「画面遷移図を作ってみよう」という課題を与えて、残りの時間でトライしてもらいます。トライする過程で質問したいことあったら随時デザイナーに聞いてもらいます。

予め用意した1つのファイル上で一斉に作業をしてもらいました。 他のUIデザインツールにはできない、Figmaならでは使い方を試してもらいたく、この形をとりました。

ここでは、使い方を覚えてもらうことよりも楽しんでもらうことを旨としました。楽しい方が記憶に定着しやすく、結果として楽手効率も高いだろうと見込んでのことです。

案の定、与えたお題を無視して自由に図(というか、シュールなアート)を画面上に展開する御仁が複数名いらっしゃいましたが、それはそれでOKです。「作りたいと思ったものをどう作るか」を各々がトライして不明点あったら質問する、という場を用意できたので、講習会を催した側としては目的を達しました。

成果

ひとまず、「①基本操作の理解 ②楽しむ」という目的は達しました。
これが業務に役立ったかについては、講習会の1週間後である現時点ではまだわかりません。
実業務に対してどんな影響があったかは、いずれまたご報告したいと思います。

[付録] 講習会のために作ったチュートリアル

以下、講習会で使用したチュートリアルを転載します。(一部省略)

STEP1:ファイルの新規作成

初期画面のヘッダーの かページ内の + New File をクリックするとファイルを新規作成できます。

f:id:nomjic:20190911211932p:plain

STEP2:Frameの作成

Frameはこれから絵を書く為の用紙だと思ってください。(Sketchでいうところのアートボードです)
このFrameは作らなくても作業できますが、机に直接絵や文字を書いてる状態です。
資料やワイヤーを作成するレベルだと見やすければFrameはなくても大丈夫ですが、pdf書き出しや印刷する場合はFrameを作っておいた方が良いと思います。

ツールバーから みたいなアイコンのツールを選びます。
このツールを選ぶと右側のパネルにどのサイズでFrameを作成するか選択肢が出てきます。
主要なデバイスサイズが選択肢に出てくるので、好きなサイズを選択してください。

f:id:nomjic:20190911211937p:plain

サイズを選んでクリックすると画面上にFrameが作成されます。

f:id:nomjic:20190911211943p:plain

作成したFrameは選択状態だと四隅に小さい四角が出るので自由にサイズを変更したりD&Dで移動ができます。
細かくサイズを設定したい場合は右側のパネルにWやHを数値入力できるところがあるので、そちらで設定してください。

STEP3:テキスト入力

ツールバーの T みたいなアイコン?のツールを選択します。
ツールを選択したらFrame上の好きな位置(Frame外でも大丈夫です)をクリックしてテキストを入力します。

f:id:nomjic:20190911211948p:plain

テキストのサイズや色などを変更したい場合は右側のパネルで変更します。

f:id:nomjic:20190911211956p:plain

テキスト入力状態だと選択部分しかスタイルが適用されないので、テキスト全体にスタイルを適用したい場合は、一度テキストの入力の状態を終了しして、(ツールが みたいな(向き逆)アイコンのツールになっているのを確認して)もう一度テキストを選択してからスタイルの変更をしてみてください。

STEP4:図形の描画

四角や矢印を描きたい時はツールバーの の選択します。
の横の をクリックするといくつか選択肢が出てくるので好きな図形を選択してください。

f:id:nomjic:20190911212003p:plain

描きたい図形を選択した状態でFrame上の好きな位置(Frame外もOK)にD&Dで好きなサイズの図形を描くことができます。

f:id:nomjic:20190911212006p:plain

文字と同じように、配置した図形は右側のパネルでスタイル(塗り色や縁取り、角丸などなど...)を変更したりサイズを調整することができます。

f:id:nomjic:20190911212016p:plain

STEP5:矢印の描画

四角や丸などの図形と同様に矢印も描くことができます。
矢印の場合はD&Dで配置した後にダブルクリックをすることで、矢印を曲げたりすることができます。

矢印をダブルクリックして、矢印の上にカーソルを乗せると両端と真ん中に○が出てくるので、真ん中の○をつまんで好きな位置に移動すれば矢印を曲げることができます。 f:id:nomjic:20190911212024p:plain

f:id:nomjic:20190911212030p:plain

矢印を複数の場所で曲げたい場合は、矢印線上の○と○の間にカーソルを移動すると、薄い○が出てくるので、その○をクリックすると曲げる為のポイントを増やすことができます。

f:id:nomjic:20190911212036p:plain

矢印の編集を終了する場合は、ツールバーにある Done ボタンをクリックして終了してください。

f:id:nomjic:20190911212041p:plain

STEP6:画像の挿入

画像を挿入する場合は、図形の描画同様に アイコンの横の をクリックして Place Image を選択します。

f:id:nomjic:20190911212047p:plain

ツールを選択すると画像選択が出てくるので、挿入したい画像を選択します。

f:id:nomjic:20190926121824p:plain

画像を選択したら、画面上にクリックで配置をするか、D&Dでサイズを指定して配置してください。

f:id:nomjic:20190911212059p:plain

画像のトリミング

挿入した画像をFigma上でトリミングすることができます。

トリミングしたい画像を選択してヘッダーの真ん中あたりにある みたなアイコンの Crop Image を選択します。(または画像をダブルクリック)

f:id:nomjic:20190911212105p:plain

Crop Image をクリックすると画像編集用のパネルが表示され、画像側にトリムエリアが表示されます。 このトリムエリアをD&Dして好きなサイズにトリミングします。 トリミング後に画像部分をD&Dするとトリムエリア内で画像の位置を変更することもできます。
(補足:画像編集パネルのスライダーは画像のレタッチ用です)

f:id:nomjic:20190911212113p:plain

画像の編集を終了する場合は、画像編集用パネルの をクリックするか、何もないところをダブルクリックすると編集を終了できます。

STEP7:コメントをつける

Figma上で資料やワイヤーにコメントをつける場合は みたいなアイコンの Add/Show Comments を選択します。

f:id:nomjic:20190911212120p:plain

ツールを切り替えたらコメントをつけたい場所でクリックするとコメントが入力できるフィールドが出てきます。 コメントを入力したら Post ボタンをクリックしてコメントを投稿してください。

f:id:nomjic:20190911212125p:plain

コメントを投稿すると右側のパネルにコメントのリストが表示されます。

f:id:nomjic:20190911212133p:plain

コメントには返信することができるので、修正指示や要望などをFigma上でやりとりができます。

f:id:nomjic:20190911212140p:plain

これにて基本機能の紹介は終わりです。お疲れ様でした!