Rork Max で useFigma フックを使ってデザインをコードに落とし込む方法
Rork MaxのuseFigmaフックを使って、FigmaデザインをReact Nativeコンポーネントに変換するワークフローを解説。Figma連携の設定方法から、デザイントークンの活用、実際の変換パターンまで紹介します。
Figma Make × Rork でアプリUIデザインをAI化するワークフロー
Stitchで要件整理とデザイン案の試作、Figma Makeで日本向けUIの仕上げ、Rorkでコード自動生成という3段構成のアプリUIデザインワークフローを解説します。色彩設計やタイポグラフィの決め方、Design.mdを介した連携方法まで手順で追えます。
Rork × Figma 統合 — デザインからアプリ自動生成の実践ワークフロー
2013年から個人で運用してきた壁紙・癒し・引き寄せ系アプリのリブランド経験を踏まえ、Figma × Rork で本番アプリコードを生成する際に効くデザイントークン命名、Auto Layout 階層、Variants 設計、アイコン正規化、Properties 設計の運用ルールを動くコードと実数値で記録します。
AIエージェント × モバイルアプリ開発 完全自動化ガイド
AGENTS.mdによるプロジェクト定義、Figma MCPのデザインパイプライン、ハーネスエンジニアリングを組み合わせ、モバイルアプリ開発のワークフローを自動化する実装ガイドです。AIエージェント時代の開発パラダイムを、具体的な設定ファイルとともに解説します。
アプリストア素材の完全戦略 — アイコン・スクリーンショット・プレビュー動画の作り方
App StoreとGoogle Playの公開に必要なアイコン・スクリーンショット・フィーチャーグラフィック・プレビュー動画の作り方を一つずつ整理します。FigmaやCanvaでの制作手順、A/Bテストによる効果検証、Rorkアプリでの素材管理までを具体例とともに解説します。
Figma × Stitch × Canva — アプリスクリーンショットのベストプラクティス徹底比較
FigmaとStitchとCanvaを同一アプリのストアスクリーンショット制作で比較しました。操作性、テンプレート数、カスタマイズ性、作業時間、出力品質を検証し、目的別のツール選択ガイドラインとASO最適化のコツ、Rorkアプリでの実際の選択例を紹介します。
Figma でアプリのストアスクリーンショットを作成する方法 — App Store / Google Play 対応
App StoreとGoogle Playのスクリーンショット仕様を踏まえ、Figmaでテンプレートを組んで効率よく制作する方法を説明します。デバイスモックアップの配置、タイポグラフィの工夫、エクスポート設定、多言語展開の進め方まで実例つきで紹介します。
Figma のカンプと Rork の生成画面がズレる — 原因は5つのプロパティに絞り込める
Figma のデザインを Rork に渡して生成した画面が、なぜか原案と違って見える。実機と Figma を数値で突き合わせると、ズレはほぼ決まった5つのプロパティに集約されます。Auto Layout の翻訳表と、トークンを添えて渡す実装まで。
Rork と Figma をつなぐ — デザインからプロトタイプまでの実務フロー
Figmaで作ったUIコンポーネントをRorkのプロトタイプへ落とし込む実務フローです。命名規則の揃え方、コンポーネントライブラリの構築、デザインシステムの維持、大量のコンポーネントを扱うときの注意点まで、デザインと実装の手戻りを減らす手順を解説します。