ツール: Figma

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

概要

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

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

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

Top ↑

はじめに

Top ↑

Figmaにアクセスする方法

WordPress Figma ライブラリは公開されており、誰でも見ることができます。新規または既存のプロジェクトにデザインを提供するために編集権限が必要な場合は、Making WordPress Slack#designチャンネルに連絡してください。

Top ↑

Figmaを学ぶ

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

Top ↑

構造

Top ↑

Projects

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

Top ↑

プロジェクトの命名

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

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

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 デザインライブラリ

これまでの3つのライブラリを1つの単一ファイルにまとめました。コンポーネント、スタイル、アイコンが含まれています。

Top ↑

貢献のワークフロー

Top ↑

コンポーネントへの貢献

https://make.wordpress.org/design/handbook/get-involved/wordpress-components/

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

最終更新日: