はじめに

6月22日にFigma3.0のアップデートが発表されました。
本アップデートに関して、Figmaが公式のブログで変更内容をまとめてくれています。

Figma 3.0 (!) | Styles, prototyping++ and design at scale

今回はこちらのブログより、本アップデートの主な機能変更についてまとめてご紹介します。

Figma 3.0 (!) より

Figma3.0の変更内容

今回のアップデートでは主に3つ大きな機能変更がされました。

2018年6月のFigma3.0アップデートで変更された機能：

それぞれの詳細についてご紹介します。

プロトタイピング

1. デバイスフレーム

iPhone, AndroidやApple Watchなどのデバイスフレームを追加。
それぞれのモデルの色や背景の色も変更可能。

Figma 3.0 (!) より

2. 固定オブジェクト

今まで、Figmaではヘッダーやフッターなどのオブジェクトを固定することができなかったのですが、今回のアップデートでステータスバーやボタンなどオブジェクトを「constraints」を使って固定することが可能になりました。

Figma 3.0 (!) より

3. スクロールエリア

Figmaプロトタイプのスクロールエリアが改善されました。
すでにスクロールできるコンテナーの中にさらにスクロールできるコンテナーを入れることができます。
これにより、横のスライドショーなどができるようになりました。
また、全方向スクロールも可能なので地図上をスクロールすることも可能です。

Figma 3.0 (!) より

4. Transitions

スライド、プッシュ、ディゾルブ（フェードアウト）のエフェクトが追加されました。

Figma Styles

以前の記事でもご紹介したFigma Stylesが正式に発表されました。

また、簡単にStylesに慣れるためのMaterial design UI kitがあるので、どこから始めらたらわからない方はそちらを使うと良いでしょう。

Figma Stylesはテキスト、塗り、レイアウトグリッド、エフェクト、ボーダーのスタイルを別々に設定できるものです。

Figma 3.0 (!) より

おおもとのスタイルを修正するだけで、そのスタイルを使った場所すべてに反映が修正されます。
同じスタイルを使っているチームメートはその変更を自分のデザインにも反映するか選ぶことができます。

また、Figmaではテキストボックスの中にスタイルを反映されたいテキストを選ぶと同じテキストに複数のスタイルを追加することができます。

Stylesには使い道が色々とあり、例えばレイアウトのグリッドなどをスタイルとして保存することもできます。

Organization プラン

最後にFigmaの新しいOrganizationプランでは、大規模なデザインをする際に便利な機能が追加されました。

1. 企業規模のデザインシステム – Organization プランではデザイン単位ではなく、企業規模のデザインシステムを作ることができます。その中の個々のグループではチームライブラリを使うこともできるので、使い分けることが可能です。

2. セキュリティ – ログイン時にSAML, Google SSO や２段階認証などをつけ、セキュリティ強化ができるほか、Figmaにメンバーシップを持っていない「guest」を呼ぶことができます。

3. 管理者権限 – 管理者のユーザーは上記２つのセキュリティを管理することができます。また、Figmaが使用された際のログやデータを書き出すこともできます。5

Figma 3.0 (!) より

まとめ

以上、今回はFigma3.0アップデートの変更点をご紹介しました。

今回のアップデートでは主に3つの機能追加/改善がされていて特にFigma Stylesやプロトタイプなどは便利そうですね。

さらに詳しく本アップデートについて知りたい方はFigmaの公式ブログ、もしくはSpectrumをご覧ください。

Figma公式ブログ:
Figma 3.0 (!) | Styles, prototyping++ and design at scale

Figma Spectrum:
Figma 3.0 announced!!!