2018年6月22日

デザイン

【Figma】Figma3.0アップデートの変更点まとめ

目次

  1. はじめに
  2. Figma3.0の変更内容
  3. プロトタイピング
  4. Styles
  5. Organizationプラン
  6. まとめ

はじめに

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

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

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


Figma 3.0 (!) より

Figma3.0の変更内容

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

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

  • プロトタイピング – デバイスフレームや、固定ヘッダー/フッター、スクロールエリアなどが追加/改善された
  • Styles – Stylesとチームライブラリを使用することでデザインシステムなどが作れるようになった
  • Organizationプランが導入された – デザインシステムの管理がしやすかったり、セキュリティがさらに厳重なOrganizationプランが導入された

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

プロトタイピング

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 や2段階認証などをつけ、セキュリティ強化ができるほか、Figmaにメンバーシップを持っていない「guest」を呼ぶことができます。

  3. 管理者権限 – 管理者のユーザーは上記2つのセキュリティを管理することができます。また、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!!!

0

0

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