transjt向けのデザイン
transjtがきれいで編集しやすいCMSブロックに変換できるように、Figmaファイルを準備する方法です。
ページではなくコンポーネントをデザイン
ページ全体ではなく、ヒーロー、機能グリッド、フッターなどのコンポーネントを1つずつ取り込みます。ページ全体を取り込むと1つのブロックになり、セクションには分割されません。個別のコンポーネントは、HubSpotではそれぞれ別のモジュールに、WordPressでは別のブロックになり、チームはそれらを組み合わせてどんなページでも作れます。
オートレイアウトを使う
transjtは、Figmaのオートレイアウトと制約を読み取り、レスポンシブなCSS（FlexboxとGrid）に変換します。オートレイアウトがきれいに組まれているほど、タブレットやモバイルでの仕上がりが良くなります。モバイル用とタブレット用のレイアウトを別にデザインする必要はありません。
レイヤーをグループ化
カードの画像、タイトル、テキストなど、まとまりのある要素はグループにします。論理的で一貫した構造にしておくと、transjtが各パーツの役割を認識しやすくなり、きれいなコンポーネントとしてエクスポートできます。
AIへの指示を追加
やりたいことを、デザインの中で直接AIに伝えられます。コンポーネントのテキストフィールドに指示を書くと、AIがそれを反映します。
マルチステップフォーム
フォームのすべてのステップをデザインに入れ、「Step 1」「Step 2」のようにラベルを付けます。AIがそれらを1つのマルチステップフォームにまとめ、CMSに接続します。
ブログ
Figmaプラグインで、取り込む前に種類を選びます。
- Blog：ブログの一覧レイアウト用。
- Blog Detail：個別記事のレイアウト用。
transjtはこれらを、記事、一覧、タグ、ページネーションを備えた本物のブログテンプレートに変換します。
RelumeとUX Pilotのデザイン
RelumeやUX Pilotで作ったデザインも、同じ手順で使えます。Figmaに読み込んでから、transjtプラグインでコンポーネントを取り込みます。