フォローしました目次はじめにFigmaについてFigmaが使われてきている背景Figmaのアカウント作成チームの作成プロジェクトの作成ファイルの作成Figmaの画面の見方デスクトップアプリのダウンロードモバイルプレビューアプリのダウンロードすべて表示はじめにSketchやAdobeXDなど、様々なUIデザインツールが業務の中に取り入れられている中で、Figmaの登場によってデザイン環境がガラッと変わりつつあります。従来のデザイン製作フローとは異なる同期的なスピード感のある開発環境へと変化し、ディレクターやエンジニアによるUIデザインレビュー、デザインスプリントでの複数人によるプロトタイプ作成など、デザイナー以外の方や様々な状況で大きなメリットがあり、他のツールと一線を画する存在となっています。この記事では、これからFigmaを使おうと思っている方やFigmaの効果的な使い方を知りたい方に向けて、アカウント登録から基本的な操作方法、コンポーネントの作り方やコミュニケーションでの工夫など、基本から応用まで幅広い内容をまとめてマガジンにしてお届けします。kenshir0f|noteデザインツールFigmaの基本的な使い方から、エンジニアと協力して開発に組み込む際の応用編などを書いていきます。note.mu第一章は主にFigmaを初めて目にする方向けの「Figmaの概要とセットアップ」についてです。FigmaについてFigmaはスマートフォンアプリやWebサイトなどをデザインする際に使用するUIデザインツールです。日本のIT界隈ではUIデザインを作る上でSketchがよく使われていますが、最近ではFigmaを導入し始めている会社が多くなってきています。・無料ではじめられる・オンライン上にデータを保存できる・web上で編集ができる・デザイナー以外とのコミュニケーションがしやすいなどが挙げられます。Figmaは設計思想として協同編集することをベースに作られているため、オンラインでの編集が他のデザインツールとの大きな違いとなります。最近ではUIデザインツールの代名詞であるSketchに代わって多くのプロジェクトで使われ始めていて、SlackのコミュニティができたりFigmaに関する多くの記事がまとめられたりとUIデザイナーの間で話題になっています。・オンラインで共同編集ができるこの一点に尽きると思います。Sketchを使っていたころはエンジニアにUIデザインを渡すときデザインファイルを直接渡すか、Zeplinといった外部サービスと連携してコミュニケーションを取っていましたが、デザインの変更が発生するともう一度デザインを編集してファイルを渡し直す必要がありました。その点FigmaはUIデザインのファイルを持たず、デザインの変更がオンラインで即更新されるため、エンジニアやディレクターがデザインデータを待つことがなくなりシームレスに開発を進められるようになります。逆に1人でUIデザインをする場合はFigmaを無理に使う必要はないとも思いますが、1人で完結することは(デザインレビューを含めても)レアケースなのでUIデザインを始める場合はツールとしてFigmaを選択肢の候補に入れてよいかと思います。Figmaのアカウント作成さっそくFigmaを使い始めてみましょう。Googleアカウントでの登録か、メールアドレスでアカウントを作成します。メールアドレスで登録した場合は次のダイアログで名前と役職を聞かれるので回答します。Accountボタンの下にリンクがあるので必ず目を通しましょう。これでアカウントの作成は完了です。チームの作成アカウントを作成してFigmaにアクセスすると、次のような画面が表示されます。チュートリアルの指示に従いましょう。押すと、チーム作成に関する表示が出ます。Figmaでのチームとは、UIデザインの閲覧や編集する人を招待してチームを作ってデザインすることができます。Figmaは多人数での作業を想定したデザインツールなのでチームを作る必要があり、個人の場合も必須なのでチーム名を入力して作成します。チームを作るとプラン選択の画面に移ります。見た上で自身に合ったプランを選択してください。Libraryを使用できるここではお試しなのでStarterプランを選択します。次はプロジェクトを作成します。先程のチームを会社名に例えると、プロジェクトは部署名か事業単位、またはプロジェクト単位で名前を付けるとよいかと思います。クリックし、プロジェクト名を入力します。クリックするとプロジェクトに対するメンバーの権限を選ぶことができます。プランのみ使うことができ、チーム内で見せる事ができないデザインはあまりないと思いますが機密性が非常に高い際は選択するとよいと思います。クリックすると完了です。これでプロジェクトが作られました。最後にファイルを作ってUIデザイン直前までに進みます。ファイルの作成プロジェクトを作ったら次はファイルを作ります。File」と表示されている青い点線の枠をクリックします。ダイアログでチュートリアルが表示されるので、なんとなく理解したらで構わないのでNextを押し、ステップを進めましょう。このなにもない画面まで来たら準備完了です。ここからUIデザインをゼロから作っていきます。デザインを始めたいですが、まずはファイルの名前をつけましょう。画面中央上のUntitledという文字をクリックします。ファイル名を変更できるようになったのでそのまま名前を入力します。Design」と付けました。これでファイル名が変わりました。ここからUIデザインを作っていきます。具体的なUIデザインの始め方は次章以降に書くので、今回はFigmaの画面の見方についてご説明します。↑サンプルで作った簡単なUIデザインの画面、作り方は後ほど。先程名前をつけたファイルを開いている状態であれば、画面左上の三本線(いわゆるハンバーガーメニュー)をクリックします。先程のプロジェクトの画面に戻ってきました。Design」のファイルが確認できます。UIデザインをする際はこの画面からファイルを選択して各々のデザインを作っていきます。次に左のサイドメニューのプロジェクト名の上のチーム名をクリックします。(この場合〇〇プロジェクトの上のfujiken)ここではチームのプロジェクトが一覧で見ることができます。System」というプロジェクトが作られています。これは新規プロジェクトを作成する際に自動で生成されるものでFigmaが用意してくれたものになります。Systemについてはこちらも別の章で説明しますので、気になる方は中身をさっと確認してみてください。Systemを削除しましょう。ちなみにプロジェクト横の☆をクリックすると左のサイドメニューに表示することができます。開くプロジェクトは★にしておくと画面左からアクセスしやすくなるため便利です。ここまでで、Figmaの概要と事前準備は完了となりますが、最後にFigmaでUIデザインがしやすくなる環境構築について紹介します。次回以降はデスクトップアプリ前提で説明するので、下のステップでアプリをダウンロードして環境を整えましょう。クリックしてアプリをダウンロードします。ダウンロードできます。)アプリケーションを開いたら、先程作成したアカウントでログインします。webで見ていたような画面と同じような画面がアプリで見れるようになりました。個人的にはUIデザインはデスクトップアプリの方が操作しやすいのでこちらで作業するのがおすすめです。次回以降はこちらを使っていきます。モバイルプレビューアプリのダウンロードiOSやAndroidなどのモバイルアプリのUIデザインをする方は実機プレビューはほぼほぼ必須なので、公式が出しているプレビュー用のアプリを端末にインストールしておきましょう。プロトタイプの検証も行うことができるのでぜひ入れてみてください。AppstoreもしくはGooglePlayからダウンロードできます。面倒な方は下のQRをカメラにかざしてお使いください。iOSの方Androidの方おわりにこの章ではFigmaの概要とセットアップ方法についてまとめました。次回はUIデザインの要素となるFrameやオブジェクトなどを使った「Figmaの基本操作」について紹介します。第2章はこちら↓ダウンロード#figma#figma入門この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。kenshir0fクックパッドのデザイナー。Figmaに関する情報発信してます。UIデザインと実装を繋ぐのが得意。新規事業でデザイナーのマネジメントを実践中。Figmaの基本操作この記事が入っているマガジンFigma入門デザインツールFigmaの基本的な使い方から、エンジニアと協力して開発に組み込む際の応用編などを書いていきます。komuraFigmaの使い方、全力でまとめました。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。