skills.rest
double-coding-lab
double-coding-labOFFICIAL
Explore all skills by this author →
GitHub

pp-style

Defines naming and implementation rules for converting Figma layers into React or React Native code.

4|Updated Aug 4, 2026
Search Tags:#react#css#figma#naming conventions#react native#image export#design-to-code
One-click install
npx skills add https://github.com/double-coding-lab/PixelPrint --skill pp-style-double-coding-lab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pp-style
Source: https://github.com/double-coding-lab/PixelPrint/tree/main/templates/skills/pp-style
Command: npx skills add https://github.com/double-coding-lab/PixelPrint --skill pp-style-double-coding-lab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When converting Figma designs into code, inconsistent layer naming and ambiguous styling rules cause wrong image exports, missing backgrounds, incorrect colors, and broken layouts. This Skill provides a single lookup manual of naming prefixes and implementation rules so design-to-code output stays consistent and predictable. ## Core Features & Use Cases - Layer Prefix Semantics: Defines how prefixes like sub-, block-, img-, bg-, bgc-, btn-, scrollx-, scrolly-, fixed-, and x- map to code generation behavior, including multi-prefix priority ordering. - Image Export Rules: Specifies Figma REST API export with use_absolute_bounds, SVG vs PNG selection, kebab-case file naming, and a strict imageBaseUrl + assetsDir + filename URL formula. - Styling & Unit Rules: Covers bgc- CSS mapping (fills, strokes, cornerRadius, effects), fixed positioning from constraints, Alibaba PuHuiTi font handling, multi-layer TEXT fills resolution, and px/vw/rem unit conversion. - Use Case: A developer converting a Figma page to React + SCSS consults this manual to decide whether a gradient button layer should be exported as an image or expressed as CSS, and how to name the resulting component and asset files. ## Quick Start Ask the AI to look up the pp-style rules for handling a bg- prefixed layer with a gradient fill before generating the component code.

Frequently Asked Questions about pp-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma layers to React code with naming conventions?▼

Assign semantic prefixes to Figma layer names such as img- for images, bg- for background images, btn- for clickable areas, and sub- for layout blocks. The conversion rules then map each prefix to specific code output, like generating an img tag for img- layers or writing background-image CSS for bg- layers.

What is the difference between bg- and bgc- layer prefixes in Figma export?▼

bg- layers are exported as image files through the Figma REST API and applied as the parent element's background-image. bgc- layers are never exported; their fills, strokes, cornerRadius, and effects are read via the design context API and written directly as CSS properties on the parent element.

Does this approach support React Native and cross-platform frameworks?▼

Yes, the rules cover React with scss, less, css, tailwind, and inline styles, plus React Native with stylesheet, styled-components, and nativewind. Cross-platform setups like xtaro and taro are supported through adapter presets in the parent PixelPrint toolchain.

Why do exported Figma images include unwanted background or shadow bleed?▼

This happens when the use_absolute_bounds=true parameter is omitted from the Figma images API call, causing effects and parent backgrounds to render into the PNG. Always include that parameter unless the node is listed in preserveEffectIds.

How are multiple fill layers on Figma text nodes resolved to a single color?▼

When a TEXT node has multiple visible SOLID fills, the last fill in the array is used because Figma renders later fills on top. Fills marked invisible are skipped, and gradient fills use background-clip: text with transparent color on web targets.

When should a Figma layer be exported as SVG instead of PNG?▼

Vector layers such as icons and shapes without raster content should be exported as SVG for resolution independence. All other layers, including photographic content, are exported as PNG at 2x scale using the Figma REST API.

Related Skills

Explore More Software Engineering Skills→
stagewise-iostagewise-io
6.8k

figma

Accesses Figma designs via REST API and monitors real-time selections with Chrome DevTools Protocol.

Official
Advanced
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-react-native

Generate Jest snapshot tests for React Native components across iOS and Android.

Community
Advanced
NehaTanti-afkNehaTanti-afk

figma-analyze

Analyze Figma designs against Nexus conventions and token consistency.

Community
Advanced
vikingokftvikingokft

wp-plugin-hooks

Design and document custom WordPress action and filter hooks with stable APIs.

Official
Advanced