有料版ではここに
ウィジェットを設置可能

Day 1

2019 9/24
有料版ではここに
ウィジェットを設置可能
目次

Work day 1

今日から本格的に作業スタートです!
1日目の本日やることはこちら

  • ヒアリング項目の確認
  • Figmaの基本操作・できることを調べる
  • Figmaでの作業前準備

それでは、各作業をしつつやったことを書きなぐっていきたいと思います!

ヒアリング項目の確認

こちらのサイトを参考に、不足している項目をピックアップ。

root blog | root inc. Webサイト...
Webデザイン制作のために、絶対に質問すべき64のコト | root inc. WebサイトやアプリのUI/UXデザイン会社
Webデザイン制作のために、絶対に質問すべき64のコト | root inc. WebサイトやアプリのUI/UXデザイン会社クライアントのイメージどおりのページを作るのは、そう簡単なことではありません……。しかし、ローンチ直前の大直しや仕様変更は誰だって避けたいもの!そんなことにならな...

Figmaの基本操作・できることを調べる

note(ノート)
Figmaの使い方、全力でまとめました。|hikaru-takase / Retty|note
Figmaの使い方、全力でまとめました。|hikaru-takase / Retty|note 最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまと...
note(ノート)
FigmaではじめるUI(Web)デザイン|Part1|Nao Komura|note
FigmaではじめるUI(Web)デザイン|Part1|Nao Komura|note Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良...
note(ノート)
FigmaではじめるUI(Web)デザイン|Part2|Nao Komura|note
FigmaではじめるUI(Web)デザイン|Part2|Nao Komura|note Part1ではUIデザインの下準備として簡易的にデザインシステムを作りました。 ただ、前回作ったものはデザインシステムの空箱でしかありません。 空箱という言葉が...
利益を上げる大阪のホームページ制...
UIデザインツールFigmaのプロトタイプ機能を使ってみる
UIデザインツールFigmaのプロトタイプ機能を使ってみる昨今様々なUIデザインツールに搭載されている「プロトタイプ」機能ですが、もちろんFigmaにもあります。今回はFigmaのプロトタイプ機能のご紹介です。
利益を上げる大阪のホームページ制...
UIデザインツールFigmaのグラデーションマスクの作成方法
UIデザインツールFigmaのグラデーションマスクの作成方法UIデザインのためのアプリで中々使い勝手が良いのが「Figma」です。今回はFigmaでグラデーションを使用したマスク作成方法をご紹介したいと思います。
note(ノート)
FigmaにPluginがついに来たのでよさそうなものをご紹介|ふじけん / kenshir0f|note
FigmaにPluginがついに来たのでよさそうなものをご紹介|ふじけん / kenshir0f|note こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグ...
chot.design
UI/UXデザインツール『Figma』入門 | chot.design
UI/UXデザインツール『Figma』入門 | chot.designリアルタイムで共同編集ができる新しいデザインツールとして注目を浴びる「Figma」について学べるカリキュラムです。チームでアプリやWebサービスを作っている現場におすす...

FigmaではFont Awesomeを使うこともできます。

ショートカットは常に下部に表示しておくことが可能。

プロトタイプ時の、ページ内リンク、ページ内スライド、モバイルメニューの表示の仕方が調査不足なので確認しておきたい。

Figmaでの作業前準備

上記を参考に試行錯誤しながら、プロトタイプを作成しました。

Draftsのなかに、作成するサイト名のファイル?を作成し、その中で以下のようなページを作ります。

  • color
    →サイトで使用するカラー見本をまとめたページ。
  • parts
    →ヘッダーやナビゲーションなど、サイト全体を通して使用するパーツを置くページ。ここのパーツをコンポーネントしてコピペ使用することで、変更があった際に一括で修正できる。
  • PC
    →PCのプロトタイプ用ページ。
    この中に複数で、Frame=サイトの1ページ分としてワイヤーフレームを作成。
  • tablet
    →タブレットのプロトタイプ用ページ。
    この中に複数で、Frame=サイトの1ページ分としてワイヤーフレームを作成。
  • mobile
    →スマホ用のプロトタイプ用ページ。
    この中に複数で、Frame=サイトの1ページ分としてワイヤーフレームを作成。

本日のまとめ

Figmaでできるとこがそもそもわかっていないので時間がかかってしまった…。1日では終わらず、実は2日かけてしまってます。

プラグインも出ているようで、使いこなせたらかなり便利そう。

引き続き調べながらプロトタイプを作っていこうと思う。

有料版ではここに
ウィジェットを設置可能
有料版ではここに
CTA用ウィジェットを設置可能

関連記事

コメント

コメントする

目次