とても長い、フィグマ。すべてに感謝します。 |ジョン・ダイエロ| 2025年5月

「UIデザイン」ツールを落とすことに関するあなたの将来の自己からの手紙…👋ねえ、これはあなたの将来の自己です。私はそれが奇妙であることを知っていますが、私はあなたに時間内にメモを送りたいと思いました。どうやってやったのか聞かないで…「複雑だ」と言ってみましょう。今、私はあなたが怖いことを知っています。気持ちを覚えています。しかし、将来ここですべては大丈夫です。実際、それは実際にはかなり驚くべきことです。説明させてください。今朝、私はfigmaを開くことなくエンタープライズダッシュボード全体を設計しました（いいえ、スケッチ、フォトショップ、イラストレーター、コレルドロー、フリーハンド、またはそのような他のツールを使用しませんでした）。紙のコアフローをスケッチし、iPadに描いた画面をレイアウトし、手書きのメモで注釈を付けました。ペンツール、カーソル、または「挿入」ツールと格闘することなく、私の考えを共有可能な形にすばやく取り出すのはとても楽しかったです。時々私はそれを当たり前だと思っていますが、それがどれほど素晴らしいかを教えてください。コアのアイデアをスケッチしたら、それらを生成的なAIツールに落としました。数秒以内に、私の手描きのフローとページレイアウトは、設計システムを使用して、クリーンでアクセス可能な（はい、品質のアクセシビリティ）、生産対応のコードになりました。昼食までに、それはテスト環境にあり、私は開発者と協力してデータをバックエンドに接続していました。マーケティングの誇大広告のように聞こえますが、そうではありません。今は普通です。そして、あなたの仕事がどれほど簡単で、よりインパクトのあるものになるかを見ると、なぜ私たちはそれらのfigmaファイルにピクセルを汗をかくのに多くの時間を費やしたことがあるのだろうと思うでしょう。そして、最良の部分は、私の時間と注意がビジネスとユーザーの間の問題解決に焦点を合わせていることであり、マウスで時間を費やして完璧な高忠実度のプロトタイプを作成することです。正直なところ、私は今私の仕事がもっと大好きです。信じられないことはわかっています。私はあなたが懐疑的であることを知っています（私がほんの数年前にそこにいたことを覚えておいてください）。なぜ私はあなたにこれを言っているのですか？ AIに寄りかかると、私よりも速くそこに着くことができるからです。トラブルを救いたいです。それはあなたに取って代わるものではありません...それはあなたのエンジンにとって100ショットの亜硝酸のようなものになるでしょう。説明させてください…私たちはフィグマが大好きでした。私たちのツールが孤立していると感じた時に、それは私たちに自由、スピード、コラボレーションを与えてくれました。しかし、途中のどこかで、静かに私たちの焦点をハイジャックしました。Figmaは、レイアウトを以前に来たものよりも簡単になりました（スケッチ、Photoshopなど）。しかし、途中のどこかで、UIレイアウトがショーになりました。すべての設計タスクがUIタスクになりました。私たちの価値は、基礎となるソリューションをどれだけうまく形作ったかではなく、開発できる洗練された画面の数によって測定され始めました。そこで、私たちは忠実なモックアップを作成しました。すべての間隔のニュアンスを赤字化しました。ボタンの状態とメニューアニメーションを介して大騒ぎしました。そして…そのすべてのケアと精度の後…開発者はそれをゼロから再構築しなければなりませんでした…私たちが作成したコード、コンポーネント、および彼らの世界で意味のあるロジックに作成したリバースエンジニアリング。私たちは製品を生産していませんでした。製品のシミュレーションを作成していました。非常に詳細なシミュレーションは、非常に時間がかかりました。問題は必ずしも忠実度そのものではありませんでした。問題は、忠実度が2回作成されたことでした。理解とテストのために一度は、往復性のある製品のためにもう一度。なんて無駄だ！未来は「AI」から始まりませんでした。それは私たちの素材を整理することから始まりました。最も注目すべきは、成熟した設計システムです。私たちの設計システム 剛性のあるコンポーネントのセットであることを停止しました 代わりにシステムインフラストラクチャになりました。トークン、基礎要素、アセンブリコンポーネント、パターン、およびテンプレートは、構築するオプションの完全なスイートになりました。システムは、物事がどのように見えるかだけではなく、構築するための堅牢なシステム素材のセットでした。ナプキンのスケッチは、ワイルドなアイデア以上のものになりました。構築するための青写真になりました。いくつかの適切に配置された注釈により、まともなスケッチまたはワイヤーフレームは、テストと評価できる詳細なUIにすばやく変換するために必要なページ構造、相互作用、コンテンツを定義できます。アイデアからコンクリートエクスペリエンスの定義への動きは、はるかに高速でした。私たちはまだそれを知りませんでしたが、これがすべてを変えたものです。成熟した設計システムの層新しいアイデアを得るたびに、カラーピッカーとシェイプツールからゼロから始める代わりに、セマンティックトークン、要素、コンポーネント、パターンを活用して、共通のパターン言語を構築していました。設計システムは、私たちがプロセスの最後に翻訳しなければならなかったものだけでなく、私たちが考え、協力した材料になりました。強力な設計システムが加速器になりました。そのため、標準的なサポートとして、深いドキュメント、オープンファンデーション、専用コンポーネント、アクセシビリティなど、成熟度に投資し続けています。製品エクスペリエンスを構築するための強力なエコシステムをキュレーションし続けました。この基盤がなければ、次の飛躍は不可能です。私たちは知りませんでしたが、これが導入されたときにAIの力を解き放つための鍵になりました。UizardやUXパイロットのようなツールが市場に出たとき、ほとんどの人はそれらをあまり印象的ではありませんでした。しかし、彼らが最終的に彼らの歩みを打ったとき、それは不正行為のように感じました。紙、タブレット、またはホワイトボードにいくつかの画面をスケッチし、いくつかの注釈を追加し、生成AIはいくつかの機能するUIオプションを解き放ちます。すぐに、これらのシステムはBuilder.ioやCursorなどの製品と合併しました。そして、驚くべき魔法が起こり始めました。生成されたUIレイアウトオプションのいずれかを選択できます。クリックすると、システムは、成熟した設計システムから直接クリーンでアクセス可能なコードを生成します。プロトタイプではありません。 UIモックアップではありません。本物の機能的なフロントエンド。ユーザビリティテストには夢が実現しました。彼らはまだバックエンドデータに接続されていませんでしたが、ユーザーが深く関与できる機能的なフロントエンドでした。設計プロンプトからフロントエンドを生成します最初は奇妙に感じました。開発者と一緒に慣れていたピクセルの口述を手放しているように感じました。しかし、それはすぐに明らかになりました：私たちが引き渡した仕事は より明確。もっと直接。あまり曖昧ではありません。私たちはもう単なるレンダリングを提供していませんでした。フロントエンドの最初の開発成果物を提供していました。コンポーネントとトークンを設計システムに挿入することを労力を費やすのではなく、ユーザーが直面した課題を満たすために、フロー、インタラクション、インターフェースの要件を定義する時間をより多く費やしていました。マージンを微調整する代わりに、私たちは価値を構築していました。アイデアが始まりでした。スケッチは最初の構造式を与えました。設計システムは通訳として機能しました。 AI Fillsは、フィニッシュラインを越えて実行しました。この将来、私の仕事はなくなっていません。それはただ違って見えます。あなたが好きではないことをするのに時間を費やすことを心配しているかもしれません。しかし、あなたがそれらの邪悪な問題を解決する方法を見つけようとしているデザイナーになりたいなら...ピクセルのプッシュを超えてやるべきことがたくさんあります。 （そして覚えておいてください、私/あなた/私たち？あなたはそれについて不平を言っていました。）私は電球の瞬間が大好きです！私の時間は、ソリューションの探索、マッピング、エッジケースの評価、他のパートナーとの協力、およびチームを調和させてユーザーとビジネスの成果を調和させることで、より深く問題を理解しています。デザイナーとしての私たちの将来の価値は、モックアップでももう測定されていません。私は…に到達します…複数の方向を探る時間が増えますストーリーテリングをガイドします相互作用とフローを検討してください経験の未来を計画し、提案します私はもはや「画面を作る」人ではありません。私は、素晴らしい体験を通して製品を形作るシステムを形作る人です。デザインは、生産のようではなく、…デザインのように感じられます。わかりましたが、今では問題の核心に。ここで宇宙の法律を破っていないことを願っていますが、私はあなたにロードマップを与えて、そこに速く到達することを望んでいます。この未来が出てきてあなたのところに来るのを待ってはいけません。それをつかんでください。方法は次のとおりです。1.成熟した設計システムを構築しますこれは重要なステップです。それがAIの可能性を解き放つ鍵でした。システムが設計ライブラリとコード化されたライブラリをしっかりと統合していることを確認してください。彼らはしっかりと編み物でなければなりません。そして、GPTモデルがシステムの要素をどうするかを知るために、それは十分に文書化されなければなりません。セマンティックトークン構造を定義する仕事に取り掛かります。共通のパターンとテンプレートを定義および自動化します。ええ、それはたくさんの仕事のように聞こえます…しかし、見返りはそれだけの価値があります。2。設計探査に投資します洗練されたUIへのジャンプを速すぎます。ラフを開始します。ホワイトボードを使用します。代替品をスケッチします。そして、あなたが通常より長くそこに住んでいます。それは、本当のブレークスルーの多くが起こる場所です。スクリーンレイアウトは、堅実な探索と批評の延長である必要があります。なぜこれが重要なのですか？ AIは定義されているものが得意だからです。それらの画期的なアイデアに苦労する傾向があります。3。強力なパートナーシップを開発します生成ツールは橋を構築できますが、製品のリーダー、エンジニア、デザイナーは、私たちが何に向かっているのかについて同意する必要があります。共有言語を作成します。範囲と要件について協力します。方向に合わせて調整します。あなたのデザインの方法を使って物語を語り、説得してください。コミュニケーションスキルを改善します。友達を作る。これらはあなたがより多くの時間を費やす人々です...だから彼らとの信頼を築くことは理にかなっています。4.小さく始めますが、安定しています海を沸騰させようとしないでください。そうしないと燃え尽きます。小さく始めます。低リスクの機能を取り、表記でスケッチします。 AIツールを使用して、レイアウトまたはフロントエンドコードを生成します。良い結果を得るためにAIツールを提供するものを把握するのに時間がかかります。少し苦労しますが、明確さを提供することを忘れないでください。あなたがそれを混乱させると、それは混乱を出力します。少なすぎると、暗闇の中でショットがかかります。たとえそれが完璧でなくても、あなたは違った仕事の方法を学びます。目標は自動化ではありません...それは加速です。それに取り組み続け、忍耐強く。あなたの投資は報われます。今、これは一晩で起こりませんでした。時間がかかりました。大まかなスタート、奇妙で破損した出力、厄介な移行がありました。しかし、私たちはそれを維持し、それはすべてを変えました。私はそれが奇妙であることを知っています...あなたの将来の自己からの手紙を読んでください。しかし、私はあなたに知ってほしい…私たちの役割はそれほど重要ではありません。それはなりました もっと 重要。今、あなたの心、あなたの創造性、そしてあなたのシステム思考は、モックアップの生産によって消費されていません。あなたはこれを手に入れました！私たちの世界は、スクリーンモックアップやレンダリングを中心に展開していません。無限のプロトタイプの配線に何時間も費やしていません。私たちは、デジタルエクスペリエンスを形作るためにスキルを構築するために何年も費やしました。私たちは、現実世界の実在の人々が成功するのを助けたいと思っています。今、私たちはそれらのスキルを使って再びそれをリードし、再び行うことができます...今、より創造性と思考を持っています。だからスケッチを続けてください。謙虚にとどまります。学習を続けてください。何よりも、前向きなままです。それはあなたに役立つでしょう。ここに着くまで待ちきれません。また近いうちにお会いしましょう、将来あなたPS - お気に入りのムーンパイのフレーバーを冷凍庫に入れてもらえますか？彼らは数年前に彼らを作るのをやめました…そして私は彼らが狂ったように恋しいです。ありがとう！ #とても長いフィグマすべてに感謝します #ジョンダイエロ #2025年5月