見出し画像

Chapter 1: Figmaの概要とセットアップ

はじめに

SketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。
従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリットがあり、他のツールと一線を画する存在となっています。

この記事では、これからFigmaを使おうと思っている方やFigmaの効果的な使い方を知りたい方に向けて、アカウント登録から基本的な操作方法、コンポーネントの作り方やコミュニケーションでの工夫など、基本から応用まで幅広い内容をまとめてマガジンにしてお届けします。

第一章は主にFigmaを初めて目にする方向けの「Figmaの概要とセットアップ」についてです。

Figmaについて

FigmaはスマートフォンアプリやWebサイトなどをデザインする際に使用するUIデザインツールです。日本のIT界隈ではUIデザインを作る上でSketchがよく使われていますが、最近ではFigmaを導入し始めている会社が多くなってきています。
Figmaの特徴としては、

・無料ではじめられる
・オンライン上にデータを保存できる
・web上で編集ができる
・デザイナー以外とのコミュニケーションがしやすい

などが挙げられます。
Figmaは設計思想として協同編集することをベースに作られているため、オンラインでの編集が他のデザインツールとの大きな違いとなります。

Figmaが使われてきている背景

最近ではUIデザインツールの代名詞であるSketchに代わって多くのプロジェクトで使われ始めていて、SlackのコミュニティができたりFigmaに関する多くの記事がまとめられたりとUIデザイナーの間で話題になっています。
Figmaが注目されはじめた理由としては、

・オンラインで共同編集ができる

この一点に尽きると思います。
Sketchを使っていたころはエンジニアにUIデザインを渡すときデザインファイルを直接渡すか、Zeplinといった外部サービスと連携してコミュニケーションを取っていましたが、デザインの変更が発生するともう一度デザインを編集してファイルを渡し直す必要がありました。
その点FigmaはUIデザインのファイルを持たず、デザインの変更がオンラインで即更新されるため、エンジニアやディレクターがデザインデータを待つことがなくなりシームレスに開発を進められるようになります。

逆に1人でUIデザインをする場合はFigmaを無理に使う必要はないとも思いますが、1人で完結することは(デザインレビューを含めても)レアケースなのでUIデザインを始める場合はツールとしてFigmaを選択肢の候補に入れてよいかと思います。

Figmaのアカウント作成

さっそくFigmaを使い始めてみましょう。
https://www.figma.com/ にアクセスし、右上のSign Upを押します。

Googleアカウントでの登録か、メールアドレスでアカウントを作成します。

メールアドレスで登録した場合は次のダイアログで名前と役職を聞かれるので回答します。利用規約(Terms of Service)とプライバシー・ポリシー(Privacy Policy)がCreate Accountボタンの下にリンクがあるので必ず目を通しましょう。


これでアカウントの作成は完了です。

チームの作成

アカウントを作成してFigmaにアクセスすると、次のような画面が表示されます。

まずはチュートリアルの指示に従いましょう。
中央に表示されているダイアログの Next を押すと、チーム作成に関する表示が出ます。

Figmaでのチームとは、UIデザインの閲覧や編集する人を招待してチームを作ってデザインすることができます。Figmaは多人数での作業を想定したデザインツールなのでチームを作る必要があり、個人の場合も必須なのでチーム名を入力して作成します。

チームを作るとプラン選択の画面に移ります。要約を下に書きますが、詳細な機能などについては https://www.figma.com/pricing/ を見た上で自身に合ったプランを選択してください。

Starter
・無料
・無制限のViewer(見てコメントできる人)と無制限のFile作成
・Editor(デザインする人)は2人まで
・プロジェクトは3つまで
・Version History(変更履歴)は30日まで保存

Professional
・Editor1人につき月12ドル
・無制限のプロジェクト、ファイル
・無制限のVersion History
・Component Libraryを使用できる

ここではお試しなのでStarterプランを選択します。

プロジェクトの作成

次はプロジェクトを作成します。先程のチームを会社名に例えると、プロジェクトは部署名か事業単位、またはプロジェクト単位で名前を付けるとよいかと思います。

Create Project をクリックし、プロジェクト名を入力します。

このとき左下の Everyone at ... can edit をクリックすると

プロジェクトに対するメンバーの権限を選ぶことができます。下の2つはProfessional または Organization プランのみ使うことができ、チーム内で見せる事ができないデザインはあまりないと思いますが機密性が非常に高い際は選択するとよいと思います。
名前を入力し Create Project をクリックすると完了です。

これでプロジェクトが作られました。
最後にファイルを作ってUIデザイン直前までに進みます。

ファイルの作成

プロジェクトを作ったら次はファイルを作ります。先程作ったプロジェクトの画面(上の図)の中央に「+ New File」と表示されている青い点線の枠をクリックします。

ダイアログでチュートリアルが表示されるので、なんとなく理解したらで構わないのでNextを押し、ステップを進めましょう。

このなにもない画面まで来たら準備完了です。ここからUIデザインをゼロから作っていきます。

早速デザインを始めたいですが、まずはファイルの名前をつけましょう。
画面中央上のUntitledという文字をクリックします。文字横のプルダウンマークを押して Rename を選択しても可能です。

ファイル名を変更できるようになったのでそのまま名前を入力します。
ここでは仮で「iOS UI Design」と付けました。

これでファイル名が変わりました。
ここからUIデザインを作っていきます。具体的なUIデザインの始め方は次章以降に書くので、今回はFigmaの画面の見方についてご説明します。

↑サンプルで作った簡単なUIデザインの画面、作り方は後ほど。

Figmaの画面の見方

先程名前をつけたファイルを開いている状態であれば、画面左上の三本線(いわゆるハンバーガーメニュー)をクリックします。

メニューが表示されるので Back to Files をクリックします。

先程のプロジェクトの画面に戻ってきました。そして「iOS UI Design」のファイルが確認できます。UIデザインをする際はこの画面からファイルを選択して各々のデザインを作っていきます。

次に左のサイドメニューのプロジェクト名の上のチーム名をクリックします。(この場合〇〇プロジェクトの上のfujiken)

ここではチームのプロジェクトが一覧で見ることができます。
お気づきの方もいると思いますが、先程つくった「〇〇プロジェクト」の上に「Design System」というプロジェクトが作られています。これは新規プロジェクトを作成する際に自動で生成されるものでFigmaが用意してくれたものになります。Design Systemについてはこちらも別の章で説明しますので、気になる方は中身をさっと確認してみてください。

Starterプランの方はプロジェクトは3つまでしか作れないので、プロジェクトが足りない方は Design Systemを削除しましょう。
ちなみにプロジェクト横の☆をクリックすると左のサイドメニューに表示することができます。よく開くプロジェクトは★にしておくと画面左からアクセスしやすくなるため便利です。

ここまでで、Figmaの概要と事前準備は完了となりますが、最後にFigmaでUIデザインがしやすくなる環境構築について紹介します。
次回以降はデスクトップアプリ前提で説明するので、下のステップでアプリをダウンロードして環境を整えましょう。

デスクトップアプリのダウンロード

Figmaの画面左上の自分のアカウント名、もしくは三本線のアイコンを押し、メニューからGet Desktop App をクリックしてアプリをダウンロードします。( https://www.figma.com/downloads/ からもダウンロードできます。)

アプリケーションを開いたら、先程作成したアカウントでログインします。

webで見ていたような画面と同じような画面がアプリで見れるようになりました。個人的にはUIデザインはデスクトップアプリの方が操作しやすいのでこちらで作業するのがおすすめです。

次回以降はこちらを使っていきます。

モバイルプレビューアプリのダウンロード

iOSやAndroidなどのモバイルアプリのUIデザインをする方は実機プレビューはほぼほぼ必須なので、公式が出しているプレビュー用のアプリを端末にインストールしておきましょう。プロトタイプの検証も行うことができるのでぜひ入れてみてください。
AppstoreもしくはGooglePlayからダウンロードできます。面倒な方は下のQRをカメラにかざしてお使いください。

iOSの方

Androidの方

おわりに

この章ではFigmaの概要とセットアップ方法についてまとめました。
次回はUIデザインの要素となるFrameやオブジェクトなどを使った「Figmaの基本操作」について紹介します。第2章はこちら↓


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

よろしければ応援お願いいたします! いただいたサポートは勉強資金にあてて、情報発信のモチベーションにさせていただきます!😁

ありがとうございます!!
74
クックパッドのデザイナー。Figmaに関する情報発信してます。UIデザインと実装を繋ぐのが得意。新規事業でデザイナーのマネジメントを実践中。https://kenshir0f.com 個人で日報サービス作ってます→http://stella-app.jp
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。