Figmaをインストールしよう

この章では、本チュートリアルで使用するデザインカンプを確認するための「Figma」という無料で使えるデザインツールについて解説します。

Figma の概要

Figma とは、Web サイトやスマートフォンアプリの見た目（UI）をデザインできるツールです。類似するソフトでは、「Adobe XD」や「Sketch」などがあります。

Figma が類似のツールよりも優れている点は、

などが挙げられます。

まず、これまでの Web デザインといえば、Adobe 社が提供する定額課金型の有料ソフトか、買い切り型の Sketch というデザインソフトを購入する必要がありました。

しかし、Figma の場合はアカウントだけ作成すれば、無料プランの範囲内ですぐにでもデザイン作業をスタートできたり、非デザイナーの人へも URL を共有するだけでデザインデータを連携できるようになっています。

Figma が登場する以前のデザインソフトでは、一般的に以下のような手順でデザインデータを共有していました。

【デザインを共有する手順】

１回のやり取りで終われば問題ないように思えますが、これでは、デザインの修正が入るたびに上記の手順を繰り返す必要があります。（実際にはデザインの修正などは頻繁に発生することなので、この手順だと手間がかかります）

このような問題点も、Figma であれば URL １つ共有するだけで常に最新のデザインデータを確認できるという強力なメリットがあるため、徐々にシェアを伸ばしています。

Figma の Desktop 版アプリをダウンロードするには、下記リンク先の公式サイトから行えます。

▼ Figma 公式サイトのトップページ

file

Windows 版や Mac 版など、プラットフォームに合わせたアプリが用意されていますので、ご自身の環境に合わせてインストールをしてください。

具体的なインストール手順などは割愛しますので、適宜インターネット上で Figma のインストール手順を検索してみたり、以下の解説記事などを参考にして進めてみてください。

【Figma の解説記事】

UI/UX デザインツール『Figma』入門 - 1-2. 初期設定とインストール

この章では、デザインカンプを確認するための「Figma」というデザインツールについて学びました。

Figma は無料で使い始めることができるため、とても気軽に導入することができます。次章で解説する本チュートリアルのデザインカンプは Figma で制作していますので、まずは Figma の Desktop アプリをインストールしておきましょう。

おめでとうございます！🎉
このチュートリアルはこれで終了です。