Webデザイナーさん朗報！　「Figma」、日本法人設立へ

先日、ブラウザ上でWebデザインできるコラボレーションツール「Figma」を運営する米Figmaが、日本法人を設立したと発表しました。
今後数カ月をめどに日本語版をリリース予定とのことです。

「Figma」と言えば、デザイナー御用達のデザインプラットフォームで、ブラウザ上でデザインの設計・構築・共有などができる人気ツールです。
2012年にアメリカで設立されました。
アメリカ、イギリスに続き、日本が3拠点目となります。
直近1年間で登録ユーザー数が約２倍に拡大したことと、デザイナーコミュニティが活発なことなどが進出の決め手となったようです。

私自身、仕事で繋がりのあるIT関連の方からオススメされ、何度か使用したことがあります。
今回はこの「Figma」の使い方と、メリットとデメリットをご紹介していきます。

Figmaを使うまえに

Figmaを利用するにはまず、「登録」が必要です。
まずは登録方法を解説していきます。

①「Sign up」をクリック

②Googleアカウントの使用orメールアドレス＆パスワードの入力を選択

私はGoogleアカウントを使用せず、メールアドレスとパスワードを入力しました。

そうすると、

「名前の入力」と「職業」を質問されるので入力と選択します。
今回私は職業を「other（その他）」と選択したため、

「どのように使いますか？」という質問も出てきましたので、「For personal use（個人用）」を選択しました。

最後の「メーリングリストに同意しますか？」は選択してもしなくてもよさそうです。
これで登録は完了しました。

基本の操作方法

登録が完了したら、Figmaを早速使ってみましょう。

画面上部にある「New Design File」より、新規デザインを作成します。

そうすると、下の画像のようなものが表示されます。
何がなにやら分かりづらいですね。

「フレーム設定」から順番に行ってみます。

フレーム設定

左上のツールバーからフレームの横の下矢印をクリックし、「Frame」を選択します。

そうすると、画面右側にフレームサイズを選択できる項目が表示されます。

私は今回、「Desktop（1440×1024）」を選択しました。

他にも、iPhoneやタブレットなども選択できるようになっています。
フレームのサイズは後から自由にサイズ指定することもできるので、随時変更可能です。

ツールバーを使おう

何がどの機能なのか分からないまま操作を行うより、
どんなツールバーがあるのか知っておくと、より操作が行いやすいです。

簡単に、ツールバーを解説していきます。
各ツールの横に表示された下矢印をクリックすると、隠れていた他のツールが表示されます。

Move 移動
Scale　拡大

Frame　フレーム
Slice　スライス

Rectangle　長方形
Line　直線
Arrow　矢印
Ellipse　楕円
Polygon　多角形
Star　星
Place image　画像配置

Pen　ペン
Pencil　鉛筆

文字の挿入は「Text」を選択

プロパティの確認方法

よく使用するプロパティについても解説します。

オブジェクトの配置、整列を行います。

横幅と縦幅の指定ができます。

文字フォント、文字サイズ、太字などの書体を設定できます。

色の設定ができます。

Figmaのメリット

Figmaのメリットで私が最初に実感したのは「動作が軽い」ことでした。

他のデザインツールを使用しているとき、動きが遅いと感じることが何度かありますが、こちらに関しては全くありませんでした。
動作が軽いので、作業効率がUPしたように感じました。ストレスも軽減です。

他には、
●URL一つで簡単にデータ共有できる
●「共同編集機能」でリアルタイム編集が可能
●ブラウザ版とアプリ版がある
などがあげられます。

Figmaのデメリット

こちらに関しては、「日本語非対応」であることが私か感じる一番のデメリットでしたが、日本法人が設立されるということなので、日本語対応になっていくのでは？と予想されます。
そうなると嬉しいです。

他には、
●画像の細かい加工が難しい（できない？）
●スマホやタブレットからの操作はしづらい
などが挙げられます。