2018年5月10日

デザイン

【Figma】Figma Stylesのベータ版サインアップ開始!!

目次

  1. はじめに
  2. Figma Stylesとは
  3. サインアップ方法
  4. まとめ

はじめに

今日、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: テキストスタイルの設定

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

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

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

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

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


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

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

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

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

サインアップ方法

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

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

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

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

まとめ

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

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

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

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