Turtle オンボーディング
「今すぐ Turtle を使い始めたい人」のための最短手順です。共通セットアップのあと、デザイナー向けとエンジニア向けに分岐します。
対象読者：DMM グループ内でデザインシステム構築や Turtle 導入を行う方
共通セットアップ（3分）
- アクセス権の確認：Figma ライブラリの閲覧権限／パッケージの取得権限
- 参照先の確認：Storybook をブックマーク
デザイナー向け
デザイナーが Figma で Turtle の UI Kit を利用する手順をご紹介します。
- Figma で Turtle のライブラリを追加
- アイコンアセットとして Material Icons のライブラリを追加
- Turtle の Grid コンポーネントを解除して画面を用意（⌘+G でグリッドを表示できます）
- 使えるコンポーネントを Turtle から配置し、デザインに適した property を設定
- プロダクト固有のローカルコンポーネントを設計
- デザイントークンのルールに従いスタイルを適用（Local variables）
- Storybook のデザインガイドラインをチェックする
これだけで、設計は Turtle 準拠になります。
詳細は必要に応じて AI-friendly デザインガイドライン を確認してください。
エンジニア向け
エンジニアが Turtle のコンポーネントライブラリを利用する手順をご紹介します。コマンドや設定、使用例は各パッケージおよびリポジトリの README を参照ください。
A. GitHub Packages で利用
プラットフォーム領域では、原則 React での開発を推奨しています。
- GitHub Packages から対象パッケージをインストール（トークン／UI ライブラリ）
- プロダクトファイルにおいて使いたいコンポーネントを import して使う
B. React 以外のアプリケーション
React 以外の技術スタックにも対応できるアセットを一部提供しています。HTML/CSS で利用したい方はこちらを参照ください。
turtle-static-components.cssとturtle-design-tokens.cssをダウンロード- 静的アセットとして２つのファイルを配置し、全ページで読み込みをする
- Storybook のシミュレーターで対象コンポーネントのスニペットをコピーして適用
- 画面全体でスタイルを適用
備考：
- CSS ファイルの入手先と読み込み手順、各コンポーネントのコードは Storybook の Getting Started／各コンポーネントページを参照ください
- 詳細なコマンドや設定は各パッケージの README を参照ください
お問い合わせ（DMMグループ内向け）
導入相談や詳細の確認は、Slack の #ask-turtle チャンネルからお気軽にご連絡ください。