KATACHI(カタチ)とは、デザインシステムのコンポーネントのデザイン素材を集めたサイトです。
デザインシステムは、一貫性のあるユーザーインターフェイス(UI)を構築するためのガイドライン、コンポーネント、ツールの集合です。
これにより、製品やサービスのデザインと開発が効率化され、品質が向上します。
作成したコンポーネントのデータは全てFigmaで制作しています。
いつもでコンポーネントを配置して、ワイヤーフレームからデザインまで効率よく作成することを意図しております。
コンポーネントとは?
デザインシステムのコンポーネントは、その中核をなす要素であり、以下のような種類があります。
- アコーディオン (Accordion)
- アラート (Alert)
- アバター (Avatar)
- バッジ (Badge)
- パンくずリスト (Breadcrumbs)
- ボタン (Button)
- ボタングループ (Button group)
- カード (Card)
- チェックボックス (Checkbox)
- カラーピッカー (Color picker)
- コンボボックス (Combobox)
- 日付入力 (Date input)
- 日付ピッカー (Datepicker)
- ドロワー (Drawer)
- ドロップダウンメニュー (Dropdown menu)
- 空状態 (Empty state)
- フィールドセット (Fieldset)
- ファイル (File)
- ファイルアップロード (File upload)
- フッター (Footer)
- フォーム (Form)
- ヘッダー (Header)
- 見出し (Heading)
- ヒーロー (Hero)
- アイコン (Icon)
- 画像 (Image)
- ラベル (Label)
- リンク (Link)
- リスト (List)
- モーダル (Modal)
- ナビゲーション (Navigation)
- ページネーション (Pagination)
- ポップオーバー (Popover)
- プログレスバー (Progress bar)
- プログレスインジケーター (Progress indicator)
- 引用 (Quote)
- ラジオボタン (Radio button)
- 評価 (Rating)
- リッチテキストエディター (Rich text editor)
- 検索入力 (Search input)
- セグメンテッドコントロール (Segmented control)
- セレクト (Select)
- セパレーター (Separator)
- スケルトン (Skeleton)
- スキップリンク (Skip link)
- スライダー (Slider)
- スピナー (Spinner)
- スタック (Stack)
- ステッパー (Stepper)
- テーブル (Table)
- タブ (Tabs)
- テキスト入力 (Text input)
- テキストエリア (Textarea)
- トースト (Toast)
- トグル (Toggle)
- ツールチップ (Tooltip)
- 視覚的に隠す (Visually hidden)