ENGINEER HIKARU

<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A8%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> デザインシステムとは？</h2>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>デザインを一貫性を持って作成するための仕組み</p>
</div></aside>
<h2 id="q%26a">
<a class="header-anchor-link" href="#q%26a" aria-hidden="true"></a> Q&amp;A</h2>
<details><summary>Q. なぜデザインシステムは必要か</summary><div class="details-content">
<p>A. デザインと開発を効率化するため</p>
</div></details>
<details><summary>Q. デザインシステムの中身はどういうものか</summary><div class="details-content">
<p>A. 「スタイル」と「コンポーネント」のルール及びライブラリをまとめたもの</p>
</div></details>
<details><summary>Q. デザインシステムは何を使って作るか</summary><div class="details-content">
<p>A. 「Figma」や「Adobe XD」を使うのが一般的</p>
</div></details>
<h2 id="%E5%8F%82%E8%80%83%E3%83%BB%E3%83%AA%E3%83%B3%E3%82%AF">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%BB%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 参考・リンク</h2>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__163a3d8a0963f" src="https://embed.zenn.studio/card#zenn-embedded__163a3d8a0963f" data-content="https%3A%2F%2Fwww.designbetter.co%2Fdesign-systems-handbook" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2e55735eecb33" src="https://embed.zenn.studio/card#zenn-embedded__2e55735eecb33" data-content="https%3A%2F%2Fwww.digital.go.jp%2Fpolicies%2Fservicedesign%2Fdesignsystem%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__51f0eed33f787" src="https://embed.zenn.studio/card#zenn-embedded__51f0eed33f787" data-content="https%3A%2F%2Fm3.material.io%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__08ffc8eeb4d54" src="https://embed.zenn.studio/card#zenn-embedded__08ffc8eeb4d54" data-content="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fresources%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c2cacb378b831" src="https://embed.zenn.studio/card#zenn-embedded__c2cacb378b831" data-content="https%3A%2F%2Fatlassian.design%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f2396870181d" src="https://embed.zenn.studio/card#zenn-embedded__f2396870181d" data-content="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F928108847914589057%2FUI2%253A-Figma's-Design-System" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e8d499b04e456" src="https://embed.zenn.studio/card#zenn-embedded__e8d499b04e456" data-content="https%3A%2F%2Ftetrisly.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span>


<h2 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90%E6%A1%88">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E6%A7%8B%E6%88%90%E6%A1%88" aria-hidden="true"></a> デザインシステム構成案</h2>
<h3 id="%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB" aria-hidden="true"></a> スタイル</h3>
<ul>
<li>Color</li>
<li>Text</li>
<li>Rounded</li>
<li>Shadow</li>
<li>Sizing</li>
<li>Spacing</li>
</ul>
<h3 id="%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88" aria-hidden="true"></a> コンポーネント</h3>
<ul>
<li>Accordion</li>
<li>Alert</li>
<li>Avatar</li>
<li>Badge</li>
<li>Button</li>
<li>Card</li>
<li>Checkbox</li>
<li>Divider</li>
<li>Dropdown</li>
<li>Heading</li>
<li>Radio</li>
<li>Select</li>
<li>Switch</li>
<li>Table</li>
<li>TextField</li>
</ul>


デザインシステムを本気で考える【随時更新】

デザインシステムとは？

Q&A

参考・リンク

デザインシステム構成案

スタイル

コンポーネント