battaのブックマーク - はてなブックマーク

batta id:batta

ブックマーク / zenn.dev/seya (2)

エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。ユースケースを考えるまず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。デザインを元に実装する時デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃうこの辺りがあるかな〜
batta 2022/01/24
prototyping

designsystem
リンク
新時代のCSS三角の作り方 clip-path 〜さらば、すべての border 〜
CSSで三角を作る方法と言えば border でした。私も三角を作りたい時は「css 三角」で検索、コピペして調整して作っていました。ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。どこの点を結ぶかは clip-path で指定して、高さと
batta 2021/04/02
css
リンク
1