Figma2cocos
- 8 installs
- Updated August 4, 2026
- 958877748/skills
figma2cocos is a Claude Code skill that converts a Figma node's CSS width/height/left/top into Cocos Creator center-origin coordinates.
About
figma2cocos is a Claude Code skill that converts a Figma node's CSS position (width, height, left, top) into Cocos Creator coordinates. Figma uses a top-left origin while Cocos uses a screen-center origin, so it applies a fixed formula against a 1080x2340 design resolution and returns the computed x and y (plus font-size if present). A game developer uses it when porting Figma layout values into a Cocos scene.
- Converts Figma CSS width/height/left/top into Cocos Creator center-origin x/y coordinates
- Uses a fixed 1080x2340 design resolution and returns computed x and y
- Also reports font-size when the CSS includes it
Figma2cocos by the numbers
- 8 all-time installs (skills.sh)
- Ranked #200 of 247 Game Development skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
figma2cocos capabilities & compatibility
- Capabilities
- coordinate conversion · figma to cocos · layout translation
- Works with
- figma
- Use cases
- ui design · frontend
- Pricing
- Free
What figma2cocos says it does
figma中坐标都是以左上角为0,0 cocos中是以屏幕中心为0,0
在用户提供CSS样式且包含 width / height / left / top 4个属性时使用figma2cocos技能
npx skills add https://github.com/958877748/skills --skill figma2cocosAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 8 |
|---|---|
| Last updated | August 4, 2026 |
| Repository | 958877748/skills ↗ |
What it does
Convert Figma CSS position values into Cocos Creator center-origin x/y coordinates.
When should I use this skill?
The user provides CSS containing width, height, left, and top for a Figma node to place in Cocos.
What you get
Returns the Cocos x and y (and font-size when given) computed from the Figma CSS against a 1080x2340 design resolution.
By the numbers
- assumes a 1080x2340 Figma design resolution
Files
背景知识
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
注意：其余属性忽视
Related skills
Godot Gdscript PatternsGenerate production-grade GDScript following Godot best practices for scene management, save systems, and performance.13.2k38.5k
Game EngineInstantly bootstrap a tilt-controlled 2D maze game using Phaser and device orientation.11.9k37.5k
Msw GeneralAdd a versatile set of general-purpose AI coding capabilities directly into Cursor, Claude Code, and similar agents.4.5k33
Game DeveloperGenerate clean ECS architecture, component patterns, and performant game systems that Claude or Cursor can expand into full Unity or custom engines.4.5k10.9kMsw DefaultplayerInstantly load a reliable default AI coding agent profile with proven prompts and behaviors.4.5k33Msw ScriptingCreate reusable, programmable agent behaviors and custom scripting flows that integrate directly with Claude, Cursor and other coding agents.4.5k33