Figma Tokensの導入 デザイナーと協力して一貫性のあるUI実装を実現する - Qiita
この記事は Goodpatch Advent Calendar 2021 の12日目です。 今回はFigmaのPluginであるFigma Tokensを使ってみて実感した恩恵や、実際にどのように利用したかを書いていきます。 はじめに フロントエンジニアの責務の一つとしてUI実装（UIの実現）があります。 UI実装はFigmaなどのデザインファイルを設計書として実装していきます。しかしながら、デザイナーも人間なのでデザインファイルにミスがあることもあります。また、デザイナーとエンジニアが並走してプロジェクトを進めていく場合はデザインファイルの変更がたびたび起こることもあり、都度デザイナーとコミュニケーションをとりながらコードを修正しなければなりません。 このような状況を考えると、UI実現の責務をフロントエンドエンジニアだけが受け持つのは荷が重く、クオリティ低下につながる危険性があるのではな
「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog
こんにちは！ フロントエンドエンジニアの @diescake です！ 1 年程前に @nabeliwo よりこんな記事を公開しています。 tech.smarthr.jp 一言で要約してしまうと、SmartHR の各種プロダクトで一貫したユーザー体験を提供するために、SmartHR UI という React コンポーネントライブラリを実装し始めたよ！ しかも OSS として公開してるよ！ という話でございました。 github.com 本記事では、それから 1 年弱たった今 SmartHR UI がどうなっているか、という話をしつつ、現在の SmartHR UI の運用・開発体制について話をしてみようと思います。 SmartHR UI は成長しているよ！ 2019/08/01 2020/05/21 バージョン v3.9.2 v8.2.0 コンポーネント数1 30 66 ソースコード規模2 3
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
UI トレースは何をトレースしているのか｜ai
エレクトリックベースをはじめて買ったとき、まず練習したのは Mr.Big の To Be With You だった。Billy Sheehan のベースの中ではそこまで難易度が高くないバラードだし、寮で同じ部屋の先輩が、よく口ずさんでいたから。 楽器を手にした人が最初にやるのは、誰かの作った曲を奏でることだろう。たくさんの曲をコピーするうちに、だんだんと自分なりの弾き方が身についていく。 その練習方法について批判する人はあまりいない。しかし UI のデザインやイラストになると、とたんに渋い顔をされたりする。 自分が良いと思ったデザインをトレースし、なぜ良いと思ったのか分析することは、有意義なことだと私は思う。もちろん、ただ写すだけではツールの習得にしかならない。 しかし例えば、有名な Jesse James Garrett の 5 Planes Model を地図に、トレースした表面から深
デザイナー×エンジニアで行う『ペアUI改善』のススメ｜あっきー
リリース前のちょっとしたUI修正をエンジニアがデザイナーとペアで修正したら、早くていい感じに進んだのでUI改善でも取り入れてみた話です。 UI改善する箇所は長くサイトを運営していると溜まってくる微妙な崩れや、いつか直したい案件のやつ。「なんか気になるを一掃するぞ！」とやってみました。 『ペアUI改善』の目的目的は以下のとおり。デザイナー・エンジニアの相互理解と、負債の解消がメインです。 ・チケットに上がりづらい余白・文字サイズ等のUI修正 ・数字に上がりづらいUXの向上 ・デザイナーがUIの修正方法を知る ・プログラマーが細部のデザイン意図を理解する『ペアUI改善』の流れ基本的にはペアプロと同じ流れを想定。 準備 ・対象のページを決める（今回は複数ページ） ・『気になるリスト』作成。なんか気になる箇所をまとめる ※気になるリストは日々上がるUI修正チケットとまとめておくと良さそう手順 １．
AppleのUI実装をさぐる - dely engineering blog
こんにちは。delyデザインエンジニアのJohn(@johnny__kei)です。 本記事はdely Advent Calendar 2018の10日目の記事です。 Qiita: https://qiita.com/advent-calendar/2018/dely Adventar: https://adventar.org/calendars/3535 前日は、プロダクトデザイナーのkassyが「ユーザーの声に振り回されないデザインの改善プロセス」という記事を書きました。いいプロダクトを作るには、ユーザーの声を鵜呑みにするのではなく、きちんと判断する必要がありますよね。 はじめに みなさんは、iOSアプリ開発をするときに、XcodeのDebugging View Hierarchiesを使用していますか？ Debugging View Hierarchiesを使用すると、アプリが現在の
良いUIをつくるには「どうつくるか？」より「誰とつくるか？」｜takahashikazuki｜note
PLAID Advent Calendar 18日目の記事です PLAIDでKARTEのUIデザイン（HTML / CSS）を担当しています@takahashikazukiです。経歴は制作会社勤務が10年（3社）、フリーランスでの活動が5年です。PLAIDには2018年2月に入社しました。 フリーランス時代はスタートアップのプロダクト開発をお手伝いしたり、ECサイトのコンサルをしたり、サイダーをつくったり。入社後は、当時スタートしていたKARTEのUI刷新プロジェクトに参加しました。 ここでは、そのプロジェクトを通じて感じた事…特に「機能するスタイルガイドづくりに大切なこと」について書きたいと思います。 KARTEのスタイルガイドを刷新するKARTEローンチから3年。多くの機能追加や改修でデザインは一貫性を失い、HTML / CSSは複雑化し壊れはじめていました。そこでUIデザイナー2名+
UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
