本文へスキップ
craft apps
← ツール一覧へ
FiFigCraft画像・デザイン

FigCraft UIデザイン

ブラウザーのデザインスペースで、インターフェースの画面やレイアウトをスケッチできます。

作業分野・ファイル形式UI・デザイン
FigCraftエディターのプレビュー
FigCraft:モバイル画面とレイヤーツリー。

元のプロジェクトの作例です。このブラウザー版とは機能や画面構成が異なる場合があります。

画像の出典

FIGCRAFT / UI・デザイン

FigCraftでできること

新しいドキュメントに図形と文字を置き、小さな画面構成を試してみましょう。このブラウザー版で使える機能の範囲で、デザインの方向性を考えられます。

使いはじめる前に。

Web版は新規ドキュメントから開始します。ネイティブのファイル選択画面は未接続のため、デスクトップと同じ読み込みはできるとは限りません。当サイトは共同編集サーバーやクラウド保存を追加していません。大きな制作の前に保存方法を確認してください。

エディターのプレビュー

作業スペースを見てみよう

元のプロジェクトのスクリーンショットで、画面と作業例を紹介します。このWeb版とは操作や対応形式が異なる場合があります。画像を開くと全体を確認できます。

01 / FigCraft

画面どうしのつながり

オンボーディング画面が線で結ばれています。流れを説明する作例であり、この環境ですべてのプロトタイプ機能が使える保証ではありません。

FigCraftの接続されたオンボーディング画面。
FigCraftの接続されたオンボーディング画面。
02 / FigCraft

図形とパス

ベクター図形の点とハンドルが表示され、輪郭から形を調整する方法がわかります。

FigCraftのベクターポイントと曲線ハンドル。
FigCraftのベクターポイントと曲線ハンドル。
03 / FigCraft

グリッドと情報の優先順位

グラフと情報ブロックを列のグリッドに配置した作例です。数値はデモ用で、実際のアクセス解析ではありません。

FigCraftの列グリッドを使ったダッシュボード。
FigCraftの列グリッドを使ったダッシュボード。

FigCraftの作業ツール

FIGCRAFT / 01—03
01

インターフェースの構成

02

図形とレイアウトの検討

03

新規ドキュメントでの作業

FigCraftではじめてみよう

01 /

小さなプロジェクトで試す

Web版で新しいドキュメントを作成してください。

02 /

ひとつだけ変更する

図形と文字を並べ、余白と情報の優先順位が伝わる画面をつくります。

03 /

保存して結果を確認する

Web版は新規ドキュメントから開始します。ネイティブのファイル選択画面は未接続のため、デスクトップと同じ読み込みはできるとは限りません。当サイトは共同編集サーバーやクラウド保存を追加していません。大きな制作の前に保存方法を確認してください。

FigCraftをブラウザーで試す

小さなプロジェクトからはじめ、元のファイルは別に保管してください。大きな制作の前に、使える保存方法を確認しましょう。

FigCraftを開く

ご利用の前に

FigCraftについてよくある質問

無料ですか?アカウントは必要ですか?

基本のブラウザーエディターは無料で、登録なしで開けます。任意で利用する外部サービスには独自の条件がある場合があります。エディター内部の操作画面は現在英語です。

どの端末で使うのがおすすめですか?

キーボードとマウスを使える最新版のデスクトップブラウザーをおすすめします。スマートフォンの対応状況は異なり、このページの動作確認はデスクトップのみが対象です。

最初は何を使えばよいですか?

Web版で新しいドキュメントを作成してください。

保存前に何を確認すべきですか?

Web版は新規ドキュメントから開始します。ネイティブのファイル選択画面は未接続のため、デスクトップと同じ読み込みはできるとは限りません。当サイトは共同編集サーバーやクラウド保存を追加していません。大きな制作の前に保存方法を確認してください。

ギャラリーはこのサイトの画面ですか?

ギャラリーは元のプロジェクトの作例です。想定された作業を紹介するもので、このブラウザー版のファイル互換性を保証しません。当サイトで実施した確認結果は別に表示しています。

すべての形式を検証済みですか?

いいえ。形式名はツールが扱う分野を示します。確認済みといえるのは、日付付きの結果がある操作のみです。ほかのファイル、効果、書き出しは個別の確認が必要です。