スポンサーリンク

 
 
こんにちは!
最近UIデザインに触れることが増えた、かーりーです。
 
みなさんはfigma(フィグマ)というデザインツールをご存知でしょうか?
私も最近知ったばかりなのですが、UIデザイナー界隈ではジワジワと人気になっているツールです。
 
一般的には「sketch」や「adobe」などが有名ですが、figmaはこれらのツールにはなかった大きな魅力があります。

「figma(フィグマ)」の最大の魅力!


UI/UXデザインに適したツール「figma」の大きな魅力、
それは…
 
リアルタイムで複数人が編集できるところです!  
 

デザインツールって基本的にソフトをダウンロードして、自分のPCで一人で編集しますよね。
figmaはその編集画面を他の人が見ることが出来るし、編集することだって出来ます。
近い例で言うとGoogleスプレッドシートのような感じでしょうか。
 
 
さらに、figmaはブラウザ上で開くことが出来ます!
(アプリケーション版もありますよ)
そのためソフトをインストールする手間がなく、アカウントを作成するだけでサクッと編集できるようになるんです。
 
デザイナーだけでなく、プログラマーやクライアントの方にも共有しやすいのがいいですね。
 
しかも、基本無料です。
編集者やプロジェクトを増やしたい場合は課金プランが発生しますが、個人的な範囲で使用したい場合は無料でも特に困りません。
 

スポンサーリンク

figmaの便利機能をご紹介!

 
今回はUIデザインをするにあたって「超便利!」と感じたfigmaの機能をご紹介していきます!
 

・コンポーネント化

コンポーネントとは機能を持つパーツの集まりです。
例えばTwitterなどのタイムラインにある帯って、いくつものパーツが集まって成り立っていますよね。
(下の画像参照)
 

このパーツの集まりを使い回しが効くようにできる機能が「コンポーネント化」です。
分かりづらいので図と一緒にご説明します!
 
まず、Twitterみたいなタイムラインを作りたいとします。
そのために大元になる1ユーザー分の帯を作りました。
 

 
帯内のパーツを全部選択し、「create component(◇が4つ並んだマーク)」を押します。
パーツが一つにまとまりコンポーネント化が出来ました。(レイヤーの文字が紫色になります)
 

 
タイムラインを作りたい時は、コンポーネント化した帯をひたすらコピー&ペーストしましょう!
作ったレイヤーを見てみると、最初にコンポーネント化した帯は紫の◆が4つ並んだアイコンがつき、それをコピーした帯は紫の◇アイコンがついています。
 

 
これは紫の◆が4つ並んだアイコンの帯が「親」であることを示しています。
 
そのため親のコンポーネントの中身をいじると…コピーしたコンポーネントも編集が反映されます!
 

 
この機能を生かすと、タイムラインを作った後に「アイコンの大きさ変えてくれる?」と言われた時に親のコンポーネントだけ変えれば修正が完了してしまうんです。
ただコピー&ペーストをしただけでは、いちいち全部のアイコンを編集しなければいけません。
 
 
さらに、複製したコンポーネントの中身を編集することも出来ます!
リアルなタイムラインを作りたい場合、それぞれのアイコンや名前も変えたいですよね。
 
その場合は複製した「子のコンポーネント」を直接編集すれば、他のコンポーネントに反映されず、要素を編集できます。
(親のコンポーネントをいじると全部反映されるので注意)
 

 
同じパターンが並んでいるUIを作るときに滅茶苦茶重宝します。

・プロトタイプの作成

プロトタイプとは、UI/UXの実際の動きを確かめるための模型です。
このボタンを押したらこのページに飛ぶ…などの大まかな流れを確認する時に使えます。
 
figmaではこのプロトタイプも手軽に作れます。
画面右にあるタブから「Prototype」を選ぶと、プロトタイプ作成モードに入ります。
 
遷移を設定したいオブジェクトやアートボードを選択すると、ボックスの右側に青枠の丸が出ます。
 
その丸をドラッグをすると矢印が出現するので、飛ばしたいアートボードに向かって伸ばします。離したら確定します。
これだけで遷移が設定できました。あら簡単…
 

 
さらに「Prototype」タブ内で遷移時の動きも設定できます。
・Trigger…どんな動作をすると反応するか
・Action…どのような動きで遷移するか
これでよりリアルなプロトタイプが作れますね。
 
実際に動きを確認したい時は画面右上の再生ボタンを押しましょう。
プレビューモードに切り替わります。

・ヘッダー、フッターの固定

上の項目でご紹介したプロトタイプを作る際に、ヘッダーとフッターを画面に固定しておきたい事があります。
スクロールした時に流れてしまうと困りますもんね。
 
その場合は固定したいオブジェクトを選択して、右のパレット内にある「Constraints」を編集します。
横と縦それぞれどの位置から固定するのか選択して、最後に「Fix position when scrolling」のチェックボックスをつければ完了です。
 

 

 
上の画像でいうとこんな設定になっています。
・横→left(左側を固定)
・縦→Top(上に固定)

→アートボードをどんなに拡縮しても、左上に固定される状態  

 
プレビューモードでヘッダーとフッターが固定されているか確かめてみましょう。

・スタイル保存

文字や図形で使った効果を、何度も使いたいという場合はそのスタイル(効果)を保存しておくことができます。
Photoshopやillustratorにもある機能ですね。
 
効果の、右上にある■が四つ並んだアイコンをクリックします。
開いたウィンドウの右上にある「+」を押すことで新規スタイルを登録できます。
 

 
保存したスタイルを使いたい場合は、同じく右上にある■が四つ並んだアイコンをクリックしましょう。
そこにスタイル一覧が並んでいるはずです。

・複数のシェイプを結合した体にできる

複製のシェイプを組み合わせてひとまとめに効果をかけたい時に、「Union」という機能が使えます。
 
まとめたい複数のシェイプを選択して上部タブにある「Union」→「Union Selection」をクリックします。
すると、シェイプ自体は分かれたままですが、表面上は結合した体になった「Union」というレイヤーにまとめられます。
 

 
Unionレイヤーに効果をかければ、結合した時と同じ仕上がりになります。
もちろんその後も個々のシェイプは編集可能です。
 

illustratorでいう「複合シェイプ」みたいな機能ですね!

・illustratorから簡単コピペ

figmaはillustratorで作業中のデータをコピー&ペーストで持ってくることが出来ます。
複雑な図形を作りたい方や、figmaの操作に慣れていない方は、illustratorからコピペした方が早いです。
 
ついでですが、sketchのデータを丸っと移行することも出来ます。
ページ一覧にデータをぽいっとドラッグ&ドロップするだけです。

・線の詳細設定

他のデザインツールにもありますが、線の詳細設定によって角の形などが変更できます。
ちょっと分かりづらいところにあるのでご紹介してみました。
 

 
「Storoke」欄の右下にある…をクリックすると詳細設定が出てきます。
線端の形、角の形などを変えたい場合に使いましょう。
「Dashes」では、数値を入力すると点線を作ることができます。

・アートボードのサイズ変更

アートボードの中でUIを作った後で「アートボードのサイズを変えたい!」と思って変形させようとすると、中身のオブジェクトまで伸縮してしまいます。
 
アートボードのみのサイズを変えたい場合は「Ctrl」を押しながら変形させてみてください。
中身のオブジェクトは伸縮しなくなります。
 
最初この方法を知らず、サイズ変更に手間取ったのでご紹介しました汗

・メンバーの画面観察

figmaの最大の魅力は、「リアルタイムで複数人が編集できるところ」とご紹介しました。
ただ複数人が作業できるだけではなく、他のユーザーの作業をじっくりと観察することができるんです。
 
右上のユーザー一覧の中から、名前のアイコンをクリックすると「その人が見ている画面を自分の画面で見る」ことが出来るのです。
相手のPCの画面を乗っ取ってコッソリ見ている感じです。笑
 

(↑ka-riさんの画面観察をしたい時の例。見ている側はこのka-riさんではありません。)
 
見られている側は「下手なことできねえ!」という感じですが、相手のスキルを観察して覚えられるのはいいことですね。

・アプリで即時確認

figmaはスマホ向けに「figma mirror」というアプリを出しています。
これはfigmaで作成したアートボードをすぐにスマホで確認できるという便利アプリです。
 
インストールして、figmaと同じアドレスでログインすれば準備完了。
PCでアートボードをクリックすれば、パッとスマホに画面が同期されます。
 
しかも一度アートボードを表示しておけば、PCで内容を編集する度に随時更新されます。
 
クライアントに実際の画面を見せながら「この方がいんじゃない?」なんて言われた時も、PCで直せば一瞬で修正完了。
技術の進化はんぱないです。

超便利な「figma」を使ってみよう!

他のデザインツールに劣らない機能の便利さと、複数人共有という新しい魅力が備わったfigma。
これからあなたの作業や仕事をさらに効率よくしてくれること間違いなしです。
 
基本は無料で使えるので、まずは気軽に使ってみてはいかがでしょうか!
figma公式ページはこちら!
 
 

スポンサーリンク
おすすめの記事