eonist

Figma MCP Clients on GitHub

Several open-source projects on GitHub implement the Model Context Protocol (MCP) for integrating Figma with AI assistants or other tools. These MCP "clients" (and servers) allow applications like Claude or Cursor to access, manipulate, and automate Figma files. Here is a curated list of notable Figma MCP clients and related servers available on GitHub:

Notable Figma MCP Clients and Servers

Project Name	Description	Integration Target	Key Features
GLips/Figma-Context-MCP	MCP server to provide Figma access for Cursor and other AI-powered coding tools	Cursor, general MCP clients	Gives AI tools access to Figma files via MCP[1]
arinspunk/claude-talk-to-figma-mcp	MCP plugin for Claude Desktop to interact with Figma	Claude Desktop	Manipulate Figma objects, advanced text/font control, bidirectional communication, remote components[2]

eonist

Best Practice Guidelines for Prompt Markdown Instructions (.md Files)

When creating Markdown (.md) files to standardize prompt instructions or best practices, clarity, consistency, and structure are paramount. Below is a comprehensive guideline on how to structure these files and what to do-and avoid-when authoring them.

---

Key Principles

• Clarity: Use Markdown to make prompts and instructions easy to read, both for humans and AI models[6][8].
• Consistency: Stick to a single Markdown flavor (e.g., CommonMark, GitHub Flavored Markdown) throughout your project[5].

eonist

Device Specifications for Figma Frames

Key specifications needed to create Figma frame, including screen dimensions, safe areas, and essential design considerations:

iPhone 16 Pro Max

Screen pixel size:

• Native resolution: 2868 × 1320px (portrait)
• Viewport (CSS pixels): 956 × 440px

eonist

Comprehensive Guide to Figma Auto Layout: From Basics to Advanced Implementation

Before diving into the detailed points, here's a summary of the key insights: Figma's Auto Layout is a powerful feature that transforms static designs into responsive, adaptable layouts. This guide explores ten critical aspects of Auto Layout, covering everything from basic setups and nested structures to advanced techniques like absolute positioning and mixed layout strategies. You'll learn how to build responsive components, customize padding and spacing, and implement real-world UI elements that automatically adjust to content changes.

Basic Auto Layout Fundamentals

Auto Layout in Figma transforms static designs into dynamic, responsive layouts that automatically adjust to content changes. This fundamental feature serves as the foundation for creating flexible and maintainable user interfaces.

Auto Layout works by applying a set of rules to frames that determine how child elements behave when content changes. These ru

eonist

Figma Project Structure Best Practices

File Organization

Team and Project Structure

• Organize by departments as teams (design, marketing, development)[1][4]
• Create projects within teams based on one of these approaches:
  • Product surfaces
  • Features or production states
  • Design process stages[1]

eonist

Apple HIG: Implementing Layout & Spacing in Figma

Core Principles in Figma Implementation

Setting Up Clarity & Hierarchy

• Create Figma Libraries for component hierarchy levels (primary, secondary, tertiary)
• Use Auto Layout Weight Properties to establish visual hierarchy through proportional sizing
• Apply Figma's Layout Grids with 8pt increments to create consistent negative space
• Setup Z-Pattern Frames using Figma's alignment tools for natural reading flows
• Configure Interactive Components with clear states hierarchy (default, hover, pressed)

eonist

Apple Human Interface Typography Guide (Figma-Centric Edition)

Typography Foundations in Figma

System Font Family Usage

Use native system fonts for platform fidelity:

• SF Pro: Available natively on macOS. In Figma, use “SF Pro” (manually imported if not pre-installed).
  • SF Pro Text (≤19pt): Use for body text. Add tracking manually to match Apple’s spec (e.g., 17pt = -0.43px).
  • SF Pro Display (≥20pt): Ideal for headers. Adjust letter spacing accordingly (e.g., 28pt = -0.8px).
• SF Pro Rounded: For friendly UI. Match the weight and size of SF Pro Text/Display styles.

eonist

Apple Human Interface Guidelines: Color Implementation in Figma

Setting Up Your Figma Color System

Creating Apple System Color Libraries

• Color Styles Organization: Create a dedicated Figma library named "Apple HIG Colors" with hierarchical naming like System/Blue/100% and System/Blue/Dark Mode[1][8].
• Semantic Color Variables: Establish color variables in Figma for all semantic colors (label, secondaryLabel, systemBackground, etc.) with both light and dark mode variants[7][8].
• Variable Collections: Use Figma's variable collections to toggle between light and dark mode palettes with a single switch during design reviews[6][8].
• Plugin Integration: Install "Apple Design Resources" plugin in Figma to access official Apple color values and ensure accuracy in your designs[8].

eonist

• Visual Design: Provides guidance on layout, color, typography, iconography, and use of imagery to create visually appealing and accessible interfaces.

Here's a structured breakdown of Apple's HIG Visual Design guidelines based on current documentation and best practices:

---

Core Principles

• Clarity: Prioritize legibility and intuitive visual hierarchy[^HIG][4].
• Deference: Let content dominate, using subtle UI elements (e.g., translucency) to avoid distraction[4][5].
• Depth: Create spatial relationships with layers, shadows, and motion[4][^HIG].

eonist

• Navigation: Explains various navigation patterns (e.g., hierarchical, flat, content-driven) and when to use standard navigation components to ensure familiarity and ease of use

Here's a focused breakdown of Apple's HIG navigation guidelines, synthesized from the latest documentation:

---

Core Navigation Principles

• Clarity: Navigation should feel intuitive, requiring minimal user effort to understand[^HIG][6].
• Consistency: Use standard components (e.g., tab bars) to match user expectations[4][7].
• Hierarchy: Reflect content relationships through logical flow (e.g., top-level → detail views)[7].