🎨 デザインコミュニティ

figma2cocos

ユーザーが指定したCSSスタイル（width、height、left、top）を基に、FigmaのデザインをCocos向けに変換するSkill。

📜 元の英語説明(参考)

在用户提供CSS样式且包含 width / height / left / top 4个属性时使用figma2cocos技能

🇯🇵 日本人クリエイター向け解説

一言でいうと

ユーザーが指定したCSSスタイル（width、height、left、top）を基に、FigmaのデザインをCocos向けに変換するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] figma2cocos

Figmaでのデザイン解像度は幅1080、高さ2340です。 Figmaでの座標はすべて左上を0,0としています。 Cocosでは画面の中心を0,0としています。

例を挙げます。ユーザーがCSSを入力しますが、これはFigmaの特定のノードのプロパティです。

width: 68;
height: 68;
top: 438px;
left: 968px;

このノードのCocosでの計算は以下のようになります。 x = left - 1080/2 + 68/2 y = 2340/2 - top - 68/2

計算を行います。 x = 968 - 1080/2 + 68/2 = 968 - 540 + 34 = 462 y = 2340/2 - 438 - 68/2 = 1170 - 438 - 34 = 698
結果を再計算して確認します。
計算されたxとyの値をユーザーに返します。
font-sizeプロパティが含まれている場合、ユーザーに「フォントサイズはxxです」と追加して返します。

注意：その他のプロパティは無視してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

figma中设计分辨率是w1080 h2340 figma中坐标都是以左上角为0,0 cocos中是以屏幕中心为0,0

一个例子用户输入css 其实是某个figma节点的属性 width: 68; height: 68; top: 438px; left: 968px;

这个节点在cocos中的计算是 x = left - 1080/2 + 68/2 y = 2340/2 - top - 68/2

1.进行计算 x = 968 - 1080/2 + 68/2 = 968 - 540 + 34 = 462 y = 2340/2 - 438 - 68/2 = 1170 - 438 - 34 = 698

2.再次重算核对结果

3.给用户返回计算出的x和y的值

4.如果包含 font-size 属性,给用户返回加上字体大小是xx

注意：其余属性忽视