ふじけん / kenshir0f

UIデザインとフロントエンドをやっていってます。Figmaの記事多め / HOKUTO…

ふじけん / kenshir0f

UIデザインとフロントエンドをやっていってます。Figmaの記事多め / HOKUTO Inc. ← フリーランス ← Cookpad Inc. / https:kenshir0f.com / https://clan.club

  • Figma 入門

    デザインツール Figma の基本的な使い方から、エンジニアと協力して開発に組み込む際の活用方法などをまとめています。

  • よく見直す深津さんの記事

Figma の Dev Mode で UI の確認を楽にする

こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。 この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。 公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。

ふじけん / kens…

    • Figma の Component Properties を学ぶ

      こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。 この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。 公式のチュートリアルはこちら↓ Component Properties とは

      ふじけん / kens…

      • Figma Config 2022 で便利になった機能のおさらい

        こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思います。 ダークモードの切り替えFigma でデザインするときのサイドバーなど、画面全体をダークモードにする機能が追加されました。白い画面の面積が大きいと少し目がつらかったので普通に嬉しいですね。 画面左上のメニューからダークモードとライトモードに切り替えることができます。 僕は Sla

        ふじけん / kens…

        • クックパッド株式会社を退職しました

          12/24付でクックパッド株式会社を退職しました。 新卒でデザイナーとして入社して約4年半、大規模なサービス開発から新規サービスの立ち上げ、インターンの講師や採用周り、社内横断したデザイン支援など多くの業務に携わり経験を積めたのはとても恵まれていたと思います。 (ちなみにトップの写真は2018年の夏インターンのまかないのお寿司です) なぜやめたのかクックパッドでは直近デザインシステムの構築を楽しみながら進めていたのですが、一方で外部の方から魅力的なプロジェクトにたくさん声を

          ふじけん / kens…

        Figma の Dev Mode で UI の確認を楽にする

        ふじけん / kenshir0f

        マガジン

        • Figma 入門
          13本
        • よく見直す深津さんの記事
          12本

        記事

          クックパッドのデザイン品質を支える Apron Design System の構築

          こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生ま

          ふじけん / kens…

          クックパッドのデザイン品質を支える Apron Design System の構築

          ふじけん / kenshir0f

          デザイン基盤を整えるため、サービス開発から少し離れた話

          こんにちは、ふじけん(@kenshir0f)です。 約2年半、KomercoでモバイルアプリやWebのUIデザインを担当していましたが、今年の7月からデザイン戦略部に異動したので、その経緯と目的について話したいと思います。 なぜ異動したのか一言でいうと「クックパッドのデザイン基盤をもっと良くするため」です。 デザイン戦略部にはもともと兼務で携わっていましたが、クックパッドマートやたのしいキッチン不動産など新しいサービスが増え、多くのデザイナーが在籍するようになりました。 そ

          ふじけん / kens…

          デザイン基盤を整えるため、サービス開発から少し離れた話

          ふじけん / kenshir0f

          FigmaのコンポーネントをVariantsで状態管理する

          こんにちは、ふじけん(@kenshir0f)です。 Figma に新機能 Variants がリリースされました。一通り触ってみたので、チュートリアル読むよりもサクッと知りたい方向けに、何が変わったのか紹介したいと思います。 Variantsとは？複数のコンポーネントの状態をひとつにまとめて管理する機能です。 例えば、Buttonの[Default, Hover, Focus, Disabled]といった状態をそれぞれコンポーネントで作っていましたが、Variantsを使う

          ふじけん / kens…

          FigmaのコンポーネントをVariantsで状態管理する

          ふじけん / kenshir0f

          事業の方向性をデザインの力で支える

          こんにちは、ふじけん(@kenshir0f)です。 普段はモバイルアプリやWebのUIデザインをメインで担当しています。 ユーザーの体験設計にフォーカスしてUIデザインしていると、ふと目先の目標に追われていることが多くなっていると感じたため、自分自身の振り返りも兼ねて事業の方向性を整理しました。その結果、自分だけでなくチーム全体を巻き込んで事業成長について考えることになったので、今回はその時の取り組みについてご紹介します。 事業責任者の頭の中を理解する 僕が開発に携わって

          ふじけん / kens…

          事業の方向性をデザインの力で支える

          ふじけん / kenshir0f

          Figmaが目指すデザインのあり方

          2020年1月に行われた Design Matters Tokyo のセッションでデザインの変化について、Figmaの発表を聞いたのでまとめます。 時代とともにデザインがどう変化してきたのか、とても分かりやすく解説されていたので共有したいと思います。 Figma社の Yuhki Yamashita さん デザインの大きな3つの変化今まではデザインは基本デザイナーが取り組むものとして扱われていましたが、インターネットや技術の発展とともにデザインの取り組み方は大きく変化してき

          ふじけん / kens…

          Figmaが目指すデザインのあり方

          ふじけん / kenshir0f

          SlackのUXライティングの考え方

          2020年1月に行われた Design Matters Tokyo のセッションでUXライティングについて学んだので記事にまとめます。 Slack社でUXライティングに取り組んでいるアンドリューさんのお話で、実際にUXライティングするワークショップも体験したので共有したいと思います。 Slack社のアンドリューさん UXライティングとはUXライティングとは、ソフトウェアやインターフェースを言葉で対話可能にすることを目的としたコピーです。 ユーザーの行動フローを理解し、専門

          ふじけん / kens…

          SlackのUXライティングの考え方

          ふじけん / kenshir0f

          個人開発でやらかした失敗と、そこから学んだ実装の難しさ

          この記事は Firebase Advent Calendar 2019 の 23日目の記事です。 こんにちは、ふじけん(@kenshir0f)です。 2019年ももうすぐ終わりなので、今年いろいろと挑戦してきたなかでも個人で開発している日報サービス Stella の開発中にやらかした失敗をご紹介します。来年はきっと忘れているので戒めに... 日報サービスStellaとは？Stellaは、個人でゆるく開発している日報サービスです。 昔 wikihub という日報のサービス

          ふじけん / kens…

          個人開発でやらかした失敗と、そこから学んだ実装の難しさ

          ふじけん / kenshir0f

          FigmaにAuto Layoutが来た！

          こんにちは、ふじけん(@kenshir0f)です。 FigmaにAuto Layoutが来て早速触ってみたので、その機能をご紹介します。 今回は、チュートリアル読む前にさっと機能だけを知りたい方向けに書きました。 Auto Layoutとは？テキストの長さや要素の数によって、自動的にそのオブジェクトのサイズが変わる便利な機能です。 テキストの長さを変えるたびに、その背景やボタンの位置を変えていた作業がこれによって解消されます。 チュートリアルFigmaをアップデート後に起

          ふじけん / kens…

          FigmaにAuto Layoutが来た！

          ふじけん / kenshir0f

          エンジニアから信頼されるデザイナーになる

          こんにちは、デザイナー兼エンジニアのふじけん(@kenshir0f)です。 普段はKomercoのUIデザインと実装を担当しております。 チームやプロダクトの状態に合わせて、デザインしたり実装したりと役割を変えながらサービス開発に携わっていますが、Komercoに参加した当初から実装に入っていたわけではありませんでした。 デザイナーとしてアウトプットしつつも、エンジニアの実装負担を下げる取り組みを行うことで少しずつ信頼を得て、そこから開発スピードを上げるため徐々に実装を担当

          ふじけん / kens…

          エンジニアから信頼されるデザイナーになる

          ふじけん / kenshir0f

          FigmaにPluginがついに来たのでよさそうなものをご紹介

          こんにちは。 Figma plugin の beta版の開発の招待が来なくて悲しんでいましたが、日本時間の2019年8月2日(金)に公式でリリースされました🎉 これを書いているのはプラグインローンチ時刻の深夜2時なので、朝起きて仕事でちょっと触ってみたいという方に向けて、いくつか良さそうなプラグインを紹介したいと思います。 Pluginのインストール方法Figmaのデスクトップアプリをアップデートし、画面左上のPluginsを選択します。 あとはPlugin一覧から入れ

          ふじけん / kens…

          FigmaにPluginがついに来たのでよさそうなものをご紹介

          ふじけん / kenshir0f

          Chapter 6: 開発フローに組み込む

          はじめにこの記事は、UIデザインツール「Figma」の解説記事の第6章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回は作成したUIデザインをエンジニアと共有し、実装に組み込む話について紹介します。 前回の記事はこちら。 UIデザインを共有するモバイルアプリやウェブのUIをデザインし、プロトタイプで価値の検証を行ったら、次は実際に動くものをユーザーさんに届けるため開発のフェーズに移ります。 ご自身でプログラムを書く場合はデザインデータをそのまま使えばよ

          ふじけん / kens…

          Chapter 6: 開発フローに組み込む

          ふじけん / kenshir0f

          Chapter 5: プロトタイピング

          はじめにこの記事は、UIデザインツール「Figma」の解説記事の第5章になります。 概要や過去の解説記事は下のマガジンからどうぞ。 今回はFigmaのプロトタイピングについて紹介します。 前回は記事はこちら プロトタイピングとはアプリやWebなどのUIデザインではプロトタイピングは非常に重要です。 プロトタイプはUIを確認するだけでなく、さまざまなアイデアを試したり、インタラクションや画面遷移を体験したり、周りの人にデザインを共有してデザインを練り直したりするための素晴ら

          ふじけん / kens…

          Chapter 5: プロトタイピング

          ふじけん / kenshir0f