OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる

最終更新日:2019.8.14 Update!!
今回はブラウザで操作できるUIデザインツールであるFigmaを導入するまでの流れをまとめてみたいと思います。昨今では様々なデザインツールが登場し、日々いろんな機能が増えてきており、現場でのデザインワークフローにも大きな影響を与えています。   そんな中でもFigmaは着実にユーザー数が伸びてきており、導入しているという声もよく聞きます。ブラウザで利用できるという手軽さが大きな特徴で、そういった点も人気の理由ではないでしょうか。   Figmaには有料プランと無料で使えるフリープランも用意されています。一人がメインで制作を行うようなケースであれば、フリープランでも十分に使えるかと思います。  
Figmaでブラウザ上でのデザイン制作を行う
まずは公式サイト(https://www.figma.com/)にアクセスします。アカウントさえ作ってしまえば、ブラウザでこちらにアクセスするだけでデザインを作成することができます。右上の「Sign Up」もしくは左側にある「Try Figma for free」のボタンをクリックします。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   アカウントのメールアドレスとパスワードを設定します。入力したら「Create account」のボタンをクリックします。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   続いて簡単なアンケート画面が表示されますので、アカウントに使う名前などを入力し、先へと進めていきます。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   すると、そのままログインが完了し、プロジェクト一覧が表示されたダッシュボードが表示されます。Figmaではデフォルトでいくつかのサンプルが用意されているので、すぐに確認してみることができます。ブラウザ上でデザインデータを開けますので、早速確認してみましょう。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   左側にレイヤーパネル、右側にオブジェクトの操作パネルと中央にアートボードなどが表示される、お馴染みのレイアウトが表示されます。SketchやAdobe XDを使っているユーザーであれば、そんなに違和感なく触ることができるのではないでしょうか。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる    
デスクトップアプリとしてのFigma
Figmaはこのようにブラウザ上で利用できますが、同じ機能を搭載したデクストップアプリも用意されています。ズームなどの操作はブラウザの場合ですと少し重たい感じがあったりと気になる方はデスクトップアプリの方うも用意しておくといいでしょう。デスクトップアプリは公式サイトのダウンロードページ(https://www.figma.com/downloads/)からインストールができます。OSにあったものを選択します。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   ちなみにですが、ブラウザでの利用ですとデフォルトではローカルのフォントデータが利用できないので、こちらのダウンロードページにある「Font Installers」からフォント読み込みができるようにしておきます。デスクトップアプリであればフォントインストーラーは不要とのことです。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   インストールパッケージがダウンロードされたら、そのまま立ち上げて、画面の案内に沿ってインストール作業を進めていきます。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   インストールが完了し、アプリを立ち上げるとログイン画面が表示されますので、アカウント情報を入力し「Log in」ボタンをクリックします。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   ログインするとブラウザと同じく、プロジェクト一覧画面のダッシュボードが表示されます。見た目はブラウザとほぼ同じですね。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   同じようにプロジェクトを選択し、デザインデータを見てみます。デスクトップアプリの方が少し動作が軽やかな印象ですね。ただし使える機能はブラウザと同じようですね。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる   また、Figmaの大きな特徴として、同時に複数人で一つのデザインデータを編集することができ、リアルタイムでデザインに反映されるようになっています。軽いデザイン修正などは打ち合わせしながらブラウザで完結するので、とてもスピーディーなワークフローが実現します。 ブラウザ上でも利用できるUIデザインツールの「Figma」を導入してみる このように該当するデザイン編集点には他ユーザーを示す矢印が表示され、リアルタイムでデザインデータが複数のユーザーから更新できるようになります。   今回はブラウザとデスクトップアプリでFigmaを導入する流れをまとめてみました。個人的にもFigmaはプロジェクトでも使っていたりしますが、とても便利で、本格的にデザインツールとしての移行も検討できるくらいの使いやすさですね。また、デザイナーだけでなくディレクターやエンジニアでも業務で使うことも増えてくるのではないでしょうか。チームの開発にとても効果的なツールなのでぜひ試してみてください。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram