はてなブックマーク

はじめに みなさんは、FigmaのREST APIでは、何が取得できるの？と思ったことはあるでしょうか？ この記事ではそんな、FigmaのREST APIについて紹介しようと思います。 Figma の REST API とは？ Figma APIは、Figmaファイルへの読み取りとインタラクションをサポートしています。 これにより、オブジェクトやレイヤー、それらのプロパティを表示、抽出することができ、Figmaの外部で画像としてレンダリングすることができます。 そうすれば、デザインをプレゼンテーションしたり、他のアプリケーションに接続したり、ビジョンを拡張するために使用したりすることができます。 （引用：Figma API） Figma の REST API で出来ること ⚪︎ 認証 Figma内のエンドポイントにアクセスする前に、有効な認証を提供します。 Figma APIへのリクエスト

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに みなさんは、Figmaのプラグインを作ろうとしたことがありますか？ 私は、デザインテクノロジストとして、デザイナーの業務効率化をしようとFigmaのプラグインの作り方を調べていたら、JavaScriptか、TypeScriptが触れれば、意外と簡単に開発することができるのだとわかりました。 そのため、この記事では、Figmaプラグインの作りの第一歩である、セットアップの方法についてまとめます。 この記事では、以下の公式ドキュメント通りに、できるだけわかりやすく、初心者でもわかりやすくまとめようと思っています。 この記事を読みながら、詰まったところがあれば、コメントで教えていただけたら、記事を更新していきたいと思っているので、ぜひコメントもお願いします。 事前準備 Figmaのプラグインを作るにあたって、まずは、事前準備です！ 事前準備で用意するのは以下の通りです。 ① Figma

はじめに みなさんはFigmaのDevモードを使っていますか？ FigmaのDevモードは、2023年6月21日にベータ版として公開され、一部機能をアップデートして、2024年2月1日に正式リリースされました。 正式リリースされてから、2ヶ月ほどたち、いろいろDevモードを使ってみた感想を紹介しようと思います。 Dev Mode（開発モード）とは？ Dev Mode（開発モード）は、デザイナーとエンジニアのハンドオフを最小限に抑えるためのツールが使えるモードです。 Dev Modeでは、以下の機能を使うことができます。 アノテーション（Annotation） 測定値（Measurement） 開発準備完了（Ready for dev） 変更差分（Compare changes） Qiita株式会社のDev Mode（開発モード）事情 Qiitaでは、まだエンジニアにDev Mode（開発モ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに プロダクトマネージャー (PdM)は、プロダクトの中長期的な戦略の立案・ビジョン構築・プロダクトのビジネス、開発、UXの全てのプロセスに関わり、プロダクトに関係する意思決定の責任を持つ職業です。 そのため、PdMが明確なビジョンや戦略がないまま、プロダクトの改善をつづければ、プロダクトが肥大化したり、方向性を失ったり、誤った数字に引っ張られたりするようになります。 このような状態にならないため、この記事ではPdMが注意すべきプロダクト病について紹介します。 プロダクト病とは？ ⚪︎ ヒーロー症候群 ヒーロー症候群は、インパクト

はじめに 先日、Chrome 117がベータ版としてリリースされ、新たな6つのCSS機能が追加されました。 追加された6つの機能は以下の通りです。 アットルール @starting-style CSSトランジションの開始時のスタイルを指定するための新しいアットルールです。 transition-behavior プロパティ CSSトランジションの動作を制御するためのプロパティーです。 overlay プロパティ 最上位レイヤーでCSSトランジションが行われるようにするプロパティです。 CSS grid の subgrid プロパティ CSSグリッドのサブグリッドを制御するためのプロパティーです。 text-wrap プロパティの値 pretty テキスト折り返すためのプロパティにperttyが追加されました。 contain-intrinsic-size プロパティの値 auto と no

はじめに みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 今まで、このようなアニメーションを実装するには、JavaScriptを使っていたので大変でした。 しかし、Chrome 115で使えるようになった、scroll-driven animationsを使うと、CSSだけでスクロールに合わせたアニメーションを作れるようになります。 この記事では、そんなscroll-driven animationsを使って、パララックスを再現したので紹介します。 パララックス（parallax）について まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイト

はじめに みなさんは、scroll-driven animationsを知ってますか？ scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたアニメーションが作れるようになるものです。 今までは、JavaScriptなどを駆使してスクロールアニメーションを作っていましたが、これから、CSSだけで、簡単に作れるようになるようです。 この記事では、そんなスクロールアニメーションでsampleを作ってみたので紹介します。 Sample シンプルな例 1 ページ全体のスクロール量に合わせて、<div>のスケールを変えている See the Pen CSS Anchor Positioning - sample 02 by でぐぅー | Qiita (@sp_degu) on CodePen. シンプルな例 2 アニメーションする要素が画面に入っ

useLayoutEffetより先に実行してくれるのがいい。 レンダリングの処理は以下のようになっており、useInsertionEffect は、useLayoutEffet が実行される前に実行されます。 useLayoutEffetは、画面の描画する前に実行するため、useEffectのちらつきを解決してくれくれる便利なHooksです。 useLayoutEffectの処理と同じタイミングで、CSS in JSのスタイル挿入をしてしまうと、変更前のスタイルで、useLayoutEffectの処理が行われ、useLayoutEffectで意図した通りに処理が行われません。 そのため、更新されたスタイルで、useLayoutEffectを実行させるためにも、useInsertionEffectを使ってスタイルを挿入してあげるのが良いのです。 sample sampleでは、ボタンを押すと

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Va

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに みなさんは、Container Queriesを使いこなせていますか？ Container Queriesを色々試していた時に、「CSS Grid と Flex Boxの子要素にContainer Queriesを使ったら、子要素の幅がなくなるバグ」に出会ったのでバグの原因と解決策を紹介します。 Container Queries とは？ Container Queriesとは、親・祖先要素のスタイルに合わせて、子要素のスタイルを変更することができるアットルールです。 Container Queriesには、「Container size Queries」と「Container style Queries」の2種類あります。 ○ Container Size Querie Container size Queriesは、祖先要素のサイズに応じてスタイルを指定することができるアット

はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? デザインシステムとは？ 簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。 具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。 そのため、デザインシステムを導入することで、 1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、 大規模なプロダクトやサービスをチームで開発・運用していくのが効率的になります。 また、デザインとコードの両方で一貫性のある

はじめに みなさんは、CSS Maskingを使いこなせていますか？ CSS Maskingは、デザイン性の高いLPや特設サイト等ではよく使うかもしれませんが、 Webプロダクトだとちゃんと触る機会が多くないプロパティだと思います。 そのため、この記事ではWebプロダクトでも使えるCSS Maskingを使ったUIを紹介しながら CSS Maskingについて解説します。 CSS Maskingとは？ CSS Maskingとは、任意の形に要素を切り抜けるプロパティになります。 似たような任意の形に要素を切り抜けるclip-path プロパティとの違いは、SVGで任意の形に切り抜けるだけでなく、mask-imageで任意の画像や透明度に応じた切り抜きが行えることにあります。 この記事では、mask-imageにlinear-gradientでグラデーションを使用することで、フェードアウトす

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさんはちゃんとアクセシビリティを意識して開発できていますか？ 必要なところに role属性 を記述したり、tabキーでフォーカスが当たるようにしたりなど、意識しないといけないことも多いです。 そのため、完璧にやろうとするのは難しいと思います。 ただ、モーダルUIやタブUIといったコンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすくアクセシビリティについて意識しやすいです。 そのため、この記事ではタブUIのコンポーネントに焦点を当てて、 アクセシビリティを意識したタブUIの実装方

はじめに 今までCSSは、「特定のバージョンしか使えない」や「特定のブラウザだと使えない」が 新しいプロパティが公開されても、使えないことが多々ありました。 そのため主要なブラウザの関係者が集まり、Web開発者の開発体験を向上させるための取り組み、「 Compat 2021」・「Compat 2022」が行われていました。 このような取り組みが2023年も引き続続いていくようです。 この記事では、Compat 2022に引き続き、Interop 2023で解消されるCSSプロパティについてまとめました。 こんなものがもうすぐ使えるようになるんだな...みたいに思っていただけると嬉しいです。 目次 Border Image CSSの色空間と関数 コンテナクエリ Containment 擬似クラス カスタムプロパティ フレックス ボックス CSS 数学関数 まとめ 1. Border Imag

はじめに みなさんは、ピクチャーインピクチャーをご存じですか？ 動画やビデオ通話系のサービスやアプリではよくみますが、他の用途ではあまりみませんよね！ それもそのはずで、今までのピクチャーインピクチャーは、<video> 要素でのみ使うことができました。 ですが、Chrome 111 以降では、documentPictureInPictureを使うことで、<video> 要素以外の任意の要素をピクチャーインピクチャーさせることができるようになります。 今までできなかった <audio> や <img>のような要素をピクチャーインピクチャーさせることができるようになるので、CDジャケットを表示させながら音楽を再生させたりでき、webサイト上でできることが広がります。 そのためこの記事では、そんな documentPictureInPictureを使ったピクチャーインピクチャーについて紹介しま

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更され、ビューポート単位にLarge viewport、Small viewport、Dynamic viewportといったビューポートサイズの単位が追加されました。 この新しいビューポート単位は、ほとんどのブラウザの最新バージョンでは使えるようになりましたが、 Can I use でどのくらいのユーザーが対応しているかを確認してみると、2023年2月1日時点で、22%のユーザーは、ちゃんと表示されない状

はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、displayプロパティに2つの値を入れることができるようになることがわかりました。 ※ まだ、Firefox 70以上・Safari 15以上でのみ再現できます。(2022年１月20日) そのため、この記事では、displayプロパティに2つの値を入れられることについて解説しようと思います。 背景 まずは、displayプロパティに2つの値を入れられるようにした背景について解説します。 最近displayプロパティに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに としが明け、2023年になり、2022年を振り帰ったり、今年の目標を立てている頃でしょうか？ みなさんは2022年どんな1年でしたか？ この記事では、2022年に話題になったWebサイトをまとめて、 みなさんの振り返りや今年の目標や勉強することの参考にしてみてはいかがでしょうか？ POLA https://www.pola.co.jp/wecaremore/mothersday/ 母の日に合わせて公開された↑この特設サイトは、スクロールに合わせて、だいぶスムーズに花がアニメーションしていくサイトです。 一回サイトに訪れると、そ

Qiitaで使っているアイコンをFont AwesomeからMaterial Symbolsに変えた話。CSSUIDesignTypeScriptフロントエンド はじめに Qiita株式会社 Advent Calendar 2022の3日目は、 Qiita 株式会社 プロダクト開発G デザインTMの出口（@degudegu2510）が担当します！ 普段の業務は、Qiita, Qiita Team, Qiita Jobsでデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっています。 現在Qiitaでは、アイコンフォントをFont AwesomeからMaterial Symbolsへと順次移行しています。 移行を進めていく中で、大変だったことやそこから得た知見が多くありました。 そのためこの記事では、アイコンフォントをFont AwesomeからMateria

はじめに みなさんは、どんなトレーディングカードゲームをやったことがありますか？ 僕が触れたことがあるトレーディングカードゲームは、遊戯王、デュエマ、ポケカくらいですが、他にも、1993年からあるマジック:ザ・ギャザリングや最近のワンピース などなどいろいろなトレーディングカードゲームが存在します。 それらのほとんどのトレーディングカードゲームには、カードにレアリティと呼ばれる希少度の段階があるため、カードゲームで対戦するだけでなく、コレクションされたり、高額になったりと奥が深いです。 今回は、そんなカードゲームのレアリティを表現をCSSとJavaScriptを使って、ホバーするとキラキラ光って見えるカードを作っていこうと思います。 完成形 完成形は、↓こんな感じです。 See the Pen Light Card by でぐぅー | Qiita (@sp_degu) on CodePen

はじめに みなさんは、WAI-ARIAを知っていますか？ 私は、スクリーンリーダーでも読めるようにするため、aria-label を使ったり、 roleを使って、要素の役割を明確にしたりなど業務でよく使うものは、理解しているつもりです。 ただ他にどんな種類のWAI-ARIAがあるか、その役割はなんなのか、 いまいちわからないなと思っていませんでした。 なので今回は、調べたWAI-ARIAについて、まとめたので、ぜひご覧ください。 私の理解度は↓この位置です。 ご注意ください。 WAI-ARIA WAI-ARIAとは？ WAI-ARIAは、Web Accessibility Initiative Accessible Rich Internet Applicationsの略で、アクセシビリティ向上の目的で、W3Cが定めた仕様です。 また、WAI-ARIAをつかうことで、HTMLで表現できない

はじめに みなさんは、<select> タグを使う時、<option> をいい感じのデザインしたいと思ったことはないでしょうか？ 多くの方は、妥協して、<select> タグを使うか、ライブラリーを使うか、 <div>・<button>などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？ 実は、Open UIから提出された、セレクトボックスのプルダウンをデザインするための草案が、 Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、<selectmenu> が公開されました。 そのため、この記事では　<selectmenu>　の具体的な内容の紹介と実装方法の解説を行います。 動作環境 <selectmenu> は、まだ実験的なものであるため、限られた環境で再現できます。 そのため、<selectmenu> が動いているの

<!-- 〇〇の部分に役割を記入します。 --> <div role="〇〇">...</div> <!-- 例: mainの役割の場合 --> <div role="main">...</div> 抽象役割 抽象役割は、一般的な役割概念を定義する目的で使われます。そのため、コンテンツに抽象役割を使用してはいけません。 command アクションを実行するが入力データを受信しないウィジェットのフォーム。 composite ナビゲーション可能な子孫または所有する子を含むことができるウィジェット。 input ユーザー入力を許可するウィジェットの一般的なタイプ。 landmark ナビゲーションのランドマークとして意図されるページの領域。 range ユーザーによって設定可能な値の範囲を表す入力。 roletype この分類で他のすべての役割が継承する基本役割。 section 文書またはア