select_arrow
shinyasato
73
0
0

Figmaのガイドライン

Published at October 22, 2019 4:44 p.m.
Edited at December 1, 2019 1:02 a.m.

📌 直面している課題

  • デザイナーとエンジニアで見ているデザインデータが違い、誤ったデザインがプロダクトに反映されてしまう事があった
  • 最新のデザインデータが、どこにあるかわからない事が多々あった

📝 ガイドラインを作成する目的

  • 今後新しいデザイナーが入ってきても、正しいルールでサービスを運用・保守し続ける
  • デザイナーとエンジニアでデザインデータの認識を合わせて、サービスを正しく更新し続ける
  • デザインデータを適切に管理し続ける

📋 基本的な運用方法

  • ステータス毎にプロジェクトを分ける
    • 作業用
    • 管理用(コメント禁止)
    • リリース済み(コメント禁止)
  • デザインステータスは、ラベルで表示する
  • パソコンとスマホでPageを分ける
    • プレビュー機能が使えない為

メリット

  • JIRA番号毎に管理できる
  • Sysが見るファイルが明確化される
  • 画面毎に分割しているのでファイルが重くならない

🌱 Page 名対応表

Page名 タイミング
デザイン中 / JIRA-○○○ - PC パソコン版のデザインを作成する
デザイン中 / JIRA-○○○ - SP スマホ版のデザインを作成する
レビュー中 / JIRA-○○○ - PC パソコン版のデザインをレビューしてもらう
レビュー中 / JIRA-○○○ - SP スマホ版のデザインをレビューしてもらう
実装中 / JIRA-○○○ - PC パソコン版のデザイン実装中
実装中 / JIRA-○○○ - SP スマホ版のデザイン実装中

📇 Frame命名規則

[ 大項目 ] - [ 中項目 ] - [ 状態 ]

  • 検索でどの画面かわかるように、Frameの命名規則は正確に行う
  • [ 中項目 ] [ 状態 ] は、ないなら入れなくてもいい

例文:サイトトップ - ログイン後
例文:ブランド管理 - 企業プロフィール - 記入前

ページ一覧

ユーザー側

  • サイトトップ
  • 業種画面第一階層
  • 募集詳細
  • 企業プロフィール
  • ユーザープロフィール
  • 検索・SEOページ
  • アンケート
  • プロフィールアンケート
  • 日程調整
  • 応募管理
  • 閲覧履歴
  • お知らせ
  • アカウント設定
  • インタビュー
  • サービス利用規約
  • 有料プラン利用規約

企業側

  • 企業管理
    • 企業プロフィール
    • スタッフの管理
  • 募集記事の管理
    • 募集の一覧
    • 店舗の管理
  • 応募者一覧
  • プラン情報
    • 料金プラン
    • ご利用中のプラン
  • 請求情報
    • 会社・請求先情報
    • お支払い情報
    • 請求・入金一覧
    • 預かり金返金口座
  • プラン申し込み
  • お知らせ
  • 企業様向け利用規約
  • ご紹介プラン利用規約

📙 ワークフロー

  1. Figmaファイルを作成する
    1. 「作業用」プロジェクトに、新しいFigmaファイルを作成する
    2. ファイル名:JIRA-◯◯◯ JIRAのタイトル
    3. 命名規則に従い、Frameに名前をつける
  2. Page名変更
    1. Page名:デザイン中 / JIRA-◯◯◯ - PC デザイン中 / JIRA-◯◯◯ - SP
    2. デザインを作る
  3. レビューをお願いする
    1. Page名を変える
    2. Page名:レビュー中 / JIRA-◯◯◯ - PC レビュー中 / JIRA-◯◯◯ - SP
    3. レビューをお願いする
    4. (戻しがあったら)Page名を「デザイン中 / JIRA-◯◯◯」に変更して、再度作業する
  4. 実装をお願いする
    1. OKが出たら、Page名を変える
    2. Page名:実装中 / JIRA-◯◯◯ - PC 実装中 / JIRA-◯◯◯ - SP
      • 実装中にデザイン変更が合った場合、「デザイン変更あり」ラベルを貼る
      • ノートを使い、変更点を明確にする
  5. リリース
    1. 「管理用」プロジェクトのFigmaファイルを開く
    2. Master Pageに、作業したFrameをコピペする
    3. 遷移図を作る
    4. 「作業中」プロジェクトのファイルを「リリース済み」に移動する

📱 デザインスペック

開発者とのコミュニケーションは、デザインスペックを使って行う。

デザインステータス

実装中に謝って作業をしてしまったことがあったため、デザインステータスを明確にする。

  • デザイン変更あり
    • 実装中でデザインが変更になった場合
    • ノートを使って、変更点を明確にする

UIフロー

  • Figmaは遷移図が表示されないので、具体的な遷移を示す
  • クリック以外の動作はLabelを着けて動作を明確にする

ノート

デザイン変更があった場合や、実装上の注意点等があれば、コメントで明記しておく

スペースの説明

スペースの変更点があった場合使用する