Railsアップデートプラグインツール2018年3月22日デザインFigmaの基本【これからはじめるFigma】FigmaこれからはじめるFigma目次はじめにFigmaとはFigmaでできることこれからはじめるFigmaシリーズについてFigmaの基本設定まとめはじめに「Figma」って聞いたことあるし、触ったこともあるけど、業務に活かせるまでは使いこなせてないデザイナー。SketchやPhotoshopのように有料のツールを買って「ガッツリ勉強!」というところまではしたくないけどちょっとした画像加工などはできるようになりたいエンジニア、ディレクター、マーケター。いう方は多いのではないでしょうか?FigmaはしっかりUI/UXのデザインをしたいデザイナー、ちょっとした画像加工を行いたいエンジニア、ディレクター、マーケターにとって非常に便利なツールです。Webベースのツールなので、Macの方でもWindowsの方でも使える!また、ブラウザさえあればどこでも使える。プロジェクトをいくつ作っても無料で使える。collaboration)リアルタイムコラボレーションができるデザインツールです。どのようにリアルタイムコラボレーションができるかというと、複数人で同時にデザインすることができることです。docsやspreadsheetを思い浮かべていただくとイメージしやすいかもしれないです。FigmaはWebベースなので、PhotoshopやSketchなどが入っていなくても、どのマシンでもブラウザさえあれば誰でもデザインを閲覧、編集、コメントすることができます。Figmaは無料で使うことができます。いえ、チームで使う場合はプランが3つあり、無料プランだと、3プロジェクトまで無制限で使うことができます。(細かいところをいうと、Figmaはバージョン管理をしてくれるのですが、この機能が最初の30日間しか使えないという制限があります)ただ、チームで使わない分には、永遠に無料で使えるので非常に便利ですし、チームで使う場合も大型のプロジェクトでない限りは有料にしなくても大丈夫そうです。FigmaでできることFigmaはもともとインターフェースデザインのために作られたデザインツールで、いわゆるUI/UXデザイナーにはぴったりです。先ほども触れましたが、複数人でリアルタイムにデザインをすることができます。(この機能はワイヤーなどでみんなと話し合いながら変更などを加える時に便利かもしれません)さらに、作ったデザインに対してリアルタイムでコメントなどのフィードバックを入れることができます。こちらのやり方に関しては、別の記事でご紹介します。話題にもなっていましたが、Figmaにはバージョン管理機能があり、つい先日こちらの機能がさらにリッチになるように改良されました。詳しく知りたい方は、下記mediumの記事をご覧ください。History(Figmaのバージョンに名前と説明文がつけられるようになりました)イメージとしては、gitのデザイン版のようにデザインのバージョンに対し、名前をつけたり説明文がつけられるように改良されています。複数人でリアルタイムで作業できるスマホアプリやWebなどのインターフェースデザインのために作られたWebベースである個人、少数のチームは無料で使えるバージョン管理ができるこれからはじめるFigmaシリーズについて【これからはじめるFigma】シリーズではSketchを使ったことがない方やデザイナーではない方、新しいツールを触るのが不安な方に向けて、Figmaというツールをさらに便利に使っていただけるよう、Figmaの設定方法から細かい機能の使い方までご紹介します。FigmaはSketchを使っているデザイナーであれば、分かりやすいように作られていますが、先ほどもご紹介したようにFigmaは非常に機能が豊富です。Sketchを使ったことがあるというデザイナーさんに向けても、Webベースであるが故に設定しておいた方が良いことやFigmaならではの機能をご紹介し、さらにFigmaをフルに使っていただけるように様々なものをご紹介します。シリーズ後半ではシンプルなアプリを作り、Figmaのプロトタイピング機能、コラボレーション機能、ディベロッパーへのハンドオフの仕方なども紹介していきます。Figmaの基本それでは、早速実践に入り、Figmaの基本設定をしていきましょう。本来であれば、「ツールをダウンロードしよう!」というところから初めていくのですが、FigmaはWebベースなのでダウンロードせずに気軽にはじめることができます!Figmaのアカウントを作るFigmaをはじめるためには、こちらのサイトにアクセスしてください。Account」してください。アカウントを作り、Figmaに入ると、このようにすでにサンプルのプロジェクトがいくつか入っています。最初に簡単なチュートリアルがあるので、英語が大丈夫の方は一通り受けていただくと良いと思いますし、苦手な方はバツでスキップしてしまっても良いと思います。Figmaをネイティブアプリとして使うFigmaはWebベースなので、ブラウザっぽい感じが気になる、という方もいらっしゃるかもしれません。いえ、Figmaをネイティブアプリっぽく使用していただくコツがあります。ブラウザをフルスクリーンにすると少しネイティブアプリっぽくなります。コンピューターのメニューバーの「表示」からブックマークバーやツールバーなどを非表示にしておくのも良いかもしれません。FigmaはChromeと一番相性が良いので、他のブラウザでも良いのですが、できたらChromeで作業されることをおすすめします。FigmaはWeb版しかない、と思われがちですが、デスクトップ版のアプリもあります。App」をクリックすると、zipファイルがダウンロードされ、それを解凍すればネイティブアプリでもほぼWeb版と同じことができます。こちらのネイティブアプリはもちろん別のPCからはアクセスすることはできないので、ご注意ください。Figmaにローカルのフォントを設定するFigmaはWebベースのツールなので、そのままローカルのフォントをツール上で使用することができません。Figmaをはじめる前に設定で、ローカルフォントを使えるようにしていきます。Settings」を開きます。fonts」をクリックし、ダウンロードされた「FigmaInstaller.pkg」を開きます。するとローカルフォントがFigma内でも使えるようになります。fontsを使用する事をオススメします。基本の動作それでは、左のサイドメニューの「Recent」から先ほどの画面に戻り、Figmaの基本の動作を確認していきます。表示されているいずれかのプロジェクトを開いてください。File」というプロジェクトを開いて作業します。ページ内で動くまず、自分が操作したいところにいけるよう、Figmaのページ内で動く方法をご紹介します。(選択した範囲までズームイン)上記、6つのショートカットが基本的な、ページ内移動、ズームのショートカットですので、一番使いやすいものを模索しながら慣れるまでページ内をくるくる移動してみてください。掴みたいオブジェクトを掴むFigmaではPhotoshopやSketchと同じように、全てのデザイン部品を「レイヤー」という単位で分けています。「レイヤー」をいくつかまとめたもののことを「グループ」と呼びます。普通にFigma内でデザイン上をクリックすると「グループ」の方が選択されます。クリックで中のレイヤーを掴みましょう。画像のレイヤー、シェイプのレイヤー、テキストのレイヤーなど思い通りに自分のレイヤーが掴めるように練習してみてください。何度もうまくいかない場合は、「ページ内で動く」部分でご紹介したショートカットを使いながら、自分の掴みたいレイヤーの近くまでズームして再度チャレンジすると良いかもしれません。ある程度スムーズに掴めるようになったら、どれでも良いので、テキストレイヤーを掴んでください。テキストレイヤーを掴むと、左のレイヤーパネルで「T」に似た文字がハイライトされるはずです。テキストレイヤーがつかめていることが確認できたら、右にあるバーをご覧ください。こちらは「プロパティバー」といい、そのレイヤーのもつ様々な属性を変更することができます。そのレイヤーのオプションを変更することができる、と考えても良いでしょう。テキストレイヤーであれば、そのテキストのフォントや大きさ、行間などを変更できます。今回は、文字のフォントを変更してみましょう。フォントを変更する際に、1つ注意点なのですが、「TEXT」部分の右側にある「・・・」をクリックしてください。Type」という書式の詳細設定をすることができます。fonts」というところにチェックが入っているのを確認してください。こちらにチェックを入れることによりGoogleのWebフォントが使用できるようになります。一点注意するべき点としては、フォントが英文フォントになっているときは日本語をタイプしても表示されません。いくら日本語を入力しても文字が出てこず日本語ユーザーがFigmaを使用する際に混乱する大きな原因になっています。フォントを和文フォントに変更すれば日本語はきちんと表示されるので日本語を打つ際はフォントの変更を忘れないようにしてください。まとめ以上、今回はFigmaの基本についてご紹介しました。Figmaはデザイナーだけでなく、エンジニア、ディレクター、マーケターの方にも使っていただける非常に便利なデザインツールです。ベーグリーでは【これからはじめるFigma】という名前でFigmaの基本操作やさらに奥深い機能のご紹介までしていきますのでぜひ皆さんの学習に役立ててください。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。Stylesのベータ版サインアップ開始!!2018年4月11日フレームとグループと選択方法【これからはじめるFigma】アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。