プロジェクトでの利用
ファイルの複製
Section titled “ファイルの複製”はじめにこのライブラリファイルを複製し、複製したファイルのファイル名を編集してください。
必要に応じて、リンクの共有や編集・閲覧権限の付与を行なってください。
Sun* 環境で Figma を管理する場合
Section titled “Sun* 環境で Figma を管理する場合”ファイルの移動
Section titled “ファイルの移動”- 複製したファイルのメニューから「ファイルを移動…」を選択
- 移動先のチームを選択し、「移動」を押して完了
共有先および権限を設定
Section titled “共有先および権限を設定”必要に応じて、リンクの共有や編集・閲覧権限の付与を行なってください。
クライアント環境で Figma を管理する場合
Section titled “クライアント環境で Figma を管理する場合”ファイルのエクスポートとインポート
Section titled “ファイルのエクスポートとインポート”- 複製したファイルを開き、[ファイル] > [ローカルコピーの保存] を選択してダウンロード
- インポートする Figma アカウント / プロジェクトを開き、ダウンロードした
.figファイルをドラッグ
共有先および権限を設定
Section titled “共有先および権限を設定”必要に応じて、リンクの共有や編集・閲覧権限の付与を行なってください。
ライブラリの有効化
Section titled “ライブラリの有効化”移動したデザインシステムの「ライブラリ管理」よりライブラリを公開します。異なるファイルまたはプロジェクトをまたがって再利用可能な状態となります。
利用したいデザインファイルを開き、「ライブラリ管理」より公開したライブラリを追加します。
1. Foundation の定義
Section titled “1. Foundation の定義”デザイン原則やコンセプトに従って Foundation を定義します。プロダクトのブランドカラーやタイポグラフィに応じて、必要な部分を調整してください。
2. Components の定義・調整
Section titled “2. Components の定義・調整”ボタン、入力フォームなどの基本 UI を、プロダクト仕様に合わせてカスタマイズします。
不足しているコンポーネントは、ライブラリにある設計思想やフォーマットを参考にして作成してください。
3. Icons の作成・調整
Section titled “3. Icons の作成・調整”アイコンも一貫性を持って設計しましょう。基準となる線の太さや角丸など、プロダクトのトンマナに合わせて定義したうえで作成してください。