Simple UI Kit ｜ シンプルで使いやすいFigma UI素材集

Webデザインやアプリデザインで使いやすい、シンプルなUIコンポーネントをまとめたFigma専用素材集です。

「毎回ボタンやフォームを一から作るのが面倒…」

「統一感のあるシンプルなUIを素早く作りたい」

そんな場面で、そのまま配置したり、自由にカスタマイズしたりしてご利用いただけます。

主要なコンポーネントにはAuto Layoutを適用しています。

※編集内容によっては、Auto Layoutを解除してご利用ください。

また、コンポーネント化・HTMLを意識したレイヤー構造で整理しているため、編集・管理もしやすくなっています。

特徴

Figma専用

コンポーネント化済み

主要コンポーネントはAuto Layout対応

HTMLを意識したレイヤー構造

商用利用可能

シンプルで様々なデザインに合わせやすい

ラインナップ (ID　内容)

【su-form（フォーム）】

su-form-01 Search Bar

su-form-02 Name Input

su-form-03 Email Input

su-form-04 Select

su-form-05 Select（Open）

su-form-06 Textarea

【su-card（カード）】

su-card-01〜07 Card ×7

【su-tab（タブ）】

su-tab-01〜03 Tab ×3

su-tab-04 Simple Tab

su-tab-05 Simple Tab（Color）

su-tab-06 Simple Tab（Shadow）

su-tab-07 Simple Tab（Color + Shadow）

su-tab-08 Status Tab

su-tab-09 Status Tab（Color）

【su-tag（タグ）】

su-tag-01 Rounded Tag

su-tag-02 Rounded Tag（Color）

su-tag-03 Hashtag

su-tag-04 Hashtag（Color A）

su-tag-05 Hashtag（Color B）

【su-btn（ボタン）】

su-btn-01 Button

su-btn-02 Button（Color）

su-btn-03 Plus Button

su-btn-04 Plus Button（Color）

su-btn-05 Circle Button

su-btn-06 Circle Button（Color）

su-btn-07 Heart Button（Outline）

su-btn-08 Heart Button（Outline・Color）

su-btn-09 Heart Button（Filled Black）

su-btn-10 Heart Button（Filled Black・Color）

su-btn-11 Heart Button（Filled Red）

su-btn-12 Heart Button（Filled Color）

【su-check（チェックボックス）】

su-check-01 Checkbox

su-check-02 Checkbox（Checked）

su-check-03 Checkbox（Checked・Color）

su-check-04 Checkbox（Checked・Color + Outline）

su-check-05 Checkbox（Checked・Color + Outline + Shadow）

【su-radio（ラジオボタン）】

su-radio-01 Radio Button（Default）

su-radio-02 Radio Button（Checked A）

su-radio-03 Radio Button（Checked B）

su-radio-04 Radio Button（Checked Color A）

su-radio-05 Radio Button（Checked Color B）

【su-toggle（トグルスイッチ）】

su-toggle-01〜03 Toggle OFF

su-toggle-04〜06 Toggle OFF（Disabled）

su-toggle-07〜08 Toggle ON

su-toggle-09〜11 Toggle ON（Color）

su-toggle-12〜13 Toggle ON（Disabled）

su-toggle-14〜16 Toggle ON（Disabled・Color）

【su-slider（スライダー）】

su-slider-01 Line Slider

su-slider-02〜04 Simple Slider

【su-badge（バッジ）】

su-badge-01 Number Badge

su-badge-02 Star Badge（Outline）

su-badge-03 Star Badge（Filled）

【su-icon（アイコン）】

su-icon-01 Close（Black）

su-icon-02 Close（Red）

su-icon-03 Signal（Black）

su-icon-04 Signal（Color）

su-icon-05 Battery（Color）

su-icon-06 Battery（Color + Shadow）

su-icon-07 Hamburger Menu

su-icon-08 Arrow Right

ご利用について

Figma専用素材です。

商用利用可能です。

素材データそのものの再配布・再販売は禁止しています。