今回はブラウザで操作できるUIデザインツールであるFigmaを導入するまでの流れをまとめてみたいと思います。昨今では様々なデザインツールが登場し、日々いろんな機能が増えてきており、現場でのデザインワークフローにも大きな影響を与えています。   そんな中でもFigmaは着実にユーザー数が伸びてきており、導入しているという声もよく聞きます。ブラウザで利用できるという手軽さが大きな特徴で、そういった点も人気の理由ではないでしょうか。   Figmaには有料プランと無料で使えるフリープランも用意されています。一人がメインで制作を行うようなケースであれば、フリープランでも十分に使えるかと思います。  

Figmaでブラウザ上でのデザイン制作を行う

まずは公式サイト（https://www.figma.com/）にアクセスします。アカウントさえ作ってしまえば、ブラウザでこちらにアクセスするだけでデザインを作成することができます。右上の「Sign Up」もしくは左側にある「Try Figma for free」のボタンをクリックします。   アカウントのメールアドレスとパスワードを設定します。入力したら「Create account」のボタンをクリックします。   続いて簡単なアンケート画面が表示されますので、アカウントに使う名前などを入力し、先へと進めていきます。   すると、そのままログインが完了し、プロジェクト一覧が表示されたダッシュボードが表示されます。Figmaではデフォルトでいくつかのサンプルが用意されているので、すぐに確認してみることができます。ブラウザ上でデザインデータを開けますので、早速確認してみましょう。   左側にレイヤーパネル、右側にオブジェクトの操作パネルと中央にアートボードなどが表示される、お馴染みのレイアウトが表示されます。SketchやAdobe XDを使っているユーザーであれば、そんなに違和感なく触ることができるのではないでしょうか。    

デスクトップアプリとしてのFigma

Figmaはこのようにブラウザ上で利用できますが、同じ機能を搭載したデクストップアプリも用意されています。ズームなどの操作はブラウザの場合ですと少し重たい感じがあったりと気になる方はデスクトップアプリの方うも用意しておくといいでしょう。デスクトップアプリは公式サイトのダウンロードページ（https://www.figma.com/downloads/）からインストールができます。OSにあったものを選択します。   ちなみにですが、ブラウザでの利用ですとデフォルトではローカルのフォントデータが利用できないので、こちらのダウンロードページにある「Font Installers」からフォント読み込みができるようにしておきます。デスクトップアプリであればフォントインストーラーは不要とのことです。   インストールパッケージがダウンロードされたら、そのまま立ち上げて、画面の案内に沿ってインストール作業を進めていきます。   インストールが完了し、アプリを立ち上げるとログイン画面が表示されますので、アカウント情報を入力し「Log in」ボタンをクリックします。   ログインするとブラウザと同じく、プロジェクト一覧画面のダッシュボードが表示されます。見た目はブラウザとほぼ同じですね。   同じようにプロジェクトを選択し、デザインデータを見てみます。デスクトップアプリの方が少し動作が軽やかな印象ですね。ただし使える機能はブラウザと同じようですね。   また、Figmaの大きな特徴として、同時に複数人で一つのデザインデータを編集することができ、リアルタイムでデザインに反映されるようになっています。軽いデザイン修正などは打ち合わせしながらブラウザで完結するので、とてもスピーディーなワークフローが実現します。 このように該当するデザイン編集点には他ユーザーを示す矢印が表示され、リアルタイムでデザインデータが複数のユーザーから更新できるようになります。   今回はブラウザとデスクトップアプリでFigmaを導入する流れをまとめてみました。個人的にもFigmaはプロジェクトでも使っていたりしますが、とても便利で、本格的にデザインツールとしての移行も検討できるくらいの使いやすさですね。また、デザイナーだけでなくディレクターやエンジニアでも業務で使うことも増えてくるのではないでしょうか。チームの開発にとても効果的なツールなのでぜひ試してみてください。