Figma | BestHub

Rare Earth Juejin Tech Community

Mar 28, 2025 · Artificial Intelligence

Understanding Model Context Protocol (MCP): Architecture, Usage, and Limitations

Model Context Protocol (MCP) is a standard client‑server protocol that enables AI models to access real‑time external data and tools, with detailed explanations of its architecture, practical setup steps, code snippets for Figma integration, and a discussion of current limitations and future prospects.

AI integrationClient-ServerFigma

0 likes · 12 min read

Understanding Model Context Protocol (MCP): Architecture, Usage, and Limitations

Rare Earth Juejin Tech Community

Mar 26, 2025 · Artificial Intelligence

Using Figma MCP with Cursor AI IDE: A Step-by-Step Guide

This tutorial explains how to set up and use the open‑source Figma MCP service with the Cursor AI IDE, covering API key creation, server configuration, command‑line startup, JSON setup, and a React ECharts example, plus troubleshooting tips for successful integration.

AI IDECursorECharts

0 likes · 6 min read

Using Figma MCP with Cursor AI IDE: A Step-by-Step Guide

Rare Earth Juejin Tech Community

Jul 30, 2024 · Frontend Development

Varlet Icon Builder: Fast Creation of Enterprise Icon Libraries with Vue and React Support

This article introduces the Varlet icon builder toolchain, which enables rapid creation of enterprise or open‑source icon libraries, supporting SVG to Vue 3, React, ESM/CJS modules, web fonts, automatic component import, Figma integration, and provides CLI commands for development, building, and publishing.

CLIFigmaVue3

0 likes · 7 min read

Varlet Icon Builder: Fast Creation of Enterprise Icon Libraries with Vue and React Support

Rare Earth Juejin Tech Community

Jul 12, 2024 · Frontend Development

Rapid Icon Library Toolchain for Vue and React with Varlet

This article introduces a comprehensive toolchain that quickly builds internal or open‑source icon libraries, converting SVGs into Vue 3 and React components, web fonts, and modules, while supporting Figma integration, automatic component import, and full release workflows.

FigmaToolchainVue

0 likes · 5 min read

Rapid Icon Library Toolchain for Vue and React with Varlet

Baidu Geek Talk

Jun 19, 2024 · Frontend Development

YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution

YYF2C, Baidu and YY Interactive’s all‑in‑one Figma‑plus‑AI platform, transforms design files into high‑fidelity, semantically named code across web, React Native and admin components, offering plugins, light‑logic tags, DSL converters and SaaS management that together boost development efficiency by roughly fifteen percent.

AI code generationDSLFigma

0 likes · 11 min read

YYF2C: Baidu YY's Figma & AI-Powered Design-to-Code Solution

NetEase Cloud Music Tech Team

Dec 28, 2023 · Frontend Development

Lossless Design-Frontend Collaboration: The Evolution of NetEase Cloud Music's Design Collaboration Practice

Since 2021, NetEase Cloud Music’s Design Platform has evolved its design‑frontend workflow through three stages—engineering phase 1.0, phase 2.0, and the AI‑driven intelligent phase—by introducing the C2D2C (Code‑to‑Design‑to‑Code) methodology, unified design systems, LLM‑enhanced code, and generative AI tools, cutting communication overhead and boosting designer and developer productivity by up to 200 %.

AI designC2D2CD2C

0 likes · 31 min read

Lossless Design-Frontend Collaboration: The Evolution of NetEase Cloud Music's Design Collaboration Practice

ByteFE

Aug 9, 2023 · Frontend Development

Semi D2C: Design‑to‑Code System for Accelerating Frontend UI Development

The article introduces Semi D2C, a design‑to‑code solution built by the Douyin frontend team that converts Figma design files into reusable JSX/CSS code, explains its capabilities, implementation details, challenges, benefits for designers and developers, and how it differs from other D2C approaches.

Component RecognitionFigmaSemi UI

0 likes · 26 min read

Semi D2C: Design‑to‑Code System for Accelerating Frontend UI Development

We-Design

Jun 19, 2023 · Product Management

Inside Figma’s Find & Replace: Design Challenges and Solutions

This article recounts how the Figma team designed and implemented the native Find and Replace feature, detailing the research, sorting logic, UI decisions, zoom and pan handling, shortcut design, and lessons learned from plugin development to create an intuitive, fast, and seamless search experience across FigJam and Figma.

FigmaProduct DevelopmentUX design

0 likes · 12 min read

Inside Figma’s Find & Replace: Design Challenges and Solutions

We-Design

Mar 30, 2023 · Frontend Development

How to Implement Design Tokens in Figma and Sketch for Seamless Dev Collaboration

This article explains how to map design tokens—style, component, template, and file tokens—to appropriate carriers in Figma and Sketch, covering token categories, multi‑mode and multi‑business handling, component token strategies, property naming conventions, handoff methods, and version management.

FigmaSketchcomponent

0 likes · 20 min read

How to Implement Design Tokens in Figma and Sketch for Seamless Dev Collaboration

NetEase Cloud Music Tech Team

Feb 28, 2023 · Frontend Development

Lossless Design Collaboration Based on C2D2C at NetEase Cloud Music

NetEase Cloud Music’s GMTC talk unveils C2D2C—a lossless design‑development workflow that treats code as a shared language, letting designers export layer data and component metadata via Sketch/Figma plugins, which developers convert back into code, boosting designer efficiency by 25%, developer efficiency by 33%, and overall collaboration by 38% across major product scenarios.

C2D2CD2CFigma

0 likes · 18 min read

Lossless Design Collaboration Based on C2D2C at NetEase Cloud Music

NetEase Cloud Music Tech Team

May 31, 2022 · Frontend Development

Fin Line Height Fix Tool: Solving Visual Fidelity Issues in Design-Development Collaboration

The article introduces the Fin Line Height Fix Tool, an open‑source solution from NetEase’s Dolphin team that resolves visual fidelity problems caused by inconsistent font heights between design tools and implementation, offering Figma and Sketch plugins plus iOS, Android, and React Native code to ensure pixel‑level line‑height consistency and streamline designer‑developer collaboration.

AndroidFigmaReact Native

0 likes · 8 min read

Fin Line Height Fix Tool: Solving Visual Fidelity Issues in Design-Development Collaboration

DeWu Technology

Jan 17, 2022 · Frontend Development

Figma + GitLab CI: A Modern Icon Delivery Workflow

This article outlines a modern icon delivery workflow that moves from static image resources to a Figma‑driven process, using a custom Figma plugin and GitLab CI to fetch, optimize with SVGO, and automatically generate React/Vue SVG component libraries, publish npm packages, and deploy documentation.

FigmaGitLab CISVG

0 likes · 9 min read

Figma + GitLab CI: A Modern Icon Delivery Workflow

Python Programming Learning Circle

Jun 18, 2021 · Frontend Development

Using Tkinter Designer to Build Python GUIs with Figma Integration

This guide explains how to install and use Tkinter Designer, a tool that combines Python's Tkinter library with the Figma API, allowing developers to design graphical interfaces in Figma and automatically generate runnable Python GUI code.

FigmaGUITkinter

0 likes · 3 min read

Using Tkinter Designer to Build Python GUIs with Figma Integration

Meiyou UED

Oct 16, 2020 · Frontend Development

Why Figma Is Redefining UI Design Collaboration in the Cloud

This article examines the evolution of interface design tools, compares Photoshop, Sketch, and Figma, and explains how Figma’s browser‑based, cloud‑native collaboration, component system, and community resources are reshaping UI design workflows for individuals and teams.

FigmaUI designcloud-based

0 likes · 15 min read

Why Figma Is Redefining UI Design Collaboration in the Cloud