Design Homemade - Tools for Dev & Designer

About this plugin

Build your design system foundations, then bring the web into Figma.Design Homemade generates colour, typography and spacing variables in a few clicks — and imports HTML pages as real, editable layers.COLORPick a palette from Tailwind or Open Color, or import your own as JSON. Adjust the shade count and contrast, override any single shade, then generate colour variables named brand/500, neutral/900 and so on. Semantic tokens like text/primary and bg/default alias back to those primitives, with Light and Dark modes that switch together.TYPOGRAPHYReads the fonts installed on your machine, so you only pick from what is really there. Choose the weights you want per style and get text styles generated across all of them. If a weight is missing from a font, the nearest one is used and reported. Sizes, line heights and letter spacing can be generated as variables and bound to each style.RADIUS, SIZE AND SPACINGT-shirt or numeric naming, editable values, generated as float variables.IMPORT HTMLDrop an HTML file, paste code, or fetch a URL. The page renders, every computed style is read, and the result is rebuilt in Figma with Auto Layout applied. Editable text with mixed styles, SVG icons as vectors, gradients, shadows, per-corner radii and form fields all come across. Import several viewport widths side by side in one pass.EXPORTClick a frame and every image inside it appears, ready to pick. Export as PNG, JPEG or WebP at 1x to 4x. Several images arrive as a single zip.GOOD TO KNOWRunning a generator twice updates the existing values instead of creating duplicates, so it is safe to iterate.Hand-written and exported HTML converts very well. Very large production sites come out approximate — fonts Figma does not have get substituted, which shifts line breaks. Pages built entirely by JavaScript return an empty shell when fetched by URL; open them in a browser, copy the outerHTML, and paste that instead.Three themes, English and Thai throughoutFound a problem? Email [email protected] — I read every message.-------------------------------------------วางรากฐานระบบออกแบบ แล้วดึงเว็บเข้า FigmaDesign Homemade สร้างตัวแปรสี ตัวอักษร และระยะห่างได้ในไม่กี่คลิก พร้อมนำเข้าหน้าเว็บเป็นเลเยอร์ที่แก้ไขได้จริงสีเลือกพาเลตต์จาก Tailwind หรือ Open Color หรือนำเข้าของตัวเองเป็น JSON ปรับจำนวนเฉดและคอนทราสต์ คลิกปรับเฉดไหนก็ได้เฉพาะตัว แล้วสร้างเป็นตัวแปรสีชื่ออย่าง brand/500 หรือ neutral/900 ส่วนโทเคนเชิงหน้าที่อย่าง text/primary และ bg/default จะชี้กลับไปยังสีตั้งต้น พร้อมโหมดสว่างและมืดที่สลับพร้อมกันตัวอักษรอ่านรายชื่อฟอนต์ที่ติดตั้งอยู่จริงในเครื่อง เลือกได้เฉพาะที่มีจริง เลือกน้ำหนักที่ต้องการต่อสไตล์แล้วสร้างสไตล์ข้อความให้ครบทุกน้ำหนัก ถ้าฟอนต์ไหนไม่มีน้ำหนักที่ขอ จะใช้ตัวใกล้เคียงแล้วรายงานให้ทราบ ขนาด ความสูงบรรทัด และระยะห่างอักษร สร้างเป็นตัวแปรผูกกับสไตล์ได้มุมโค้ง ขนาด และระยะห่างตั้งชื่อแบบตัวอักษรหรือตัวเลข แก้ค่าได้ทุกช่อง สร้างเป็นตัวแปรตัวเลขนำเข้า HTMLลากไฟล์ วางโค้ด หรือใส่ลิงก์ ปลั๊กอินจะเรนเดอร์หน้านั้น อ่านสไตล์ที่คำนวณแล้วทุกตัว แล้วประกอบใหม่ใน Figma พร้อมจัด Auto Layout ให้ ได้ทั้งข้อความที่แก้ไขได้แบบมีหลายสไตล์ปนกัน ไอคอน SVG เป็นเวกเตอร์ ไล่สี เงา มุมแยกด้าน และช่องกรอกฟอร์ม เลือกหลายขนาดหน้าจอพร้อมกันได้ในครั้งเดียวส่งออกรูปคลิกเฟรม รูปทั้งหมดข้างในจะขึ้นมาให้เลือก ส่งออกเป็น PNG, JPEG หรือ WebP ที่ 1x ถึง 4x หลายรูปจะรวมมาเป็นไฟล์ zip เดียวควรรู้ก่อนใช้กดสร้างซ้ำจะอัปเดตค่าเดิม ไม่สร้างของซ้ำ จึงลองปรับไปมาได้อย่างสบายใจHTML ที่เขียนเองหรือส่งออกจากเครื่องมือออกแบบแปลงได้ดีมาก ส่วนเว็บใหญ่ ๆ ผลจะใกล้เคียงแต่ไม่เป๊ะ เพราะฟอนต์ที่ Figma ไม่มีจะถูกแทน ทำให้จุดตัดบรรทัดเลื่อน ส่วนเว็บที่สร้างเนื้อหาด้วย JavaScript ทั้งหมด การดึงผ่านลิงก์จะได้หน้าเปล่า ให้เปิดในเบราว์เซอร์แล้วก๊อป outerHTML มาวางแทนมีสามธีม รองรับทั้งภาษาไทยและอังกฤษเจอปัญหา ส่งอีเมลมาที่ [email protected] ผมอ่านทุกฉบับ-------------------------------------------Last Update 6/08/20261.1.0 — Design system toolsDesign Homemade is no longer just an HTML importer. This release adds afull set of design system generators alongside the existing import tools.NEW — Color• Generate colour variables from Tailwind and Open Color palettes, or import your own as JSON• Adjust shade count and contrast without losing each library's character• Click any shade to override its colour and opacity• Semantic tokens that alias to primitives, with Light and Dark modesNEW — Typography• Reads the fonts actually installed on your machine• Generates text styles across any weights you pick• Falls back to the nearest available weight and tells you exactly what changed• Optional variables for size, line height and letter spacing, bound to each styleNEW — Radius, Size and Spacing• T-shirt or numeric naming• Generate each group on its own or all at onceNEW — Export• Click a frame and every image inside it appears, ready to pick• PNG, JPEG and WebP at 1x to 4x• Multiple images arrive as a single zip, so nothing gets blocked• Previews stream in progressively, so large frames no longer freezeIMPROVED• Three themes — Warm, Cool and Dark. Your choice and language are remembered• Rebuilt interface with a sidebar, replacing the old single column• Running the same generator twice updates values instead of creating duplicates```1.1.0 — เครื่องมือสร้างระบบออกแบบDesign Homemade ไม่ได้เป็นแค่ตัวนำเข้า HTML อีกต่อไป รุ่นนี้เพิ่มชุดเครื่องมือสร้างระบบออกแบบเข้ามาอยู่ข้าง ๆ ของเดิมใหม่ — สี• สร้างตัวแปรสีจากพาเลตต์ Tailwind และ Open Color หรือนำเข้าของตัวเองเป็น JSON• ปรับจำนวนเฉดและคอนทราสต์ได้โดยไม่เสียบุคลิกของแต่ละคลัง• คลิกที่เฉดไหนก็ปรับสีและความทึบเฉพาะตัวได้• โทเคนเชิงหน้าที่ที่ชี้กลับไปยังสีตั้งต้น พร้อมโหมดสว่างและมืดใหม่ — ตัวอักษร• อ่านรายชื่อฟอนต์ที่ติดตั้งอยู่จริงในเครื่อง• สร้างสไตล์ข้อความตามน้ำหนักที่เลือก• ถ้าไม่มีน้ำหนักที่ขอ จะใช้ตัวใกล้เคียงแล้วบอกให้รู้ว่าเปลี่ยนอะไรไป• เลือกสร้างตัวแปรขนาด ความสูงบรรทัด และระยะห่างอักษรผูกกับสไตล์ได้ใหม่ — มุมโค้ง ขนาด และระยะห่าง• ตั้งชื่อแบบตัวอักษรหรือตัวเลข• สร้างทีละกลุ่มหรือครบทุกกลุ่มในครั้งเดียวใหม่ — ส่งออกรูป• คลิกเฟรม รูปทั้งหมดข้างในจะขึ้นมาให้เลือกทันที• PNG, JPEG และ WebP ที่ 1x ถึง 4x• หลายรูปจะรวมมาเป็นไฟล์ zip เดียว ไม่มีไฟล์ไหนถูกบล็อก• รูปตัวอย่างทยอยขึ้นทีละชุด เฟรมที่มีรูปเยอะไม่ทำให้ค้างอีกต่อไปปรับปรุง• สามธีม Warm, Cool และ Dark จำธีมกับภาษาที่เลือกไว้ให้• หน้าตาใหม่แบบมีเมนูด้านข้าง แทนแบบคอลัมน์เดียวเดิม• กดสร้างซ้ำจะอัปเดตค่าเดิม ไม่สร้างของซ้ำ