こんにちは、現在Web制作歴6年のしょーごです。
今回は『Figmaからのコーディング方法』を解説していきます。
Figmaはとても直感的に操作できるので、Photoshopからのコーディングなどに比べて格段に簡単だと思います。
既に世界で一番使われているデザインツールです。
日本では謎に制作会社がまだPhotoshop、イラレでUI作ってたりしますが,,,
今後日本でもどんどん主流になっていくと思われるので、しっかり学習しておきましょう。
今回は私が無料配布しているFIgmaのコーディング練習課題を参考に見ていこうと思います。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
今回使用する無料Figmaデザインカンプはこちら
＼Figmaからのコーディングを練習してみる／
Figmaはソフトいらず！Webで見れる
これまでのデザインカンプはソフト(アプリケーション)をダウンロードして、自分のPCに入れて初めて、デザインデータが開けるというものでした。
Adobe XDでもXDデータが送られてきたら、XDアプリを持っていないと開けません。
しかし、FigmaならURLを知っていれば、誰でもデザインを見ることができます。
逆に、誰でも見れてしまうので、デザインのURLは外に共有してはいけません。
Figmaについての重要な前提事項
❶Figmaでは他の人のカーソルの動きが見えます
Figmaでは、他の人の名前やカーソルが表示され、びっくりされるかもしれませんが、これは正常なので問題ありません。
Figmaはチームでデザインすることを思想としているので、みんなでコーディングをしている気分を味わえると思います。
❷通常モードと開発モード(2024年より有料)があります
Figmaの右上にはトグルがあり、通常モード(デザインモード)と開発モード(デベロップモード)を切り替えることができます。
使いやすいのは開発モードですが、開発モードは有料です（2024年1月31日より）
開発モードは、Figmaのプロフェッショナルプランでないと使うことができなくなりました。
開発モードのために、毎月1,800円を払う選択肢は、多くのコーダーは取れないのではないかと思います。
デザイン制作者がFigma有料プランだとしても、デザイン閲覧者分も支払わないと開発モードは使えないため、通常モード（デザインモード）で開発を行えるようにしておくといいかと思います。
開発モードは便利ですが、多くのクライアントはお金を払えないかも。。。
ちなみに、デイトラWeb制作コース
の受講生は2年間無料でプロフェッショナルプランを使うことができます。すごすぎ。
❸「編集を依頼」はコーダーは押さないのがおすすめ
めちゃくちゃ押しやすい場所に「編集を依頼」ボタンがありますが、依頼しても権限を渡せる場合はほぼありません。
なので、「うまくFigmaが使えないから編集を依頼する」みたいなムーブは避けたいですね^^;
「編集を依頼」は基本的に押さないようにお願いします（共同編集を依頼された場合を除く）
デザインデータから取得するもの
- 画像、アイコンなど
- フォント情報
- 余白
- 影や丸み、色など
Figmaからのコーディング手法
①画像の取得
まずは取得したい画像を選択してください。
その後は、右側の「エクスポート」から画像を書き出します。
通常モードの場合、以下の画面になります。
画像を選択してから、エクスポートを探して下さい。
- PNGは『アイコンや透過画像など。容量が重くなりやすい』
- SVGは『アイコンなどで、pngより画質が荒くならない、軽いなど特徴。ただしXFREEなど無料サーバーだと表示に対応してなかったり』
- PDFは基本コーディングには使わない
- JPGは『写真』。『写真＝JPG』で基本問題ないはず。
②余白の確認
余白を測りたい要素を選択した後、
Macの場合：optionをクリック
Windowsの場合：Altをクリック
すると距離が表示されます。カーソル位置によって測定される箇所が変わります。
【重要】Figma開発モードについて
ちなみに、まだリリースしたばかりですが、「開発モード」にするとクリックするだけで余白が取得できるようになります。
画面右上のトグルをクリックして開発モードにできます。
また、画像のダウンロードは以下の場所より行なえます。
これは鬼便利というか、元から欲しかった…
③フォント周りの確認
Figma通常モードと開発モードのときで画面が異なるので、順に解説します。
- font-family
- font-weight
- font-size
- line-height(この場合22.4 / 16 = 1.4になる)
- color
- font-family
- font-size
- font-style
- font-weight
- line-height
もし、line-heightが150%などとなっていたら、line-height: 1.5;とします。
確認箇所が多いですが、フォント周りはミスが多いので、綿密に確認しましょう。
④影や丸みの確認
- border-radius
- box-shadow（ドロップシャドウ）
通常モードではborder-radiusの位置がややこしいです。
box-shasow（ドロップシャドウ）は、RGBで見ることをおすすめします。
もし使われてるフォントがGoogle Fontsの場合
Noto Sans JPを例に、実際のフォントの読み込み方を解説しています。
Figmaは直感的で難しくない
実際に触ってみるとすぐに慣れることができます。
デザインデータの数値に厳密にコーディングを行うためにも、しっかりと使い方を練習しておきましょう！
＼Figmaからのコーディングを練習してみる／
このサイトでは他にもFigma以上に難関なPhotoshopからのコーディングなども解説しているので、覚えておくといいかと思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
