最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
UIデザインやワイヤーフレーム作成に利便性の高いツールは、AdobeXDやSketchなどがあります。
しかし数多く居るWebデザイナーの中には、もっと便利で操作性が高いツールを求めている方も、いるのではないでしょうか?
今回は「Figma」という、便利なWebデザインツールの使い方やリモートワークでのメリットなどを解説します。
「Figma」はWebブラウザ上で簡単にデザインができるツールです。
ブラウザでデザインの閲覧・編集ができ、1つのファイルを複数人で共有することも可能なので、チーム内での作業に適しています。
Figmaには、Webデザインにおいてのチーム作業に必要な複数の機能がひとつに集約されており、以下の作業をFigmaだけを使っておこなうことができます。
また、Figmaは「Starter」プランであれば無料で使えるので、使用感を気軽に試せる点も魅力です。
Figmaの特徴として挙げられるのが、「ブラウザ上でデザインを閲覧・編集できる」点と「複数人でファイルを共有できる」という点です。
Figmaがもつこれらの特徴は、特にお互いに遠隔で業務をおこなうリモートワークにおいて、最大限発揮されます。
Figmaのファイル共同編集、ファイル共有機能がリモートワークに便利な理由は、以下のとおりです。
FigmaはWebブラウザ上でデザインの閲覧・編集が可能なツールです。
そのため、インターネット環境さえあれば誰でも使用できるという特徴があり、ローカル環境にアプリケーションをダウンロードする必要がないので、パソコンの容量を圧迫しないというメリットにもつながっています。
Figmaはファイルを複数人でリアルタイムに共有することが可能です。
共同編集時のタイムラグはほとんどなく、他ツールも併せて使っているときに起こりがちな、データ競合による編集内容の意図しない消去が起こりにくくなっています。
複数の機能がFigmaに集約されていることから、確認するツールもひとつだけで済みます。
デザイナーがオンライン会議で作業中の画面を見せつつ、リアルタイムでデザインをすることもできるので、新人を育成時のレクチャーにも使用することが可能です。
Figmaはファイルごとに履歴管理ができ、自動保存記録や、手動保存したデータへのタイトルとメモを残すこともできます。
そのためFigmaでは開発段階ごとの更新履歴の管理が簡単で、ローカルにデータを置く必要性も少なくなり、より快適な環境でデザイン作業をしやすくなっています。
Figmaでは、プロジェクトやファイルごとの公開設定と権限管理をおこなえます。
ファイル公開の設定はリンクを知っている全員、または招待した相手から選択でき、権限管理も編集者と閲覧者の2種類から選択可能です。
権限設定を閲覧者にした場合、その参加人数は無制限なので、ディレクターやクライアントなどへデータを共有することもできます。
Figmaにはチームでのデザイン作業に必要な機能が集約されていることから、チーム作業における効率アップが期待できます。
また、複数のツールを使う場合とは異なり、ひとつのツールを使用するだけで済むことから、データ更新にタイムラグが発生しません。
そのためFigmaでは、常にチーム内の誰もが最新のデータにアクセスできる環境が整っており、開発メンバー同士やディレクターと開発メンバー間などの連携向上につなげられます。
ここからは、Figmaの具体的な使い方について解説していきます。
Figmaの公式ページにアクセスし、以下の手順でアカウントを作成します。
アカウントを作成した後は、Figmaを使用できるようになります。
ここでは、Figmaを使用してデザインを作成する方法について解説していきます。
ワイヤフレームやプロトタイプの作成などの基本から、データ共有方法やPDF化などについても解説します。
Figmaを使って新規デザインファイルを作成する場合、まずは画面メインカラム左上の「New design file」をクリックして新規ファイルを作成します。
まずは、Figmaを使ったワイヤーフレームの作成です。
画面左上の#マークを選択し、画面中央部でドラッグすることで、任意のサイズでワイヤーフレームを作成できます。
ワイヤーフレームをつくると、画面右側のサイドバーにデバイス名が表示されるので、ここから任意のデバイス名を選択することで画面サイズごとのワイヤーフレームをつくれます。
また、ワイヤーフレームにグリッドを設定するためには、フレームを選択した状態で画面右側の「Layout Grid」をクリックします。
四角形や円形といった各種図形を配置するには、画面上部の四角形のアイコンをクリックし、表示される図形から配置したいものクリックしてからフレーム内でドラッグします。
配置した図形は、画面右側のサイドバー内のプロパティ項目から、サイズ、位置、傾きや透明度などを設定可能です。
また、ページ上部のTマークを選択してフレーム内でクリックをすると、テキスト入力欄が表示され、テキストを入力できます。
こちらも画面右側のプロパティ項目から、フォント種類、サイズ、色などを設定可能です。
プロトタイプは、画面右側の「Prototype」を選択し、Figmaをプロトタイプモードに切り替えることで作成できます。
デバイスやスタート画面の設定はサイドバーからおこなうことができ、リンク設定などは矢印を使って視覚的におこなえます。
Figmaでチームメンバーとデータを共有するには、画面右上の「Share」をクリックします。
Figmaのアカウントがある人と共有する場合は、閲覧だけか編集もできるようにするかを選択可能です。
アカウントがある人とデータを共有するには、登録メールアドレスを入力して「Send invite」を押すことで、招待ができます。
Figmaのアカウントがない相手に対しては、「Copy Link」を押してURLをメール等で伝えます。
データをPDF化するには、右側のサイドメニューの「EXPORT」から「PDF」を選ぶことでできます。
また、「EXPORT」からPNG、JPG、SVGファイルなどの画像ファイルを選び、出力することもできます。
画面幅ごとのデザインを確認したい場合は、プレビューを切り替えます。
左側のサイドメニューの「Layers」内の「Pages」でPC、スマホのフレームを分けることができます。
また、「Prototype」を選ぶと、実際のデバイスごとの画面幅の場合を確認することが可能です。
Figmaはプラグインを使用して、さらなる機能を追加することができます。
公式サイトの「Community」からプラグインを選択し、Installをクリックすることでインストールできます。
Figmaにインストールしたプラグインは、画面右端の「メニュー」をクリックし、「plugin」を選択して、一覧の中から使用可能です。
Figmaはリモートワークなど、複数での共同作業において便利なWebデザインツールで、UIデザイナーにとって利便性の高い機能を数多く備えています。
料金無料で使用できるので、興味のある方はお試しで使用してみてはいかがでしょうか。