今週話題になったデザインニュース

はじめに

Sketch49で衝撃のタイムライン機能が追加されて以降、FigmaやAnimaなどデザインツールに関係する発表やニュースもだんだん増えて来ました。

今日の記事では、Figma Platform や Sketch Timelineのようなデザインツールに関する最新情報はもちろん、そのほかにも話題になって新しいツールやサービスをまとめてご紹介します。

Timeline for Sketch

Timeline for Sketchとは

Launchpad, Auto Layout など様々なSketchのプラグインを出している、AnimaがついにTimeline for Sketchをリリースしました。

Timeline for Sketch公式サイト

Sketchには、PrincipleやFramer, Flinto, AtomicなどSketchファイルをインポートし、アニメーションを作れるようにする、というツールに加え、最近では animatemate、DiyaのようにSketch内でもアニメーションを作れるようにする、という動きが加速しており、Timeline for Sketchはその中でもanimaが作っている、ということから他のプラグインよりも注目を浴びています。

Timeline for Sketchでできること

Timeline for Sketchの特徴は4つです。

1. Sketch内でアニメーションが作れる
2. タイムラインとキーフレームを使って、 After Effects の Timelineや Keynote の magic-move に似たインターフェースで簡単にタイミングやイージングをカスタマイズしたアニメーションが作れる。
3. Webサイトやメール、バナーや広告などで使えるようにGIF、もしくはMP4形式で書き出しができる
4. 共有リンクを作って、作ったアニメーションを共有できる

特に、1. と 2.の組み合わせが今までにはなかったので、注目されていますね。

Timeline for Sketchを使って作られたアニメーションのショーケース

Timeline for Sketchの価格

Timeline for Sketchは無料でトライアルをすることができますが、基本は1年間USD79のライセンスを購入し、使うことができます。(1年間とは言っても、Sketchと同じでライフタイムのライセンス + 1年間のアップデートという形式のようです)

Timeline for Sketch のインストールはこちらのリンクから行っていただけます。こちらでAnimaのドキュメントページにも飛ぶことができので、インストールした後に使い方などを少し参考にしても良いかもしれません。

ただ、個人的には、このビデオが端的に必要なものを教えてくれるので、良いと思いました。

ライセンスがUSD79と安くないので、こちらのリンクから無料トライアルを受け、使えるか使えないのか、試していただくのが良さそうです。

Figma Platform

次に今週発表された、Figma Platformをご紹介します。

Figma Platformとは

Figma PlatformとはFigmaのWeb API や オープンJSONフォーマットを使い、アプリ、Webサイトや内部のツールにFigmaで作ったデザインをリアルタイムで反映させることができる機能です。

ちょっとイメージが付きづらい方もいらっしゃると思いますが、下記をご覧ください。

このようにFigma上のデザインを変更すると、様々なデバイス上でもデザインが変更されます。

また、公式サイトにはもう一つ、カレイドスコープのインタラクティブデモがあるので、興味がある方はぜひ触ってみてください。

公式サイトのインタラクティブデモ

Figma Platformってどういう仕組みで動いてるの？

Figma PlatformはFigma Web APIで動いています。
このAPIは３つのことができます。

1. デザインファイルをオープンJSONファイルとして読み取ることができる
2. デザインファイルに対するコメントを書いたり読んだりすることができる
3. デザインファイルをPNGやSVGなどのスタンダード画像形式にrenderすることができる

また、今後さらにいろんな機能が追加される予定なので、きになる方はぜひチェックしてみてください。
Introducing: Figma’s Platform

Figma Platformでできること

なるほど、確かにすごそうだけど、いまいちどういうところに活かせるのかピンとこない、という方も多いのではないでしょうか？

そこで、Figma Platformで実現できることをご紹介します。

• スタイルガイドジェネレーターを作る
• 複数のファイルから色やフォントに関する情報を取ってきて、スタイルガイドを構成する
• カスタムグリッド
• カンバスやグループを使って、カスタムグリッドを作成する
• Figma to React
• Figmaで作ったデザインファイルをReactに変換できる！日が来るかも…？

もし皆さんにも良いアイディアがあれば、spectrum上のFigmaのコミュニティで共有すると良いかもしれません。
Show and tell on Spectrum

また、ベーグリーでは、Figmaに興味があるけど、どこから始めたら分からない！という方向けにFigmaの勉強素材を用意していますので、よかったらご覧ください。

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

SlashPixels

ここからは今週話題に上がってきた新しいデザイン関係のサービスをご紹介します。

Slash Pixelsは「Google for Designers」を歌っていて、AIを使ったスマート検索エンジンで画像を検索したり、Dribbble, Behance, Pinterest, Cargo, Awwwards, Pttrns などのトップデザインサイトから良いデザインを取ってきてくれるものです。

例えば、「half-width website」と打つと、最近よくある２カラムのフル画面のデザインを探し出してきてくれます。

また、イメージに近い画像のリンクから、似たような画像を探してきてくれたりもします。

さらに、pinterestと似たような機能ですが、自分の好きなデザインのコレクションなどを作ることができます。

slashpixelsはまだ公開されていんませんが、現在はプレサインアップすることができるので、きになる方はこちらのリンクからどうぞ。

SlashPixels公式サイト

Eggradients

Eggradientsとは以前とても話題になった、WebGradientsに似ていますが、素敵なグラデーションを用意してくれているサイトです。

名前がEggradientsというだけあって、全てのグラデーションが卵型になっていて、非常に可愛いです。

また、CSSをそのままコピーすることができるので、コードへの繁栄もスムーズにできるようになっています。

Mobbin

Mobbinとはアプリのデザインギャラリーです。

「Apps」と「Patterns」という２つのタブがあり、「Apps」ではアプリ単位でデザインを探すことができます。「Shopping」や「Food & Drink」などアプリのカテゴリごとにデザインを絞ることができます。

また、「Patterns」タブでは機能ごとにモバイルのデザインをフィルターすることができます。

メインのページをいくつかしか載せていないギャラリーサイトに対し、Mobbinはアプリの数は少ないですが、機能やカテゴリごとのフィルタリングができるので、機能やカテゴリが決まっているアプリに対する調査をしたい時にはとても良いかもしれないです。

まとめ

以上、今日は今週話題のデザインニュースをいくつか取り上げてみました。

個人的には、Figma Platformに非常に可能性を感じますが、スケールが大きすぎて、どういうものに使えるのかイメージが湧かないので、いろんな動向を探ってみたいと思います。

他にでてきた新しいサービス、特にSlash Pixelsは本リリースがとても楽しみです。