はじめに

今日、Figma Stylesのプライベートベータ版が発表されました。
Figma Styles beta: A new way to apply text and layer attributes

今日は新しく発表されたこのFigma Stylesとは一体どういったものなのか、どういったことができるのかご紹介します。

最後に、プライベートベータ版にサインアップする方法もご紹介しますので、ご興味のある方はぜひ試して見ください。

Figma Styles beta: A new way to apply text and layer attributesより

ちなみに、ベーグリーでは初心者のための「これからはじめるFigma」記事もあります！
こちらで読むことができるので、見逃した方はこちらからどうぞ。

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

Figma Stylesとは

では、今回話題を読んでいるFigma Stylesとは一体どんなものなのか。

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

また、これらのスタイルはチームライブラリなどでもアクセスできるようになっており、スタイルに変更があった場合はチーム間で変更が共有できるようになっています。また、変更があった場合は通知も来ます。

どんな問題を解決するの？

なかなか良さそうなFigma Stylesですが、実際にどのような問題を解決してくれるのか、Figmaがブログで具体的に出している例をご紹介します。

問題1: テキストスタイルの設定

現状のテキストスタイルは、テキストの大きさや書式、色、そして水平方向の文字位置（左寄せ/右寄せなど）を組み合わせたもので構成されています。

そのため、いくつかの色とテキストの大きさを組み合わせただけでも、非常に多くのテキストスタイルを作る必要があります。

例えば、３つの色と３つのテキストフォーマットを使用したい場合は９つのスタイルが必要になります。その状況で、もしブランドカラーに変更があった場合は、それぞれのスタイルの色をマニュアルで変更しないといけません。

今回のFigma Stylesが正式に発表されれば、テキストの大きさや書式、色、そして水平方向の文字位置を別々のスタイルとして保存することができるので、もし色に変更があった場合は元の塗りの色に変更を加えるだけで、全てのテキストにその色が反映されるようになります。

問題2: テキストフィールド内でスタイルを使う

Figma Styles beta: A new way to apply text and layer attributesより

ほとんどのデザインツールでは、１つのテキストフィールドにつき１つのスタイルしか持つことができません。

例えば、テキストフィールドの中の一部をリンクとして設定しようとすると、その元のテキストフィールドにかかっていたテキストスタイルと新しくリンクとして設定したスタイルの間で齟齬が出ます。

Figmaでは、テキストフィールドの中の一部のテキストに別のスタイルを当てることが出来ます。つまり、サブの見出しやリンクなどを設定しやすいのです。また、サブの見出しやリンクのスタイルに変更があった際も、きちんとその変更が反映されます。

サインアップ方法

以上、Figma Stylesでできることのご紹介でした。

デザインをする上でかなり悩まされていたポイントが解消されるようで、個人的にも触ってみるのが非常に楽しみです。

実際にこちらの機能を試したい方は、現在プライベートベータのサインアップ期間中なのでサインアップすると良いでしょう。

こちらのフォームから申し込みができるので、気になる方はどうぞ。

まとめ

以上、今日はFigma Stylesのプライベートベータがどういったものなのか、どういったことができるのかご紹介しました。

かなりテキストスタイルが使いやすくなりそうで、とても楽しみな機能なのでぜひみなさんもプライベートベータ版にサインアップして使ってみてください！