Figmaキャンバス上のコード
Figma Designのコードレイヤーを使えば、チームと並行して、コードを用いてさまざまな方向性を模索することができます。
Figmaキャンバス上のコードを共有
エージェントは、構築できる人や作成可能なものの範囲を広げてきました。しかし、その過程では、個別のチャットや連携の取れていないワークフロー、孤立した探索の中で、1人で作業を行うことがあまりにも多いのが現状です。
はじめ方は柔軟です。
Figma Designでは、ツールバーからコードレイヤーを追加したり、既存のフレームから作成したり、Figmaエージェントにコードレイヤーの生成を依頼したりできます。そこから、テンプレートから始めるか、作成したいものを説明します。また、既存のコードベースを取り込むことも可能です。GitHubリポジトリをインポートするか、ローカルフォルダを直接アップロードしてください。
Makeでコードを生成・編集し、それをコードレイヤーとしてキャンバスに取り込んで、チームと一緒に検討、比較、改良を行います。
Figma Designのコードレイヤーを使用すると、インタラクティブなコードがキャンバスの一部となり、チームが同じ場所でアイデアを探索し、反復し、形にすることが容易になります。
あらゆるバリエーションを試す
デザイナーは常にフレームを複製してさまざまなバリエーションを試しています。コードレイヤーも同じような仕組みで機能します。操作体験をキャンバス上で再現できるため、見た目の違いだけでなく、実際にどのような使い心地なのかを比較することができます。要素を移動、調整、サイズ変更すると、コードが即座に反応します。プロンプトを使用して反復作業を続けると、エージェントが元のバージョンを保存しながら新しいバージョンを生成します。コードレイヤーは共有ファイル内に存在するため、チームメンバーはすぐに作業に参加し、コメントを残したり、同じレイヤーに対してプロンプトしたりできます。
素材間を行き来する
コードレイヤーにより、ソフトウェアを直感的に探索できるようになります。デザインを抽出を選択すると、現在の状態を編集可能なFigmaレイヤーに戻し、コードを視覚的に理解しやすい形にすることができます。キャンバスに表示するもの(単一の画面、特定の状態、あるいはフロー全体など)は、あなた次第です。そこからワンクリックで、編集内容がコードレイヤーに反映されます。これにより、キャンバスとコードの間をスムーズに行き来しながら作業を進めることができます。
判断に基づいて洗練する
より具体的な変更が必要な場合は、コードエディターにアノテーションを付けてエージェントに希望の変更を依頼するか、コードをクリックして自分で編集することができます。満足のいく状態になったら、コードレイヤーに戻してリポジトリにプッシュし、最終的な変更がソースに反映されるようにします。これで、チーム全員が更新内容を確認できるようになります。
Figma Designのコードレイヤー機能により、キャンバスはデザインとコードが共に進化する共有スペースとなります。キャンバスでは、さまざまなアイデアを試したり、比較検討したりしながら、実装すべき最適なアイデアを見出すことができます。
コードレイヤーは、今後数週間にわたってクローズドベータ版として展開されます。早期アクセスをリクエストするには、こちらからサインアップしてください。Configで発表した機能のまとめや、使い方の詳細については、ヘルプセンターをご覧ください。Figmaに関するすべてのことについての答えとインスピレーションをFigma Learnで見つけてください。
FigmaのCEO兼共同創設者であるDylan FieldによるConfigのまとめをお読みください。
