Hiroki Tani

FigmaでDesigner Advocateという仕事してます。デザインシステムが好…

Hiroki Tani

FigmaでDesigner Advocateという仕事してます。デザインシステムが好物です。 OSS: FLOCSS http://github.com/hiloki/flocss 著書: Web制作者のためのCSS設計の教科書 http://amzn.to/2hJcQVX

マガジン

  • #デザインシステム 記事まとめ

    • 189本

    デザインシステム関係の記事まとめ / #DesignSystems #デザインシステム / 運営メンバーも募集中。/

  • YOWATARI RADIO

    • 12本

    YOWATARI RADIO(ヨワタリラジオ)は、デザイナーの背景を持つ器用貧乏な2人、こぎそ(@kgsi)とたに(@hiloki)が、デザイナーやエンジニアなどのキャリアや将来の展望についてゆるく語るラジオ番組です。ゲストを招いたトークを中心に不定期に収録、公開していきます。 noteには各回の要約やお知らせ、コラムなどを投稿予定です。

  • Figma

    FigmaのDesigner AdvocateによるFigma関連のnoteを集めています。

  • Learning English

    英語の勉強をまじめにはじめた人の記録。

  • Frontend Weekly for Designer

    国内・海外のフロントエンド関連情報を厳選し毎週お届けしている「Frontend Weekly」のデザイナー向け記事をセレクトした「For Designer Edition」をはじめます。 Design系の記事だけでなく、Webフロントエンド全般の記事を読みたい方はFrontend Weeklyをどうぞ。 Frontend Weekly https://frontendweekly.tokyo/

最近の記事

Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α

Figmaはデザイナー向けのUIデザインツールのように思われがちですが、Figmaを使ったプレゼンテーションスライドの作成や、デジタルホワイトボードツールのFigJamを活用したアイデア出しやプランニングなど幅広い用途があります。そして2月1日から正式版となったDev Mode(開発モード)は、デザインデータやその仕様を元にプロダクトを構築するための機能が備わっています。 Dev Modeは主にはコードを書く開発者にとって便利な機能があります。コード生成や、デザインの差分比

    • #13 企画会議×お便り回(ゲスト: ??さん)

      こんにちはこんばんわ、YOWATARI RADIOです。 2024年の2本目は、パーソナリティのふたりと今年から正式にクリエイティブディレクターとして参画してくれた新免さんで企画会議などをやってみました。今後のやりたいことの話をしつつ、リスナーの方からいただいたお便りに応えていくようなことをやってみました。 後半には少しだけゲストが参加しています。誰が来たのかは聴いてからのお楽しみ。 皆様からのお便りお待ちしておりますYOWATARI RADIOではいつでもお便りをお待ち

      • キャンバスの要素からVariablesを一括で登録するFigmaプラグイン、Variables generatorをつくりました

        キャンバスに展開したRectangleの色をVariablesを一括に登録するプラグインです。動作はこんな感じです。 プラグインはこちら。 プラグインの利点通常Variablesは一つずつCollectionとして登録するか、あるいは既存の要素の塗りの色などから登録することになります。このプラグインではキャンバス上で視覚的にカラーパレットをRectangleでつくり、それらを選択してプラグインを実行すればそれがVariablesとして登録されるようなイメージです。 特長と

        • デザイン仕様が伝わるFigmaのデザインの作り方

          FigmaでUIデザインをおこし、それを実装する人にハンドオフ(デザインデータを共有する)ときに、どのようなことに気をつけると良いかを書いてみます。多くの方がこの手の「実装者にやさしいデザインデータの作り方」のような記事を書いてくれていると思いますが、この記事ではFigmaに特化した内容となります。 Frame + Auto Layoutで構造的につくる実装を意識したデザインにおいては「構造化」というのは重要なポイントです。下記に並んでいるヘッダーは一見どちらも同じものです

        Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α

        マガジン

        • #デザインシステム 記事まとめ
          Nobuya Sato 他
        • YOWATARI RADIO
          こぎそ 他
        • Figma
          Hiroki Tani
        • Learning English
          Hiroki Tani
        • Frontend Weekly for Designer
          Hiroki Tani
        • Coffee and
          Hiroki Tani

        記事

          2023年の振り返り、そしてFigmaに入社して8ヶ月くらい経った

          4月にFigmaに入社し、おかげさまで2023年の終わりも迎えられたので、この10ヶ月を振り返ってみます。 入社の経緯などは過去のnoteをご覧ください。 Figmaでの8ヶ月とにかく濃い8ヶ月。グローバルな企業で働くこと、そして英語が標準語となる環境で働くのは初めてなので、多くの学びや苦労をしました。大変ではあるけど楽しいというのが素直な気持ち。 結局Figmaで何をしているのか? まず大前提として、Figmaは2022年3月に日本法人を設立しました。なので僕が入社と

          2023年の振り返り、そしてFigmaに入社して8ヶ月くらい経った

          カラーパレット設計ツールのJSONをFigmaのVariablesに取り込むプラグインをつくりました

          JSON to Color VariablesこのFigmaプラグインは何?このプラグインはメジャーなカラーパレット設計のツールからExportできるJSONを、FigmaのVariablesに取り込むプラグインです。 2023年11月11日時点で対応しているのは下記です。 Primer Prism Huetone それぞれのツールの補足も一応書いておきます。 Primer PrismPrismはGitHubのデザインシステムであるPrimerのチームが開発したツー

          カラーパレット設計ツールのJSONをFigmaのVariablesに取り込むプラグインをつくりました

          #9 面倒くさいやつx少人数でやる理由xユーザーディライト(ゲスト:カワセ タケヒロ さん)

          こんにちはこんばんわ、YOWATARI RADIOです。 YOWATARI RADIO第9回目。今回のゲストはPOLAARのカワセ タケヒロさん(@tkhr_kws)です。デザイナー、コンセプターとして幅広いデザインに関わってきたカワセさんに話を聞いてみました。 今回のエピソードの概要『雑談』という素敵なバーでの収録。パーソナリティの二人はビールをいただいてましたが、カワセさんはシラフでありながら、なめらかにこれまでのキャリアやデザイン観を語っていただきました。 今回は隠

          #9 面倒くさいやつx少人数でやる理由xユーザーディライト(ゲスト:カワセ タケヒロ さん)

          UXデザインやUXリサーチに活用される『KA法』に使える『KAカード』のFigmaウィジェットをつくりました

          タイトルの通りなのですが、KA法という定性調査の分析やモデリングに使われる手法で使われるアイテムをFigmaのウィジェットにしてみました。 KA法とは例えば「英語学習にお金や時間をかけている」人たちにユーザーインタビューを実施し、それらの記録から印象的・特徴的なことを抽出するにあたり、 ユーザー調査により得た出来事 ユーザーの心の声 心の声に基づいた価値 といった雛形にしたがって書き出します。例として適切な抽出かわからないですが、次のようなものです。 インタビュー

          UXデザインやUXリサーチに活用される『KA法』に使える『KAカード』のFigmaウィジェットをつくりました

          #7 なんでも屋x笑顔x60歳(ゲスト:宇野 雄 さん)

          こんにちはこんばんわ、YOWATARI RADIOです。 YOWATARI RADIO第7回目。今回のゲストはnote株式会社でCDOを務める宇野 雄さん(@saladdays)です。これまでのキャリアや仕事への向き合い方などを語っていただきました。 今回のエピソードの概要 現在のポジション以前のキャリアの話から、いつも笑顔の宇野さんの秘密、仕事への姿勢など、同世代のメンバー同士で盛り上がりました。金言も盛り沢山です。 告知noteさんではプロダクトデザイナーを絶賛募集

          #7 なんでも屋x笑顔x60歳(ゲスト:宇野 雄 さん)

          初めての海外長期出張で密かに怪我をしていた話

          6月21日、22日に開催されたFigmaのカンファレンス Configの準備と参加のため、6月16日からサンフランシスコに出張にいった。 サンフランシスコ自体は3度目にはなるものの、仕事らしい仕事でいくのと、2週間近くの滞在ははじめて。 Configそのものの振り返り…もしたいところだけど、すでに現地に参加してくれていた日本人の参加者の素晴らしいレポートもあるので、ぜひそちらをみてください。 じゃあ僕はこのnoteで何を書くかというと、人生で初の「海外で怪我をして病院にい

          初めての海外長期出張で密かに怪我をしていた話

          社内で見かける英語の略称

          先月から英語が公用語な会社にはいったので、日々英語と格闘しながら新しい仕事のオンボーディングをがんばっています。所属は日本のチームなので、いうてほとんどは日本語でコミュケーションはするものの、Slackやドキュメントその他の情報は英語です。 その中で今回は「略称」として見かけるもの、そして知らなかったものをあげてみます。 TILToday I Learned(今日の学び) 社内ツールの小技が共有されたとか、何かしら学びっぽいものがあったときに主にSlackのEmojiでリ

          社内で見かける英語の略称

          今日からFigma JapanのDesigner Advocateになりました🎉

          先日3月14日に、Figma Japanの1周年記念イベントとして「デザイン経営2023」が開催され、その場で先行して発表されましたが、4月よりFigma Japanの二人目のDesigner Advocateとして入社することになりました。 Figmaとの出会いFigmaをおそらくまともに使い始めたのは2018年頃。Figmaは2016年から一般公開なので、めちゃくちゃ早いほうではないものの、当時勤めていたサイバーエージェントの中では比較的早い段階で触り始めたような記憶で

          今日からFigma JapanのDesigner Advocateになりました🎉

          #3 スピード感x予測不能x成長(ゲスト:鈴木 伸緒さん)

          こんにちはこんばんわ、YOWATARI RADIOです。 YOWATARI RADIO第3回目。今回のゲストはデジタル庁で働くデザイン・マネージャーの鈴木伸緒さん(@nobgraphica)です。ご自身の成長を意識した働き方やこれまでの歩みを語ってもらいました。 今回のエピソードの概要みんなが気になるであろうデジタル庁でのお仕事の話から、さかのぼってデザイナーになった経緯や、パーソナリティのtaniとの邂逅、メルカリ時代の話などを伺っています。 参照リンク影響を受けた本

          #3 スピード感x予測不能x成長(ゲスト:鈴木 伸緒さん)

          英語の勉強のために参考にしているYouTubeチャンネル

          次の働く環境では英語も話せるようにならないといけないので、典型的な学習教材以外にも英語に関する情報を得るためにYouTubeもよく観ています。 しっかり勉強するものと、英語圏での生活におけるあるあるを交えたチャンネルや動画など様々あるんですが、よく観ているものを今回ピックアップしてみます。 あいうえおフォニックス一見こども向け風なイメージだけど、中身はしっかりリアルな英会話フレーズや発音についての動画がたくさん。MCの二人はちゃんとネイティブな感じでそこそこスピード早く英語

          英語の勉強のために参考にしているYouTubeチャンネル

          FigJamのTableをSticky notesに変換するプラグインをつくりました

          このプラグインはFigJamに新しく登場したTableをSticky notesに変えるというシンプルなプラグインです。 プラグインを作った背景たまたまTwitterを見ていたときに次のようなTweetを見かけました。 このFigJamのTableの登場によって、SpreadsheetなどのセルをコピーしてFigJamに貼り付けるとSticky notesになるという仕様が変更され、Tableになるようになりました。 そこから色々とユーザーの声を探ってみると、 という

          FigJamのTableをSticky notesに変換するプラグインをつくりました

          #2 バイブス×取捨選択×余白(ゲスト:にしゃみーさん)

          こんにちはこんばんわ、YOWATARI RADIOです。 第2回目からnoteにも抜粋した内容やラジオで出たリンクなどを投稿していきます。 ちなみにYOWATARI RADIOって何?という方は以下説明を見てね。 今回はゲストにRimoのプロダクトデザイナー・にしゃみーさん(@NishaMe1024)をお招きしてお送りします。 今回のエピソードの概要今回の内容は、にしゃみーさんがデザイナーをつとめるRimoで提供している文字起こし機能と、3/9にリリースされた要約機能を

          #2 バイブス×取捨選択×余白(ゲスト:にしゃみーさん)