https://www.figma.com/
個人的に激推しなブラウザ環境で動く（デスクトップアプリもある）UIデザインツール。
英語UIということで敬遠するひともいるかもしれないので、使ってくれる人が増えてくれることを願って、使いやすいところとかTipsをちょっとずつ追記していこうと思います。
※Mac環境を前提に書いています。⌘（command） → control などショートカットキーの違いは良しなに読み替えてください。
2018年7月3日追記：
2018年6月21日に、Figmaのバージョン3が公開されました！🎉
https://blog.figma.com/figma-3-0-217d6c248f85
クローズドβだったテキストスタイルとカラースタイルが使えるようになったほか、固定ヘッダーや領域内でのスクロールなども再現できるようになりました。
2018年8月13日追記：
Mac（MacBookProなど）でしか検証していませんが、デスクトップアプリは、ブラウザ版の表示と色味が違います。カラープロファイル・カラーマネジメント周りが影響しているようで、開発側に認識はしているようですが、すべての環境で問題が出ないような解決にいたるまではもう少し時間を要するようです。
参考 https://spectrum.chat/?t=a41d0fcd-309e-4a63-8bc8-63c04e27e1c6
カラーの表示などが気になる方はブラウザから利用されることをおすすめします。
とりあえず困ったら⌘/
SketchでいうところのSketch Runnerのような機能です。
UIが英語なので、よく使う操作名は英単語など覚えておくとcommand + /でさっと呼び出せて便利です。
選択したものを並べてくれる Pack Vertical / Pack Holizontal
複数の要素を選択して、この「Pack〜」を選択すると、それらの要素を重ならないようにピタッと並べてくれます。
整列関係をショートカットでさくっと
いわゆるWASDが割り当てられていて分かりやすい！
-
⌥W→ 上揃え -
⌥A→ 左揃え -
⌥S→ 下揃え -
⌥D→ 右揃え
センタリング関係は 横がH（Horizontal）で、縦がV（Vertical）。分かりやすい！
-
⌥H→ 横方向にセンタリング -
⌥V→ 縦方向にセンタリング
レイヤーパネル周りのショートカット
Sketchのそれにちょっと近い感じ
-
Tab→ レイヤーパネル上の次のレイヤー（兄弟レイヤー）を選ぶ -
Enter→ レイヤーを開く（選択中のレイヤーの子レイヤーに移動） -
Shift + Enter→ 一つ上の階層のレイヤーへ移動。間違って子レイヤー選択してしまった時にサクッとコレ。便利。 -
⌥L→ 今選んでいるレイヤーの親以外を全て閉じる。レイヤーパネルがごちゃごちゃしてきた時はおもむろにコレ。
マウス（ポインター）関連のよく使う操作
-
⌘ + クリックで下層のレイヤーを直接選択出来る - ドラッグする時も
⌘押しておくと、レイヤーグループとかを無視して下層のオブジェクトだけ選択出来る - ダブルクリックでレイヤーグループの中へ移動
-
⌘ + 上下スクロールでズームイン／ズームアウト
プロパティパネル（右側パネル）の数値をマウスでサクッと変える
数値フィールドの端っこをドラッグするか、⌥キーを押しながらフィールドをドラッグすると数値が変更できます。
左右で数値の増減、上下に離れるほど、増減する数値の量が小さくなります。
さらに、ドラッグ中のShiftを押しておけば、10単位で増減できます。
画像引用元: https://help.figma.com/properties-panel/positions-dimensions#you-control-the-speed
元のComponentを開く（Go to Master Component）
レイヤーパネルとかオブジェクトの右クリックか、メニュー（⌘/）から呼び出す。
選択中のインスタンスの元のComponentに移動します。
元のインスタンスを見失うことがあるので注意。
フレームを移動する N と Shift + N
パワポ、Keynoteでスライド切り替える感覚で使える。
-
N→ 次のフレーム -
Shift + N→ 前のフレーム
Detach Instance ⌥⌘B
Sketchで言うところのシンボルにあたるものがComponents（コンポーネント）で、それを実際のデザイン上に並べたものInstance（インスタンス）です。
Instanceを編集することもできますが、Componentsとの関わりをなくしてしまいたい時もあります。
そういう時はこのコマンドをつかいます。
UI上にこのボタンがないので、⌘/から呼び出したり、⌥⌘Bのショートカットを使います。
Round to Pixel
ピクセルに対してずれて配置されたポイントなどをピクセルに合わせてくれる。
Sketchにも同じコマンドがあります。
強制的にピクセルにフィットさせるので意図しない変形をしてしまうケースもあるので注意
Snap to Pixel
⌘/で "snap" とかで検索するとそれ系のコマンドがいろいろヒットするんですがそのひとつ。
これにチェックが入っていると、変形とかした時に自動的にピクセルにフィットするようになります。
これも Round to Pixel と同様意図しない変更をすることもあるので、注意。
スケールツール（K）
縦横比を変えずに変形できるツール。
Instanceを拡大縮小したい時とかに便利です。
アウトライン表示（⌘Y）
イラレと同じショートカット。
地味に嬉しい。Sketchとかで「アウトライン表示したい！」と思ったことがある人はFigma向き。
レイヤーパネルで選択すれば、重なり順が下のほうにあるものでも簡単にドラッグできる
レイヤーが複雑に重なってるとき、下の方のレイヤーだけをドラッグで動かしたいことがあります。
イラレとかだと（最近のはあんまり使ってないから知らないけど）、マウスのドラッグを開始したタイミングで、ポインターの位置にある重なり順が一番上のレイヤーが選択されてしまいますが、
Figmaの場合は、ドラッグ操作の開始のタイミングで選択がリセットされるということがないので、重なり順が下の方にあるレイヤーでも簡単にドラッグできます。
（これ、言葉だけだとつたわりづらいですね…。。追って図にしたい。）
❗️気をつけたほうがいいこと
マスクをかけたものが含まれた要素を書き出したSVGは、IE11でうまく表示されない
SVGの中身をいじったら良いのかもしれないけどいまのところ解決策が見つかっていない。
SVG化するまえにあらかじめマスクを使わない形にすれば大丈夫。
日本語入力の時にちょっと気をつけることアリ
たまーに、日本語を入力してて、途中で1byteのアルファベットを入力したりすると、入力してあった日本語の文字が消えたりすることがあります。
（Mac／Google日本語入力利用時）
（再現手順がいまいちよくわからない。個人的にはそこまで気になるレベルではない。）
↓
Control + Mで変換確定、Control + Kでカタカナに変換、など、文字入力中にControl絡みのショートカットを使うと発生するようです。