この記事の概要 2024年8月15日に社内で開催したFigmaのCode Connectについての勉強会の資料です。 社内だけに閉じる必要もなかったので、Qiitaにて記事として公開しました。 Code ConnectはReact, React Native, SwiftUI, Jetpack Composeに対応しています。 今回紹介するのはReactでの内容です。 コンポーネントの準備 Code Connectを実施する前に、Figmaデータとしてのコンポーネントと、コードとしてのコンポーネント、両方が必要です。 今回は簡単にボタンコンポーネントでの例を見せます。 Figmaでのpropertiesは以下のようになっています。 Property名 内容

この記事の概要 私は登壇する機会がそれなりに多いです。 そのため、発表資料としてスライドを用意することも多いです。 Keynote にせよ Figma にせよ、基本的には便利この上ないのですがピンポイントで「これはやりづらいな」と思うタイミングもあります。 それが reveal.js だと実現しやすいときもあり、差分について記事にしました。 1 行ずつ表示を増やしたいようなとき こんな感じです。 最近ではスマートアニメーションのような機能がついているので、アニメーション自体は問題ではありません。 文章の数だけ前後のスライドが増えるので、修正がする場合大変でした。 reveal.js の場合はこういったコードを 1 度書くだけで OK です。 複数ページ用意する必要はありません。 Paragraph <p class="fragment fade-up">Fade in 1</p> <p c

import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' + import '@master/css' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode>, ) import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const

この記事の概要 Farm という、Rust 製の Web ビルドツールが登場しました。 v1.0 がリリースされたのが 2024 年 4 月 15 日ということで、かなり新しいツールです。 Vite や Rspack と比較してもかなり速いことを謳っています。 自分の使い方だとどうなるのか気になり、試してみた記事です。 前提 私はデザイナーなので、コードを書くといっても見た目に関する部分がほとんどです。 CSS を書いたり、UI フレームワークを使ったり、画像を配置したり……。 なので、それらを追加したときにどれくらい立ち上げ時間に差が出るのかを中心に調べました。 本来であれば大規模プロジェクト相当のコード量、ファイル量で比較すべきかと思いますが、一旦小さな比較までしかできていません。 あまり役には立たないかもしれませんが、この規模でも多少差は見えてきたので一応投稿しています。

この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。

この記事の概要 @types (DefinitelyTyped) は TypeScript 用の型定義パッケージです。 DefinitelyTyped のリポジトリにはありとあらゆるライブラリの型定義が登録されています。 そのため、特定のライブラリだけの更新差分を見るのには苦労しがちでした。 しかし、NPM Diff を使ったら自分のやりたいことがさっと解決できたので、備忘録がてら記事にしました。 結論 まずは NPM Diff にアクセスします。 ページ下部にこのような領域があるので、目当ての内容を入力します。 例えば、React の型定義の差分を見たいとします。 この記事を書いている 2024 年 5 月 7 日現在の最新バージョンは18.3.1なので、その 1 つ前の18.3.0と比較してみましょう。 入力欄にそれぞれ@types/react, 18.3.1, 18.3.0と入力し、

この状態で、レイヤー数 2 のインスタンスに swap します。 すると、1 つのレイヤーは色の変更が反映されましたが、もう 1 つのレイヤーには反映されていません。 レイヤー数 3 のインスタンスに swap した際も同様に、1 つのレイヤーにだけ色の変更が反映されています。 今度はレイヤー数も揃えます。 具体的には、複数のレイヤーがあるアイコンは Union にしてしまい 1 つのレイヤーとします。 そのままでは Rectangle と Union という 2 種類の名前が生まれてしまうので統一します。 ここでは Rectangle に揃えます。 この状態で、レイヤー数 2 のインスタンスに swap します。 無事、すべての要素に色の変更が反映されました。 レイヤー数 3 のインスタンスに swap した際も同様に、すべての要素に色の変更が反映されました。 条件にあわせて実施すること

この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ

この記事の概要 Starlight は Astro を用いて作られたドキュメント用の仕組みです。 Astro の公式ドキュメントも Starlight を用いて作られています。 使い方を調べてみたいので、備忘録がてら記事にします。 セットアップ 公式ドキュメントには npm, yarn, pnpm でのコマンドが紹介されていました。 今回は pnpm で進めます。1 astro Launch sequence initiated. dir Where should we create your new project? ./project-name ◼ tmpl Using starlight as project template ██████ Template copying... deps Install dependencies? Yes ██████ Installing dep

この記事の概要 Meta 社製の CSS in JS ライブラリである StyleX が登場しました。 2021 年には言及されていたようですが、2023 年 12 月 5 日（現地時間）に一般公開されたみたいです。 普段自分は Vite を使うことが多いので、Vite + StyleX の組み合わせを試してみます。 Vite の準備 まずは作成します。

公式ドキュメントによれば「デフォルトのアクションはより目立つように表示される」とのことで、それを表したのが Figma データでいう「1 番上、あるいは右側のボタンの文字は太い」表現だと思います。 ただ、実際には全部細いウェイトで表示されていることもあれば、キャンセルが太字になっていることもあり、Figma データだけを鵜呑みにすると多少実装と齟齬が出そうです。 学び 今回は SwiftUI で検証していましたが、UIKit だと preferred action がありそちらを設定すれば太字の設定もできそうな気配を感じています（未検証）。 ただいずれにしても、そんな細かい違いまでデザインデータで再現して配布してもらえることは少ないです。1 公式からのデータですらこれなので、非公式に配布されているコンポーネントライブラリなどは信頼し過ぎない方が良いのでしょう。 コードでは取れない引数なのに

絶対やった方が良いこと 「より良くする」ための話ではなく「できていないとダメ」に近い内容です。 マウスカーソルをスライド上の目立つ位置に置かない 画面の目立つ位置に置いてあるのをよく見ます。 以下のようなイメージで、スライドが読みづらくなるので避けましょう。 わざわざカーソルを消すためのユーティリティソフトを入れる必要はなく、画面右端に置いておくだけで良いと思います。 左端だとカーソルが画面内に見えるので右端の方がおすすめです。 不必要な場面でマウスカーソルを動かさない 前の項目と似ていますが、非常によく見ます。 説明のためのポインターとして使う分にはもちろん良いですが、手元が暇なのかクルクルフラフラしているだけのマウスカーソルは美しくありません。 適切な文字サイズや画面解像度、UI の拡大率にする スライドの文字サイズを意識している人は多いと思いますが、ディスプレイの画面解像度やソフトの

発表の際に使ったスライドと台本をそのまま記事にしています。 そのため、表現が口語的な部分もありますがご了承ください。 できるだけ、Web でもネイティブアプリでもクロスプラットフォームでも共通する話にしようと思っていましたが、筆者の知識が Web に偏っているので内容も Web 寄りです。 自己紹介と導入 みなさんこんにちは。 株式会社エイチームのグループ会社である、Qiita株式会社でデザイナーをしている、綿貫佳祐といいます。 プロダクト開発部というデザイナーとエンジニア混合の部署で部長をしています。 こういった出自もあり、製品開発においていかにデザインとエンジニアリングを上手く紐づけるか？について今日はお話します。 「デザインデータが完成したけど、いざ実装しようと思ったらとても大変な内容だった」 「ビジュアル上のこだわりが、実装者にどうしても上手く伝わらない」 こんな悩みを持っている人

この記事の概要 2023 年 9 月 8 日に、Qiita ではダークテーマ UI の提供を開始しました。 Qiita が生まれたのは 2011 年 9 月 16 日で、およそ 12 年の月日を経てダークテーマへ対応しました。 これだけの期間続いているサービスにダークテーマを適用した事例は日本でも少ないと思うので、実施したことを記事にしてみました。 なお、Qiita 特有のコードの話は少なめに、多くの場所で役立ちそうな内容に絞っています。 対象読者 UI デザイナー / フロントエンドエンジニア 現在運用中のサービスにダークテーマを適用したいと考えている人 ダークテーマ単体の作り方は分かるけど、既存の UI に上手く追加する方法が分からない人 実施したこと デザイントークンの更新 モックアップにトークンを適用 ベータ版としての提供 正式版としての提供 デザイントークンの更新 まずはデザイン

Tailwind CSS で Design tokens を継承する（Global tokens と Alias tokens を分ける）ための検証CSSDesignデザインシステムtailwindcssDesignToken この記事の概要 システマチックなプロダクト開発をするにあたり、Design tokens の存在は当たり前になってきました。 その際、以下の図にあるように、いくつかの階層を作って管理するパターンが多いです。 引用: Design tokens - Spectrum こういった考え方を Tailwind CSS で実現しようと思った際に少し苦労したので、備忘録として記事に残しておきます。 なおこの記事では分かりやすくするため colors だけに言及していますが、fontSize や spacing などでも同様です。 検証した環境 次のリポジトリで検証していました。

この記事の概要 ある日、こんなアイコンを作っていました。 svg で書き出しをしたら次のようなコードになりました。 <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0L0 1C2.99988 2 7 5 9.00003 7C11 5 15 2 18 1L17 0C12.9999 1.00006 9 4 9 4C9 4 4.99988 1.00005 1 0ZM1 7.00006L0 8.00006C2.99988 9.00006 7 12.0001 9.00003 14.0001C11 12.0001 15 9.00006 18 8.00006L

この記事の概要 Google Sheetsで以下のようなものを作りたくなったのですが、苦労したので記事にしました。 いわゆるスキルマップ 期ごとにスナップショットをとり、前の期と比べてどの項目が上がったかが分かる 社員番号順に並べたとしても異動や退社で繰り上がりが発生するため、メンバーリストの順番はアテにできない 完成イメージ 現在の期（2023） 前の期（2022） 鈴木がリストから消え、渡辺が追加された これによりリストの並びが同一でなくなった スキルが上がったものは背景色がついた 実施したこと 大雑把に言えば、完成イメージの現在の期（2023）のシートに条件付き書式を設定しただけです。 範囲はB2:F6（スコアの記載されている領域）で、書式ルールは次より大きい、式は以下です。 （本当はインデントなんかありませんが、1行だとあまりにも見づらいのでこのように記しました） =INDEX(

この記事の概要 PostCSSのプラグインであるPostCSS Preset Envをご存知でしょうか。 "Use tomorrow’s CSS today!"というキャッチフレーズが示す通り、まだ正式な仕様になる前のCSSを色々と使うことができます。 CSS関連の勉強会などに登壇すると「普段どこからインプットしていますか？」と質問されることがあり、学ぶ先の1つとしてPostCSS Preset Envがあるので紹介してみます。 Features CSSでは策定段階がStage 0から4まであります。 数字が高いほど仕様として固まっていて、低いほど変更や破棄になる可能性が高いです。 Stage 2でも「一部のブラウザでは使用できるけど、まだ動かないことも多い」くらいで、実用的と言えるのはStage 3からでしょうか。 そんな中でも、PostCSS Preset Envを使えばStage 0

この記事の概要 デザインデータの中には大抵「自前で実装するのは大変だから、既存のUIライブラリを使おう」と思うパーツがありますよね。 カルーセル・カレンダー・グラフなどなど……。 そういったシーンで考えておいた方が良いことを記事にしました。 対象読者 ライブラリが必要そうなUIの提案をするデザイナー 上記UIの実装を担当するエンジニア あなたが2のエンジニアに該当する場合、あなた自身が読む記事というよりは、1のデザイナーにこの記事を共有すると役立つ気がします。 そういう意味でタイトルには見せる記事とも記載しています。 筆者はデザイナーなのですが、そのせいで却ってデザイナーに厳しくなり過ぎている可能性もあります。 あくまで「筆者がデザインを作って実装者に渡した際上手くいった経験」を抽出していることを理解してもらえると幸いです。 やった方が良いこと どうしてもこだわりたい場所と、そうでも無い箇

この記事の概要 私はQiitaを運営する一人です。 そのため、自分たちが誰よりもQiitaを使い倒すという気持ちは重要だと思っています。 記事を読む、編集リクエストをする、質問をするなど「Qiitaを使い倒す」にも色々あります。 そんな中でも「記事を書いてアウトプットする」は外せません。 最近ではQiitaはOrganizationランキングで上位をキープできているので、ここに至るまでに工夫した点を記事にしました。 実施したこと チームの目標に組み込む どんなジャンルでもそうですが、一人でずっと努力を続けるのは大変です。 仲間がいて励ましあったり競い合ったりした方が続きやすいのは間違いありません。 ですから、チームとして「月に○記事以上書く」のように目標に組み込みました。 時期によって数値は変えていますが、常に掲げています。 もちろん目標にする以上、業務時間としてカウントしています。 最初