WebサイトやスマホアプリのデザインシステムをUI/UXデザインのコラボレーションツール「Figma」で制作する手順を紹介します。 カラーパレットをはじめ、タイポグラフィ、シャドー、アイコン、コンポーネントなど、Figmaでデザインシステムに必要なものをどのように制作するか解説します。 Creating a Design System in Figma. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Figmaのワイヤーフレーム素材は、以前の記事をご覧ください。 Figmaで簡単に作成できる!ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ はじめに 1. 何よりもまず、強力なカラーパレットを作るべき理由 2. デスクトップとスマホの両方に対応するタイポグラフィ 3. 忘れてはならないの
![Figmaなら簡単!デザインシステムの作り方を詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcadd41ff3b22049d1fcf7caf9cc1df68f960c83/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202102%2F2021041010%402x.png)