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 15/08/20261.1.1 — More reliable imports, design-system sync and image exportsIMPORT HTML• Multiple selected viewports are now created consistently in one run• Improved responsive sizing, page height and Auto Layout conversion• Better positioning for centered cards, text, buttons and nested content• More complete image loading for picture, source, background and responsive assets• Fetch and Create in Figma now show a blocking loading overlay to prevent duplicate runs• Repeating Create produces consistent resultsCOLOR• Added Material UI, Ant Design, Radix Colors, IBM Carbon and Bootstrap libraries• Existing local colour variables are shown alongside generated palettes• Custom hue control and exact source shade values• Generate now creates, updates and removes library variables to match the current setup• A polished colour specimen is created on the canvas for handoffTYPOGRAPHY• Existing Local Text Styles are loaded into the editor• Primary and Secondary font roles are clearer and multi-weight choices are preserved• Letter spacing is rounded to two decimals• Auto letter spacing and Auto line height are supported• Generate synchronizes Local Text Styles and creates a typography specimen on the canvasEXPORT• New Original image option exports the full source image without the layer crop• Regular export now keeps only the fill and excludes strokes, effects and frame content• PNG, JPEG and WebP export continue to support 1x–4x scale and multi-image zip filesFIXED• Reduced overlapping text, incorrect alignment and unstable Auto Layout results• Improved consistency between preview and generated Figma layers• English and Thai copy reviewed across the updated controls```---```text1.1.1 — นำเข้าแม่นขึ้น ซิงก์ Design System และส่งออกรูปได้ครบกว่าเดิมนำเข้า HTML• สร้าง Viewport ที่เลือกหลายขนาดได้ครบและสม่ำเสมอในครั้งเดียว• ปรับการคำนวณ Responsive ขนาดความสูงหน้า และการแปลง Auto Layout• จัดตำแหน่งการ์ด ข้อความ ปุ่ม และเนื้อหาซ้อนชั้นที่อยู่กึ่งกลางได้ดีขึ้น• โหลดรูปจาก picture, source, background และรูป Responsive ได้ครบขึ้น• Fetch และ Create in Figma มี Loading Overlay ป้องกันการกดซ้ำระหว่างทำงาน• กด Create ซ้ำแล้วได้ผลลัพธ์สม่ำเสมอขึ้นสี• เพิ่มคลัง Material UI, Ant Design, Radix Colors, IBM Carbon และ Bootstrap• แสดงตัวแปรสี Local ที่มีอยู่แล้วร่วมกับพาเลตต์ที่สร้างใหม่• ปรับ Hue เองได้และรักษาค่าสีต้นฉบับของแต่ละคลัง• Generate จะสร้าง อัปเดต และลบตัวแปรใน Library ให้ตรงกับค่าปัจจุบัน• สร้างแผ่นตัวอย่างสีที่จัดวางสวยงามลงบนแคนวาสสำหรับส่งต่องานตัวอักษร• โหลด Local Text Styles ที่มีอยู่แล้วมาแสดงในตัวแก้ไข• แยกบทบาทฟอนต์ Primary และ Secondary ชัดเจน และจำ Weights ที่เลือกหลายค่าได้• Letter spacing แสดงทศนิยมไม่เกินสองตำแหน่ง• รองรับ Letter spacing แบบ Auto และ Line height แบบ Auto• Generate ซิงก์ Local Text Styles และสร้างแผ่นตัวอย่าง Typography บนแคนวาสส่งออกรูป• เพิ่ม Original image สำหรับส่งออกภาพต้นฉบับเต็มใบโดยไม่ติด Crop ของเลเยอร์• การส่งออกปกติใช้เฉพาะ Fill โดยไม่รวม Stroke, Effects และเนื้อหาภายในเฟรม• PNG, JPEG และ WebP ยังรองรับขนาด 1x–4x และรวมหลายรูปเป็นไฟล์ zipแก้ไข• ลดปัญหาข้อความซ้อน ตำแหน่งคลาด และ Auto Layout ทำงานไม่สม่ำเสมอ• ทำให้ Preview กับเลเยอร์ที่สร้างใน Figma ตรงกันมากขึ้น• ตรวจข้อความภาษาไทยและอังกฤษของส่วนที่อัปเดตแล้ว