Kotakiの記事一覧

機能２：デザイントークンのエクスポート・インポート

Variables（一部LocalStyles）として構成されているFDSのデザイントークンを、JSONファイルとしてエクスポート/インポートできます。エクスポートフッターメニューの「エクスポート」ボタンを押すと、現在プラグイン上に読み込まれているデザイントークン情報を、JSONファイルに出

機能１：カラーテーマのカスタマイズ

FDSには、Primary Color, Secondary Color のようにプロダクト上で利用するカラーテーマがあらかじめ設定されています。本プラグインを利用することで、このカラーテーマを変更して、自社のコーポレートカラーに合わせたり、好みの色味に変更したりできます。※ プラグイン上でカラ

プラグインのインストールから起動までの手順

FDSを複製し、自分のプロジェクトへ移動する 公開されているFDSは読み取り専用であり、編集できません。先ずはFDSを複製して自社用のファイルを作成してから編集などの作業を始めてください。 FDS UI Kit（最新version推奨） Figmaファイルの複製は、ヘッダーのファ

FDS – Design Tokens Plugin 概要

「Fixel Design System」（通称、FDS）のデザイントークンは、Figmaの「Variables」として登録管理されています。Variablesには、デザインで利用する各種値（色・サイズ・エフェクト）が、トークン名と値のセットとして登録されています。これら設定値を１つずつ変更してい

UIコンポーネントのページ構成

UIコンポーネントサイドメニューの「…」からコンポーネントの作成が可能です。 デザインシステムで使用可能な「UIコンポーネント」を作成できます。UIコンポーネントの構成コンポーネントはコンポーネントフォルダの子階層にのみ作成できます。UIコンポーネントは次の内容で構成されて

デザインシステム登録

デザインシステムの作成パターン新しくデザインシステムを作成する3つの方法を紹介します。①ワークスペース内に新規作成ワークスペースを指定してデザインシステムを新規作成します。空の状態のデザインシステムを作ることができます。※最大３つまでのデザインシステムを作成することができま

FigmaでStyle作成（UXHub連携用）

FDSを使ったデザインプロセス①色やフォントをカスタマイズする -- Design Tokensを定義する基本的なTokensはあらかじめ用意されておりFigma Stylesに登録されていますが、プロダクトに使用するカラーパレットやフォントを決めてFDSのDesign Tokens(Fig

FigmaでUXHubプラグインを使用してStyle作成

主な機能Figmaで定義されているStylesの読み込み、編集画面デザイン、 コンポーネントを見ながら色を調整することができます。自動生成・自動登録Primary Mainさえ指定すれば必要な色を必要なスケールで自動生成し、Stylesにも登録してくれます。Secondaryは9

サンプルページの作成

ページの作成サイドメニューの「…」からレイアウトフォルダページの作成が可能です。 ページから、「コンポーネント」で作成したUIコンポーネントを使ったページのサンプル画面を作成できます。ページの編集と保存ページの編集各ページの右上にある「編集」ボタンを押すと編集モー

Figmaからデザイントークンをインポート

UXHubではプラグインを通して、Figmaで定義したカラーなどをUXHubにデザイントークンとしてインポートすることができます。注意点や手順を下記にて説明します。利用上の注意旧プラグイン（UXHub Plugin）との互換性旧プラグイン（UXHub Design Token