タグ デザインシステム
人気順 10 users 50 users 100 users 500 users 1000 usersデザインシステムの開発者体験向上の試み - enechain Tech Blog
はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見... 続きを読む
Tailwind CSSでデザインシステムを構築する[前編] ~「契約」としてのデザインシステム | gihyo.jp
2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設... 続きを読む
コンポーネントをアクセシブルに保つ技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番... 続きを読む
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | freee株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー(このお知らせでお伝えしたいこと) ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム... 続きを読む
デザインシステム「Tsukuri」の立ち上げから現在まで〜取り組みとその成果〜 - ANDPAD Tech Blog
アンドパッドでプロダクトデザイナーをしている @sizucca です。 以前、デザインシステムの専任エンジニアが、ANDPAD のデザインシステム「Tsukuri」に関する技術的な記事を連載形式で執筆しましたが、今回はデザイナーの視点から、デザインシステムの立ち上げから現在に至るまでの取り組みと、その成果を振り返りたいと... 続きを読む
「デザインシステム」がよくわからないので、理解の仕方を変えてみる|usagimaru
ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を... 続きを読む
エンジニアがデザインシステムの構築に向けて、UX改善と両立して取り組んだ話
この記事は毎週必ず記事がでるテックブログ "Loglass Tech Blog Sprint" の 9 週目の記事です! 1年間連続達成まで 残り 44 週 となりました! はじめに こんにちは、株式会社ログラスでエンジニアの浅井(@mixplace)です。開発チームのいちメンバーとして、チームの開発生産性改善を行う傍ら、デザインシステムの構築... 続きを読む
Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文: http... 続きを読む
初公開!「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークン... 続きを読む
ANDPAD のデザインシステム「Tsukuri」の Web 向け実装について - 現状と今後 - ANDPAD Tech Blog
1. はじめに Web フロントエンド開発を中心に行っている寺島です。 この記事はアンドパッドで開発しているデザインシステム 『Tsukuri』 の Web 向け実装である『Tsukuri for Web』の構築について紹介する最後の記事です。 tech.andpad.co.jp tech.andpad.co.jp tech.andpad.co.jp この記事では Tsukuri for Web の現状... 続きを読む
デザインシステムを作るのはなぜ難しいのか - クラウドワークス エンジニアブログ
こんにちは、crowdworks.jp のデザインシステム構築に携わっているエンジニアの @t0yohei です。最近は日々デザインシステム難しいいいいと思いながらあれやこれやと考えているのですが、開発者の観点から何が難しいと思うのかをせっかくなので共有したいと思います。 デザイナーの観点からのデザインシステム構築につい... 続きを読む
ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog
この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得し... 続きを読む
HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど
HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど TerraformやVagrantなどで知られるHashiCorpは、同社製品のユーザーインターフェイス開発に使われているデザインシステム「Helios」をオープンソースで公開しました。 デザイン設計の原則やサンプルと共に、25種類のUI... 続きを読む
アプリ版デザインシステム実装を公開しました - pixiv inside
アプリ版デザインシステム実装をOSS化しました こんにちは、ああうえ(@_kwzr_)です。新規事業部とデザインシステム部を兼務しており、アプリ版デザインシステムの実装を進めています。 Web版に引き続いて、アプリ版のデザインシステム(charcoal-ios, charcoal-android)をOSS化しました。 github.com github.com inside.p... 続きを読む
Sass のテストコードを書くと便利 - putchom
こちらは CSS Advent Calendar 2022 22 日目の記事です。 こんにちは、家計簿プリカ B/43を運営する株式会社スマートバンクでデザイナーをしている putchom です。 CSS Advent Calendar ではありますが、今回は Sass のテストコードを書くと便利という話をします。 普段私はデザインシステムを設計する仕事をしています... 続きを読む
2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど
2022年現在、UIデザインツールの使用状況を調査した「2022 Design Tools Survey」を紹介します。 急いでいる人用に一言でいうと、Figmaがっょぃ。 2022 Design Tools Survey 2022 Design Tools SurveryはUX Toolsでおこなわれたアンケートの調査結果(4,260人分)をまとめたものです。 まずは、アンケートに回答された人... 続きを読む
25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム
こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記... 続きを読む
後悔しないデザインシステムの始め方
UXA2022 Day 1; Ted Drake - Inclusive design for cognitive disabilities, neurodiversity, and chronic illness 続きを読む
デザインシステム開発優先度の「難しさ」と「対策」|hikaru-takase /Loglass|note
こんにちは、ログラスのデザイナー高瀬です。 今回はデザインシステムの理想と現実ついて話していきたいと思います。 デザインシステムって素晴らしいけど、いざ実装しようとするとプロジェクトの扱いや開発優先度の調整って難しいですよね? 今回はそんなデザインシステムにまつわる開発優先度と対策の話をしていきたい... 続きを読む
デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する
Data Analysis Supporting Policy Decisions of New Service LIVEBUY 続きを読む
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいれ... 続きを読む
デザインシステムに準拠したコンポーネント駆動UI開発への取り組み
こんにちは、THECOO株式会社のpoteboyと申します。普段は現職1人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務して... 続きを読む
デジタル庁、Web・アプリデザインの指針まとめた「デザインシステム」公開 地方自治体の活用も見込む
Webサイトやアプリの開発時、一貫したデザインにできるようドキュメントやデータをまとめた「デザインシステム」をデジタル庁が公開した。「デザインシステムに関わる活動をオープンにし、デザインシステムの認知向上や改善につなげる」という。 デジタル庁は11月11日、Webサイトやアプリの開発時、一貫したデザインにで... 続きを読む
デザインシステム|デジタル庁
デジタル庁へのアクセス〒102-0094 東京都千代田区紀尾井町1-3 東京ガーデンテラス紀尾井町 19階、20階 デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザイン... 続きを読む
デザインシステムを導入してみて(運用編) - バイセル Tech Blog
はじめに テクノロジー戦略本部の酒井です。前回デザインシステムの導入に関して話しましたが、今回は運用についてどういった取り組みをしてきたのか紹介していこうと思います。前回の記事をまだ読んでいない方は読んで頂けると幸いです。 デザインシステム導入してみて(導入編) はじめに 概要 デザインの質を保つ取り組... 続きを読む