皆さん「Figma(フィグマ)」というサービスはご存知でしょうか?
アラフィフ仲間にお読みいただいている前提で解説すると、アプリ・ウェブサービス用のUIデザインツールです。
いや、自分も良く知らなかったのですが、その説明で間違っていない筈です。
先行している(た?)SketchやAdobeXDの代替みたいな感じで捉えられています。
クラウドツールだと思っていたのですが、どうやらデスクトップアプリ版の方が高機能のようです。Zoomも似た感じですが、デスクトップアプリ版と両方あるのが最近のトレンドなんですかね‥
今日はSQLの練習に明け暮れようと思っていたのですが、道半ば(まぁまぁやった)で、Figmaを使わないといけない事になりました。
「そんな状況に急になるか!」という、突っ込みもあるかもしれませんが、以前から「一緒に勉強しようよ~」と声をかけていた、相棒が少しだけやる気になったようで、どういう物を作ろうとしているか、プレゼンしないといけなくなったのです。
私の汚い落書きでは説得力も落ちるので、これは練習兼ねて使ってみようと思ったわけですね。
一番お手軽な無料版のウェブ版で試してみます。

Figma使ってみた
私は普段の仕事ではフォトショップとCanvaを使っているのですが、Canvaはマーケティング側のデザインに振り切ってますからね。
確かに、ウェブサービスやアプリのUIを作るならば、Figmaが良さそうです。少し前に、こんな記事も有りました。

基本的な使い方は以前、ご紹介した「chot.design」さんが分かりやすかったです。

自分はそこまで高度な事をする気は今のところないので、私と似たような感じの方は「マスク」と「グループ化」「オブジェクトの整列」「エクスポート」「オートレイアウト」「プロトタイプ」あたりを勉強すれば十分だと思いました。
プロトタイプを使うと、実際に画面遷移を体験する事ができるようでして、これが重宝される理由なのでしょう。(やってない)
個人的にはアプリの操作方法をプロトタイプで教えるとかは使い勝手が良さそうだと感じました。個人的というか、皆さん、そう使っているのでしょうね。
中間感想
ちょっと触って感じた事を、思わず口に出してしまうと‥

めんどくせぇ‥
優れたツールで有る事は分かったんですが、アラフィフになると、このレベルの使い方を覚えるのは面倒なのですよね。完璧なんか目指さずに、使い慣れたPhotoshopで良いんじゃないかな‥
そう思った矢先、一つ気になった機能がありました。
この記事にある「UIテンプレート」とやらです。

Googleスライドも無料テンプレート使ってから便利に感じたんだよな~
Figma UIテンプレートを使ってみた
あまりユーザー登録を伴うアカウントを増やしたくはないのですが、ケツに火が点いた経営者は割り切ってアカウントを作りましたよ。

Terms読んだら入力データクリアするフォーム、やめてくれ(><)
これは良さそうだ!と感じた、お目当ての「Card Components Free UI Kit for Figma」の容量はRARファイルで32.3MB、まぁまぁの大きさです。そして、なんと!

何度ダウンロードしなおしても、ファイルが壊れている!
ユーザー登録してこれはアラフィフの年の功をもってしても、イライラします‥
ちょっと考えを変えて、Figmaの中にある公式ダウンロードサイトを見てみました。

うーむ。プラグインにウィジェット、ワイヤーフレームやデザインはありますが、どうも先ほどのサイトのテンプレートとは違う雰囲気です。
眠くなってきましたが、このまま引き下がるのも何なので「UserProfile」というプラグインをインストールしてみました。

使い方は簡単。シェイプを選択して、右クリックからプラグイン>User Profileと選択をするとオプションが表示されるので、設定してインサート!

なるほど、こういったプラグインとかを色々くっつけていけば、デザインセンスの無い私でも、かなりクオリティの高いプロトタイプを作る事ができそうです。
だいたい、どういった事が、どの位のめんどくささで出来るか?は分かったので、Figma遊びはこれ位にして、必要になったら再挑戦したいと思います。

寄り道で疲れてしまった‥とほほ


コメント