2018年3月22日

デザイン

Figmaの基本【これからはじめるFigma】

目次

  1. はじめに
  2. Figmaとは
  3. Figmaでできること
  4. これからはじめるFigmaシリーズについて
  5. Figmaの基本設定
  6. まとめ

はじめに

「Figma」って聞いたことあるし、触ったこともあるけど、業務に活かせるまでは使いこなせてないデザイナー。

SketchやPhotoshopのように有料のツールを買って「ガッツリ勉強!」というところまではしたくないけどちょっとした画像加工などはできるようになりたいエンジニア、ディレクター、マーケター。

そういう方は多いのではないでしょうか?

FigmaはしっかりUI/UXのデザインをしたいデザイナー、ちょっとした画像加工を行いたいエンジニア、ディレクター、マーケターにとって非常に便利なツールです。

Webベースのツールなので、Macの方でもWindowsの方でも使える!また、ブラウザさえあればどこでも使える。さらに、プロジェクトをいくつ作っても無料で使える。

今回はそんな超便利だけど意外と知られていない、Figmaとその基本をご紹介します!

Figmaとは

FigmaとはDylan FieldとEvan Wallaceが共同開発した初の(design tool with real-time collaboration)リアルタイムコラボレーションができるデザインツールです。

どのようにリアルタイムコラボレーションができるかというと、複数人で同時にデザインすることができることです。Google docsやspreadsheetを思い浮かべていただくとイメージしやすいかもしれないです。

また、FigmaはWebベースなので、PhotoshopやSketchなどが入っていなくても、どのマシンでもブラウザさえあれば誰でもデザインを閲覧、編集、コメントすることができます。

また、Figmaは無料で使うことができます。
とはいえ、チームで使う場合はプランが3つあり、無料プランだと、3プロジェクトまで無制限で使うことができます。(細かいところをいうと、Figmaはバージョン管理をしてくれるのですが、この機能が最初の30日間しか使えないという制限があります)

ただ、チームで使わない分には、永遠に無料で使えるので非常に便利ですし、チームで使う場合も大型のプロジェクトでない限りは有料にしなくても大丈夫そうです。

Figmaでできること

Figmaはもともとインターフェースデザインのために作られたデザインツールで、いわゆるUI/UXデザイナーにはぴったりです。

先ほども触れましたが、複数人でリアルタイムにデザインをすることができます。(この機能はワイヤーなどでみんなと話し合いながら変更などを加える時に便利かもしれません)

さらに、作ったデザインに対してリアルタイムでコメントなどのフィードバックを入れることができます。

こちらのやり方に関しては、別の記事でご紹介します。

また、話題にもなっていましたが、Figmaにはバージョン管理機能があり、つい先日こちらの機能がさらにリッチになるように改良されました。さらに詳しく知りたい方は、下記mediumの記事をご覧ください。

Now you can name and annotate your Figma Version History
(Figmaのバージョンに名前と説明文がつけられるようになりました)

イメージとしては、gitのデザイン版のようにデザインのバージョンに対し、名前をつけたり説明文がつけられるように改良されています。

Figmaの機能

  • 複数人でリアルタイムで作業できる
  • スマホアプリやWebなどのインターフェースデザインのために作られた
  • Webベースである
  • 個人、少数のチームは無料で使える
  • バージョン管理ができる

これからはじめるFigmaシリーズについて

【これからはじめるFigma】シリーズではSketchを使ったことがない方やデザイナーではない方、新しいツールを触るのが不安な方に向けて、Figmaというツールをさらに便利に使っていただけるよう、Figmaの設定方法から細かい機能の使い方までご紹介します。

FigmaはSketchを使っているデザイナーであれば、分かりやすいように作られていますが、先ほどもご紹介したようにFigmaは非常に機能が豊富です。

すでにSketchを使ったことがあるというデザイナーさんに向けても、Webベースであるが故に設定しておいた方が良いことやFigmaならではの機能をご紹介し、さらにFigmaをフルに使っていただけるように様々なものをご紹介します。

また、シリーズ後半ではシンプルなアプリを作り、Figmaのプロトタイピング機能、コラボレーション機能、ディベロッパーへのハンドオフの仕方なども紹介していきます。

Figmaの基本

それでは、早速実践に入り、Figmaの基本設定をしていきましょう。

本来であれば、「ツールをダウンロードしよう!」というところから初めていくのですが、FigmaはWebベースなのでダウンロードせずに気軽にはじめることができます!

Figmaのアカウントを作る

Figmaをはじめるためには、こちらのサイトにアクセスしてください。
Figma

すでにアカウントをお持ちの方は「Sign in」よりサインインしてください、アカウントをお持ちでない方は「Sign Up」してください。

サインアップする方は、最初に簡単にどういうお仕事をしているのかアンケートがあるので、そちらに答えて「Create Account」してください。

アカウントを作り、Figmaに入ると、このようにすでにサンプルのプロジェクトがいくつか入っています。

最初に簡単なチュートリアルがあるので、英語が大丈夫の方は一通り受けていただくと良いと思いますし、苦手な方はバツでスキップしてしまっても良いと思います。

Figmaをネイティブアプリとして使う

FigmaはWebベースなので、ブラウザっぽい感じが気になる、という方もいらっしゃるかもしれません。

とはいえ、Figmaをネイティブアプリっぽく使用していただくコツがあります。

ブラウザをフルスクリーンにすると少しネイティブアプリっぽくなります。

もしくは、コンピューターのメニューバーの「表示」からブックマークバーやツールバーなどを非表示にしておくのも良いかもしれません。

FigmaはChromeと一番相性が良いので、他のブラウザでも良いのですが、できたらChromeで作業されることをおすすめします。

また、FigmaはWeb版しかない、と思われがちですが、デスクトップ版のアプリもあります。

左上のハンバーガーメニューから「Get Desktop App」をクリックすると、zipファイルがダウンロードされ、それを解凍すればネイティブアプリでもほぼWeb版と同じことができます。

ただし、こちらのネイティブアプリはもちろん別のPCからはアクセスすることはできないので、ご注意ください。

Figmaにローカルのフォントを設定する

FigmaはWebベースのツールなので、そのままローカルのフォントをツール上で使用することができません。

Figmaをはじめる前に設定で、ローカルフォントを使えるようにしていきます。

左上のハンバーガーメニューから「Account Settings」を開きます。

「Fonts」部分の「Download Installer to enable local fonts」をクリックし、ダウンロードされた「FigmaInstaller.pkg」を開きます。

するとローカルフォントがFigma内でも使えるようになります。

CHECK!!

ローカルから使えるようになっているフォントは別PCからはアクセスできない可能性があるので、その辺りのリスクを避けたい方は後ほどご紹介するGoogle fontsを使用する事をオススメします。

基本の動作

それでは、左のサイドメニューの「Recent」から先ほどの画面に戻り、Figmaの基本の動作を確認していきます。

表示されているいずれかのプロジェクトを開いてください。
私は今回、「Sample File」というプロジェクトを開いて作業します。

ページ内で動く

まず、自分が操作したいところにいけるよう、Figmaのページ内で動く方法をご紹介します。

ショートカット:
– 「⌘」 + 「+」 (ズームイン)
– 「⌘」 + 「-」 (ズームアウト)
– スペース長押し + クリックアンドドラッグ (てのひらツール)
– 「z」長押し + クリック (ズームイン)
– 「z」+ 「option」長押し + クリック (ズームアウト)
– 「z」+ クリックアンドドラッグ (選択した範囲までズームイン)

上記、6つのショートカットが基本的な、ページ内移動、ズームのショートカットですので、一番使いやすいものを模索しながら慣れるまでページ内をくるくる移動してみてください。

掴みたいオブジェクトを掴む

FigmaではPhotoshopやSketchと同じように、全てのデザイン部品を「レイヤー」という単位で分けています。

また、「レイヤー」をいくつかまとめたもののことを「グループ」と呼びます。

普通にFigma内でデザイン上をクリックすると「グループ」の方が選択されます。

グループ内のレイヤーを掴みたい場合は、「⌘」+ クリックで中のレイヤーを掴みましょう。

画像のレイヤー、シェイプのレイヤー、テキストのレイヤーなど思い通りに自分のレイヤーが掴めるように練習してみてください。

何度もうまくいかない場合は、「ページ内で動く」部分でご紹介したショートカットを使いながら、自分の掴みたいレイヤーの近くまでズームして再度チャレンジすると良いかもしれません。

ある程度スムーズに掴めるようになったら、どれでも良いので、テキストレイヤーを掴んでください。

テキストレイヤーを掴むと、左のレイヤーパネルで「T」に似た文字がハイライトされるはずです。

テキストレイヤーがつかめていることが確認できたら、右にあるバーをご覧ください。こちらは「プロパティバー」といい、そのレイヤーのもつ様々な属性を変更することができます。そのレイヤーのオプションを変更することができる、と考えても良いでしょう。

例えば、テキストレイヤーであれば、そのテキストのフォントや大きさ、行間などを変更できます。

今回は、文字のフォントを変更してみましょう。
フォントを変更する際に、1つ注意点なのですが、「TEXT」部分の右側にある「・・・」をクリックしてください。

こちらをクリックすると、「Advanced Type」という書式の詳細設定をすることができます。

こちらを開いていただいたら、一番下の「Show Google web fonts」というところにチェックが入っているのを確認してください。

こちらにチェックを入れることによりGoogleのWebフォントが使用できるようになります。

また、もう一点注意するべき点としては、フォントが英文フォントになっているときは日本語をタイプしても表示されません。いくら日本語を入力しても文字が出てこず日本語ユーザーがFigmaを使用する際に混乱する大きな原因になっています。フォントを和文フォントに変更すれば日本語はきちんと表示されるので日本語を打つ際はフォントの変更を忘れないようにしてください。

まとめ

以上、今回はFigmaの基本についてご紹介しました。

Figmaはデザイナーだけでなく、エンジニア、ディレクター、マーケターの方にも使っていただける非常に便利なデザインツールです。

ベーグリーでは【これからはじめるFigma】という名前でFigmaの基本操作やさらに奥深い機能のご紹介までしていきますのでぜひ皆さんの学習に役立ててください。

Figmaのお仕事に関するご相談

Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

17

2

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP