প্রকল্প সম্পর্কে

TalkToFigma AI এজেন্ট (Cursor, Claude Code, Codex) এবং Figma-এর মধ্যে একটি মডেল কনটেক্সট প্রোটোকল (MCP) ব্রিজ বাস্তবায়ন করে। একটি WebSocket সার্ভার এবং একটি সহযোগী Figma প্লাগইনের মাধ্যমে, একটি এজেন্ট ডকুমেন্ট এবং নির্বাচন পরিদর্শন করতে পারে, নোড তৈরি এবং সম্পাদনা করতে পারে, টেক্সট, অটো লেআউট, স্টাইল, কম্পোনেন্ট এবং অ্যানোটেশন পরিচালনা করতে পারে এবং নোডগুলিকে ছবি হিসেবে এক্সপোর্ট করতে পারে। আর্কিটেকচার - src/talk_to_figma_mcp: TypeScript MCP সার্ভার যা Figma অপারেশনগুলিকে টুল হিসেবে প্রকাশ করে। - src/cursor_mcp_plugin: Figma প্লাগইন যা এজেন্ট পাশের সাথে কথা বলে। - src/socket.ts: WebSocket সার্ভার যা MCP সার্ভার এবং প্লাগইনের মধ্যে বার্তা রিলে করে। সেটআপ Bun ইনস্টল করুন, `bun setup` চালান (যা সক্রিয় Cursor প্রকল্পে MCP সার্ভারও নিবন্ধন করে), `bun socket` দিয়ে সকেট শুরু করুন, তারপর কমিউনিটি পেজ থেকে Figma প্লাগইন ইনস্টল করুন বা manifest.json এর মাধ্যমে এটি স্থানীয়ভাবে লিংক করুন। ম্যানুয়াল MCP কনফিগারেশন ~/.cursor/mcp.json-এ `bunx cursor-talk-to-figma-mcp@latest` ব্যবহার করে। একটি Windows + WSL গাইড socket.ts-এ hostname 0.0.0.0 আনকমেন্ট করার কথা উল্লেখ করে। ব্যবহারের প্রবাহ WebSocket সার্ভার শুরু করুন, MCP সার্ভার ইনস্টল করুন, Figma খুলুন এবং প্লাগইন চালান, `join_channel` দিয়ে একটি চ্যানেলে যোগ দিন, তারপর এজেন্ট থেকে কমান্ড ইস্যু করুন। সেরা অনুশীলনের মধ্যে রয়েছে প্রথমে একটি চ্যানেলে যোগ দেওয়া, সম্পাদনার আগে ডকুমেন্ট তথ্য এবং নির্বাচন পড়া, get_node_info দিয়ে যাচাই করা এবং বড় ডিজাইনের জন্য ব্যাচ অপারেশন ব্যবহার করা। টুল কভারেজ - ডকুমেন্ট এবং নির্বাচন: get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info, set_focus, set_selections। - অ্যানোটেশন: get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types। - প্রোটোটাইপিং: get_reactions, set_default_connector, FigJam কানেক্টর লাইনের জন্য create_connections। - তৈরি: create_rectangle, create_frame, create_section, create_text। - টেক্সট: scan_text_nodes, set_text_content, set_multiple_text_contents। - অটো লেআউট: set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing। - স্টাইলিং: set_fill_color, set_stroke_color, set_corner_radius, set_image_fill। - সংগঠন: move_node, resize_node, delete_node, delete_multiple_nodes, clone_node, rename_node, set_parent। - কম্পোনেন্ট এবং স্টাইল: get_styles, get_local_components, create_component_instance, get_instance_overrides, set_instance_overrides। - এক্সপোর্ট: export_node_as_image (PNG, JPG, SVG, PDF; ইমেজ এক্সপোর্ট বর্তমানে base64 টেক্সট রিটার্ন করে)। - সংযোগ: join_channel। প্রম্পট সহায়ক প্রম্পট জটিল কাজের নির্দেশনা দেয়: design_strategy, read_design_strategy, text_replacement_strategy, annotation_conversion_strategy, swap_overrides_instances, reaction_to_connector_strategy। উল্লেখযোগ্য অবদানকৃত বৈশিষ্ট্যগুলির মধ্যে রয়েছে বাল্ক টেক্সট প্রতিস্থাপন এবং ইনস্ট্যান্স ওভাররাইড প্রচার।