ツール: Figma

WordPress.org アカウント内の Figma ファイルに慣れるのは難しいかもしれません。このドキュメントでは、Figma の構造についてハイレベルな概要を提供し、誰でもその中にあるファイルに慣れることができるようにします。

概要 概要

Figma では、WordPress の体験を一か所で一緒にリアルタイムにデザインしたり、プロトタイプを作成したりすることができます。

Figma はブラウザ用に作られているので、どのプラットフォーム(Windows、Mac、Linux、Chromebook)でも使用できます。ダウンロードやアップデートは必要ありません。

アプリでお使いになりたい方は、Windows および Mac 用の Figma デスクトップアプリをダウンロードしてください。また、Figma Mirror アプリを使用すると、ライブ・プレゼンテーションを次のレベルに引き上げることができます。詳細については、https://www.figma.com/downloads/ でアプリをダウンロードしてください。

Top ↑

はじめに はじめに

Figmaにアクセスする方法 Figmaにアクセスする方法

WordPress.org の Figma チームに参加するには、chat.wordpress.org の #design に、表示のみの権限でのアクセスか編集権限でのアクセスかを知らせてください。Figma の管理者からあなたのメールアドレスで Figma 上のアカウントを設定するために連絡があります。

Top ↑

Figmaを学ぶ Figmaを学ぶ

サインインをしたら、Figma Help Center をチェックして、チュートリアルを始めてみましょう。

Top ↑

構造 構造

Top ↑

Projects Projects

Projects を使って、ファイルを一箇所にまとめることができます。注意点としては、Projects 内にサブフォルダを作成することはできません。

プロジェクトの命名 プロジェクトの命名

一般的なコンポーネントのガイドラインと命名規則に従ってください。

  • スペースのあるセンテンスケースを使用しましょう。

Top ↑

ファイル ファイル

Top ↑

カスタムサムネイル(カバー)を設定する カスタムサムネイル(カバー)を設定する

Figma ファイルにカバーを追加する方法:

  1. ドキュメントに新しいページを作成し、それを「Cover」と名付けます。それがドキュメントの最初のページであることを確認してください。
  2. Assets パネルから、figma-cover を探します。それを使うために、Utilities library を有効にする必要があります。
  3. プロジェクトの状態に適したカバーを選択し、Cover ページの任意の場所にドラッグします。
  4. 選択範囲を枠で囲み、カバーの周りに枠(Frame)を作成します。一貫性を持たせるために、 この名前を「Cover」に変更するとよいでしょう。
  5. 枠外の任意の場所をクリックして選択を解除します。画面の背景を表紙に合わせて変更します。

カバーのカラーコード:

Status

Color code

Archived (do not use)

#D94F4F

In design

#F0B849

In development

#4AB866

Shipped

#00669B

Design resource/library

#23282D

Top ↑

バージョニング バージョニング

  • タイトル(title)は25文字以下にします。
  • 説明文(description)は140字以下にします。
  • タイトルには命令法を使ってください。
  • 「何を」「なぜ」「どのように」説明するために説明文を使用します。

Top ↑

ページ ページ

Pages を使用して以下のことができます:

  • コンセプトやアイデアのさまざまなバージョンを繰り返す
  • プラットフォームまたはデバイスごとに設計を分割する
  • コンポーネントとスタイルをカテゴリに分類する
  • 設計プロセスの各段階を追跡する
  • 同じデザインに対して異なるプロトタイピングフローを作成する

ページを整理する:

  1. Cover: サムネイルプレビューとして使用するために、常に上部に表示されます。
  2. イテレーション: 最新のものを先頭にして、降順に整理します。
  3. 現在のUI: 作業前のUIがどのようになっていたかを記録するためにスクリーンショットを撮影します。これは、製品の進化を追跡し、デザインレビューでストーリーを伝えるために非常に貴重なものです。
  4. Explorations: さまざまなアプローチ/デザインパターンをテストするために、廃棄されたデザインも含みます。

Top ↑

チームライブラリ チームライブラリ

チームライブラリを使って、WordPress.org のチームファイルやプロジェクト全体でこれらのリソースにアクセスすることができます。これにより、規模に応じて一貫したブランドとスタイルを維持することができます。

これは共有された Figma ライブラリであり、そのコンポーネントは他の人が使用することを意味します。コンポーネントに貢献している場合を除き、変更を加えないでください(「コンポーネントへの貢献」を参照してください)。質問は、このページの下部にあるフィードバック・セクションを参照してください。

Top ↑

WordPress Foundation(WordPressの基礎) WordPress Foundation(WordPressの基礎)

→ プロジェクト全体のビジュアルデザインを構成するコアな要素。これらはデザイントークン(変数のようなものですが、デザインのためのものです!)であり、一度確立してしまえば頻繁に変わることのないコアスタイルです。

色、タイプスタイル、アイコン、スペーサーなど

Top ↑

WordPress Components(WordPressのコンポーネント) WordPress Components(WordPressのコンポーネント)

このライブラリには、@wordpress/components npm パッケージに含まれるベース UI コンポーネントをミラーリングした、利用可能な Figma コンポーネントが含まれています。これらのコンポーネントは安定しており、完全にサポートされており、プロジェクトですぐに使用することができます。@wordpress/components は、Gutenberg repo で公開されている npm パッケージです。

Component のドキュメント: https://developer.wordpress.org/block-editor/

Top ↑

WordPress Patterns(WordPressのパターン) WordPress Patterns(WordPressのパターン)

→ 個々のUIコンポーネントを組み合わせた大きなパターン。

ブロック、ナビゲーションバー、グーテンベルクのサイドバーなど。

Top ↑

Utilities(ユーティリティ) Utilities(ユーティリティ)

カバー、付箋、図表、ワイヤーフレームのコンポーネントなどを格納しています。

Top ↑

貢献のワークフロー 貢献のワークフロー

Top ↑

コンポーネントへの貢献 コンポーネントへの貢献

WordPress コンポーネント

Top ↑

参考文献 参考文献

ブロックエディターハンドブック https://ja.wordpress.org/team/handbook/block-editor/

ブロックサポートドキュメンテーション https://wordpress.org/support/category/block-editor/

原文: https://make.wordpress.org/design/handbook/get-involved/tools-figma/
翻訳 GitHub: https://github.com/jawordpressorg/design-handbook/blob/master/design/get-involved/tools-figma.md

最終更新日: