https://netguide.jp/en/tags/design/Recent content in Design on KaisekukunHugo -- gohugo.ioenKaisekukunFri, 15 May 2026 12:00:00 +0900https://netguide.jp/en/software/figma-to-code-tools/Fri, 15 May 2026 12:00:00 +0900https://netguide.jp/en/software/figma-to-code-tools/<img src="https://netguide.jp/img/thumbnail/figma-to-code-tools-en.png" alt="Featured image of post Comparing Figma to Code Tools for Modern UI Developers" /><p>Explore the ecosystem of plugins translating Figma vector layouts into web assets and component classes.</p> <p>Converting mockups from Figma into clean, responsive React, Vue, or HTML/CSS code has historically been a tedious, manual task. Today, modern &ldquo;Figma-to-Code&rdquo; tools use AI to interpret vector layouts and produce highly readable code. This article compares industry leaders—Anima, Locofy, and native Dev Mode plugins—and provides styling rules for your design files to guarantee clean code exports.</p>https://netguide.jp/en/web/css-subgrid-layout-guide/Sun, 15 Mar 2026 12:00:00 +0900https://netguide.jp/en/web/css-subgrid-layout-guide/<img src="https://netguide.jp/img/thumbnail/css-subgrid-layout-guide-en.png" alt="Featured image of post Understanding CSS Subgrid Layout for Modern Design" /><p>CSS Grid revolutionized how web layouts are structured. However, a common challenge remained: aligning nested items (grandchild elements) inside parent Grid Items to the main grid lines.</p> <p>This was resolved with the introduction of <strong>CSS Subgrid</strong>, a specification update for CSS Grid Layout. This article explains the fundamentals of CSS Subgrid and how to apply it to common layout problems like card lists.</p> <hr> <h2 id="1-what-is-css-subgrid">1. What is CSS Subgrid? </h2><p>Traditionally, only direct children of a Grid container can be positioned along the defined grid tracks. When you declare another grid inside a Grid Item, that nested grid is completely isolated from the outer parent grid.</p>