Pattern Journey

デザインシステムはその基盤が完成されてからの運用が肝。新たなコンポーネントをパターンとしてシステムに組み込むのか、あるいは既存のコンポーネントで事足りるのものなのか、という判断を対話形式で実践するためのアイデア。

ドラッグ操作のアニメーション

ドラッグ操作をする際のアニメーションについて、数学を用いて最適な動きを追求した記事。アニメーションの原則の解説と、それを実現するいくつかの数式を用いた実装コードも掲載。

デザインシステムに選択の基準を設ける

UIコンポーネントが並ぶだけのカタログではなく、どのコンポーネントあるいはバリエーションを選択するのが良いか、なぜそれを選ぶのかを説明されているのが好ましい。記事ではボタンやチェックボックスなどのコントロールのUIを例に解説。

Digital Psychology

顧客体験の向上や、ユーザーと接するのに有効なアプローチ・表現を考えるのに役立ちそうな心理学の原則集。ケーススタディ、サンプルが多く、インスピレーションとして活用したい。

Framer X

プロトタイピングツールのFramerの後継となるFramer X。Sketchのようにインターフェースをつくるツールでありながら、Reactのコードを生成またコードに手を入れてインタラクション表現を同じツール内で実装できるらしい。プロトタイピングツールとして位置づけから、プロダクションレベルのものをつくることも可能になるかも。

現在ベータ版として招待されたユーザーが先行して使えるようになっているので、気になる人はチェックしよう。（現在順番待ち）
この招待リンクから登録してもらえると、私の順番が早くなるので、ぜひ 🙏

* * *

次回はたぶん9/6あたり。はやくFramer X使いたい。

Frontend Weekly for Designer Edition by Frontend Weekly
Cover Photo by Vlad Bagacian on Unsplash