Figmaで作るWebデザイン:第1回

こんにちは、デザイナー・イラストレーターの志摩です。

これからFigmaを始める方向けに順を追って記事を書いていこうと思います。

完成形

最終的な完成形はこちら

この様な病院サイトのWEBページを目指して作成していきます。

作成準備

Figmaを立ち上げ、「Drafts」の中で新規デザインファイルを作成していきましょう 「New design file」をクリックします。

何もないキャンバスが作られましたか? これで準備完了です。

フレームを作成

まずはフレームを作成します、これはPhotoshop、Illustratorでいうアートボードと考えて問題ありません。

ショートカットキー「F」にて画面をドラッグすれば作成完了です、大きさは適当で構いません。

それではヘッダーの作成にかかりましょう!

ヘッダーの作成

必要素材の準備

ヘッダーに必要な「ロゴ」、「メインメニューの項目テキスト」、「電話番号」、「診療時間」などを準備します。

こんな感じでOK

メインメニューの作成

メインメニューから作りますが項目をひとつずつテキストレイヤーで作成する必要はありません。

先程つくった改行にて縦並びになっているレイヤーを分割して作成します。

分割するプラグインが必要なのでこちらからダウンロードします。
https://www.figma.com/community/plugin/739048247603902878/Nisa-Text

プラグインを走らせた上で先程の縦並びレイヤーを選択してショートカットキー「command + /」をクリック

こんな検索窓が出てくるので「split」を入力。

この中から「auto layout」付きの分割メニューをクリックします。

一見何も変わりありませんがレイヤー構成がFrameになり分割されていることがわかります。

画面右側にある「Auto layauto」の設定箇所からレイアウトの向きを横に変更します。 すると…。

横並びになりました。

さらに「Auto layauto」の設定箇所から各項目間のマージンを40pxにすればメインメニューの完成です。
上図を参考に設定してみてください。

「Figmaで作るWebデザイン:第2回」に続きます。

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。