はじめに
最近、気になっていた「Locofy」（ロコファイ）。
YouTubeの解説動画などで概要は知っていたものの、実際にツールを回したことはありませんでした。デモのワークショップ（WS）が開催されているということで、600トークン欲しさに参加してみました。
2025/02/22現在は日曜日以外ほぼ毎日、1日に1〜2セッションのWSが開催
ちなみに、英語は「頑張れば何を言っているかはわかるけど、話す・書くとなるとまったくダメ」なレベル。
ただ、Figmaは業務で1年ほど触っていて、「中級者よりの初心者」といったところ。そんな状態でのLocofyデモWSの体験を、ざっくりまとめていきます。
Locofyの概要
まず、「Locofyって何？」という話ですが、ざっくり言うと「FigmaやAdobe XDのデザインをコード化してくれるツール」です。デザインからのコード変換を爆速で行い、React（Next.js）やVueなどのフロントエンド技術と組み合わせて開発できるのが特徴。
デモWSの流れ
まず、リスニングが大変
WSは英語で進行。しかもインド系の英語だったため、かなりリスニングに苦戦しました。個人的には特に「background」の発音が独特で、一瞬混乱してわからなかったり……。
環境と進行
- カメラ・マイクはオフ
- チャットで質問OK
- 最初に「音声が聞こえているか」確認される
- 参加者は自分を含め5人くらい？
- 使用ツールはMeetやTeamsではなく、Locofy特有の会議ツール
ワークショップの内容
-
フルページのコード化
- どんなデザインがコード化しやすいか、しにくいかを解説
- 実際にFigmaのデザインをコード化しながら、コツを説明
-
パーツごとのコード化
- オートレイアウトやパディング設定の調整方法
- レスポンシブ対応をどうするかの詳細説明
- Figmaの右パネルを細かく設定する重要性
- 「最小値」を決めて適切なレスポンシブデザインを実現する方法
具体的な実践例
- ヘッダー
- Airbnb風のカード（上に画像、下にテキスト）
- 宿泊検索フォーム（バックグラウンドレイヤーを活用）
デモではReactとMaterial UIを使ってコード化し、完成したコードは「Locofy Build」に保存されました。
特に印象的だったのは、画面幅に応じてUIの要素が変わる仕組み。デモを受ける前は画面幅が変わっても中身の要素は同じのままでしか対応できないと思っていましたが、実際に見てみると適切なレスポンシブ対応ができていたりと、使いこなせば本格的なフロントエンド開発ができそうな雰囲気でした。
WSの最後には……
- 質疑応答タイムあり
- 左下に600トークン取得ボタンが出現（これが目的
）
感想とコメント
正直なところ、目新しい内容はほぼなし。YouTubeや公式ドキュメントで見た内容を、そのままライブデモで実践しているだけといった感じでした。
また、デモで使用するデザインも「ホテル予約サイト風」のよく見るもの。とはいえ、「実際に操作しながら学べる」という点では価値がありました。
一番嬉しかったのは、600トークンをちゃんともらえたこと！ これで、ようやくLocofyを試せるだけのトークンが手に入りました。おそらくフルページのコードを1回おこすだけでトークンをほぼ消費しそうですが、早く試してみたい気持ちでいっぱいです。
今後、Locofyを活用してどれだけ効率化できるか、しばらく検証してみようと思います！