figma
Figma collaborative design tool. Use for UI/UX design.
Works with
--- name: figma description: Figma collaborative design tool. Use for UI/UX design. license: MIT --- # Figma Figma is the interface design tool. 2025 brings **Generative UI** (Text to Design) and **Dev Mode** enhancements for accurate CSS/SwiftUI generation. ## When to Use - **UI/UX Design**: Creating high-fidelity mocks. - **Prototyping**: Clickable user flows for user testing. - **Handoff**: Developers inspect CSS/variables directly. ## Core Concepts ### Auto Layout Flexbox for designers. Elements resize/reflow automatically. ### Components / Variants Reusable UI elements (Buttons) with states (Hover, Active). ### Dev Mode A dedicated view for engineers to grab variables, measurement, and code snippets without breaking the design. ## Best Practices (2025) **Do**: - **Use Variables**: Define colors/spacing as variables (Design Tokens). - **Use Auto Layout**: Always. It ensures the design can be implemented in CSS. - **Name Layers**: "Frame 1342" is helpful to no one. **Don't**: - **Don't detach instances**: Keep components linked to the library. ## References - [Figma Help](https://help.figma.com/)
More Design Systems skills
stitch-design-taste
leonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
figma
heygen-com/hyperframes
Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
image
coreyhaines31/marketingskills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Flux Kontext,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'ChatGPT Images,' 'Ideogram,' 'Gemini image,' 'Nano Banana,' 'Recraft,' 'Stable Diffusion,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
