Figma3.0がリリース!プロトタイピングやスタイル機能が大幅にアップデートFigma3.0がリリース!プロトタイピングやスタイル機能が大幅にアップデート6月22日にFigma3.0のリリースが公開されました。XDと肩を並べるほど高いレベルを誇っています。3.0」という形で大幅なアップデートをリリースしました。プロトタイピング機能やスタイル機能など、Figmaがさらに使いやすくなるアップデートとなってます。3.0のアップデート内容についてご紹介したいと思います。組織やチームでの利用Figmaの存在がより大きくなったFigmaとはそもそもFigmaを知らない!という方のために、簡単にFigmaのご紹介をしておきましょう。XDと同レベルのクオリティを誇っています。ベーシックプランは無料で利用することが可能となっており、プロジェクト数やメンバー数、バージョン管理に制限があるもののデザイン作成においてはすべての機能を利用することが可能です。ブラウザで動作するため、MacでもWindowsでも使用することができ、Sketchファイルからデザインデータをインポートすることもできます。チームでの共同作業にぴったりのデザインツール「Figma」とはFigma(フィグマ)とは、ブラウザ上で作業することができるデザインツールです。3.0で追加された注目の機能は大きく分けて3つあります。組織やチームでの利用3つのアップデートですが、一つ一つの機能がとても優れており、Figmaがより優れたデザインツールとなりました。それぞれの機能について詳しく説明していきましょう!プロトタイピング機能の強化Figmaのプロトタイピング機能がさらに強化されました。普段Sketchを利用する方は多いと思いますが、Sketchのプロトタイピング機能についてはまだまだ課題も多く、細かい所まで手が届いていません。今回のFigmaのアップデートによって、プロトタイピング機能で行えることが幅広くなり、より実際のプロダクトに近い形のプロトタイプを作成することができるようになりました。異なるデバイスサイズでの表示https://blog.figma.com/figma-3-0-217d6c248f85様々なデバイスの画面サイズに合わせてプロトタイプを表示することが可能です。Watchの画面サイズに合わせてプロトタイプを表示することも可能です。固定オブジェクトhttps://blog.figma.com/figma-3-0-217d6c248f85例えばヘッダーやフッターなど、スクロールしても固定して表示しておきたい要素は欠かせませんね。2018年7月現在では、Sketchのプロトタイピング機能ではこの固定オブジェクトを扱うことはできませんが、Figmaなら固定オブジェクトをプロトタイプに取り入れることが可能です。scrolling」にチェックを入れるだけです。ヘッダー、フッター、フローティングボタンなどアプリデザインで欠かせない要素もこれでばっちりですね。3.0から、1つの画面の中に異なるスクロールエリアを設置することができるようになりました。Netflixのネイティブアプリなど、縦スクロールの画面の中に横スクロールの要素を組み合わせるようなデザインはよく見られますよね。Figmaでこれを使用するためには、スクロールさせたい要素を1つのフレーム(Frame)の中に入れるようにします。そのため、親フレームの中に子フレームを作るような形となります。子フレームを横にスクロールするようにしたければ、子フレームを選択した状態で右側のバーからPrototypeのタブを選択します。BEHAVIOR」という項目があるので、そこの設定を変更しましょう。Scrolling(縦横スクロール)」の3種類から選択することが可能です。トランジションhttps://blog.figma.com/figma-3-0-217d6c248f85画面間の遷移のアニメーションにdissolve、slide、pushの3種類が追加されました。微妙な動きの違いがUXに大きな影響を与えるので、こういった細かい機能の追加が、デザイナーにとって欠かせないツールになるための大きな役割を果たします。リアルタイム反映https://blog.figma.com/figma-3-0-217d6c248f85デザインに変更を加えた時に、リアルタイムでプロトタイプへ変更されるようになりました。紹介されている例では、PC用画面のデザインを変更しながら同時にスマホ用画面のデザインを確認している様子が紹介されています。Figma公式のヘルプページでプロトタイピング機能の使い方が詳しく紹介されています。参考にしてみてください。Centerスタイル機能https://blog.figma.com/figma-3-0-217d6c248f85カラーやテキストスタイルのプロパティを「スタイル」として管理できるようになりました。これにより、同様のデザインを複数の要素に適用することができるようになり、デザインを管理しやすくなるだけではなく、効率的にデザインを制作できるようになりました。スタイルを使用する場合は、右側にあるプロパティ編集パネルから4つの点のアイコンをクリックします。Color」と名付けた色を使用しておけば、その色を変更するだけでデザイン全体の色を一括で変更することができます。テキストやエフェクト、レイアウトグリッドなどをスタイルで管理することが可能なので、Figmaでデザインを制作する場合にはこのスタイル機能を上手く取り入れてみましょう。組織やチームでの利用https://blog.figma.com/figma-3-0-217d6c248f85企業のような組織や、チームでFigmaを使う人向けの機能が追加されました。ライブラリやアセットをチームで共有したり、権限の管理を行いやすくなったりと、ただデザインを作成するだけではなくてチームでFigmaを使用する場合により使いやすくなっています。セキュリティも強化されていて、Googleアカウントによるシングルサインオンや、二段階認証などを取り入れることによってより安全性が強化されています。Figmaの存在がより大きくなった現状ではUIデザインツールと言えば、Sketchの存在がまだまだ大きく、企業などでアプリやWebのデザインを行う場合にはSketchが使われている場合が多いです。Sketchが最も人気のUIデザインツールである大きな理由な理由の1つが、スタイルやオーバーライド、プロトタイピングなどの標準機能に加え、プラグインを使って様々な拡張が行えるということです。Figmaもプロトタイピング機能やスタイルなど、同等の機能を追加してきただけでなく、組織でのアカウント管理など実際の業務で使う場合に役立つ機能の強化を重ねてきています。XDなども競合に当たりますが、いずれも有料のツールであり、無料で利用できるFigmaが無視できない存在であることは間違いないでしょう。いずれにせよ、Figmaをまだ触ったことのない方はぜひ一度試してみてください。その完成度にきっと驚くはずです。チームでの共同作業にぴったりのデザインツール「Figma」とはFigma(フィグマ)とは、ブラウザ上で作業することができるデザインツールです。trends2017年アツい!注目のUIデザインツール徹底比較WebサイトやAndroid,iPhoneアプリなどを作る場合に欠かせない作業がUIデザインの作成です。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。