エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由｜seya
フロントエンドエンジニア目線で Web のデザインには Illustrator や Photoshop ではなく Figma を使ってほしい理由 こんにちは。Figma 大好きフロントエンドエンジニア、seya と申します。 最近大きくシェアを伸ばしている Figma ですが、デザインが Figma で作られていると Illustrator (以下イラレ)や Photoshop などと比較してかなり実装しやすいと言う実感があります。個人的には後者のツール群はグラフィックのデザインツールであって Web のデザインツールとしては適していないと考えています。 なので、この記事ではフロントエンドエンジニア目線で Figma の何が嬉しいのかを語っていきます。 また、若干片方の群を落とすような主題で予防線はるのアレなのですが、イラレなどをデザインカンプとして実装に取り組んだ経験が3サイトくらいしか
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
