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




デスクトップアプリとしてのFigma
Figmaはこのようにブラウザ上で利用できますが、同じ機能を搭載したデクストップアプリも用意されています。ズームなどの操作はブラウザの場合ですと少し重たい感じがあったりと気になる方はデスクトップアプリの方うも用意しておくといいでしょう。デスクトップアプリは公式サイトのダウンロードページ(https://www.figma.com/downloads/)からインストールができます。OSにあったものを選択します。






sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories