並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 186件

新着順 人気順

"design system"の検索結果1 - 40 件 / 186件

  • IPの世界観に寄り添う、マルチブランドなカラーシステム設計論|TORAJIRO

    はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ

      IPの世界観に寄り添う、マルチブランドなカラーシステム設計論|TORAJIRO
    • Generate Design Systems quickly - Figr Identity (FREE BETA) | Figma

      Boost Your Figma Designs with Our Easy-to-Use Design System Generator: 🚀 Quick Design System Setup: Build design systems fast in Figma. Figr Identity helps you create and manage elements like styles and variables easily, making your design consistent and on-brand. 🔍 Seamless Figma Integration: ...

        Generate Design Systems quickly - Figr Identity (FREE BETA) | Figma
      • 4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは

        これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載ではデザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。第5回は「デザインシステムの構築フェーズ」についてです。 こんにちは。グッドパッチのUIデザイナーの乗田です。前回の記事では、グッドパッチがデザインシステム構築を支援する際の準備フェーズで行う4つの作業について紹介しました。第5回では、「デザインシステムの構築フェーズ」をテーマにお届けします。 はじめに 本連載では、デザインシステムは単なるデザインのコンポーネント集ではなく「組織の課題を解決するためのツール群である」ということをお伝えしてきました。 今回はこの考えにもとづき、組織課題がとくに発生しやすく、構築することで価値が生まれやすいであろうプロダクトデザイン領域に焦点を当て「デザインシステムの構築」に

          4つの要素で考える、プロダクトデザインのためのデザインシステム構築とは
        • デザインシステムの構築と運用そしてその本質

          • UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ

            デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上(2019年12月現在)ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら

              UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
            • デザインの公共性 | Figma Blog

              デジタル技術をユーザーフレンドリーにするためには、デザインの力が欠かせません。表層的な部分のみならず、サービス全体のデザインから携わり、さらにそのナレッジを共有していくことでよりスマートな課題解決に結びつけられます。 デジタル庁では、Figmaのデザインプラットフォームなどの各種ツールを導入し、誰一人残されない、人にやさしいデジタル化に取り組んでいます。ここでは、Figmaが主催「デザイン経営2023」カンファレンスから、デジタル庁 サービスデザインユニットのマネジャーを務める鈴木伸緒氏講演内容を抜粋し、行政におけるデザインの役割についてご紹介します。 イントロダクション日本の行政サービスのデジタル化を推進する組織として、2022年に発足した『デジタル庁』。そのミッション「誰一人取り残されない、人に優しいデジタル化を。」のもとに、省庁や自治体をまたいだデータ連携や、デジタル技術を用いた安全

                デザインの公共性 | Figma Blog
              • Ubie Vitals

                Design Principles デザイン上において目指すべき指針を言語化したものがDesign Principles(デザイン原則)です。誰でも、効率よく、迷わずに、Ubieらしい表現をするための基礎です。 Learn More

                  Ubie Vitals
                • @storybook/cli - Storybook

                  • freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社

                    freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー(このお知らせでお伝えしたいこと) ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社(本社:東京都品川区、CEO:佐々木大輔、以下「freee」)は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes(読み:ヴァイブス)」を公開しました。本デザインシステムを公開するこ

                      freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
                    • 「デザインシステム」がよくわからないので、理解の仕方を変えてみる|usagimaru

                      ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか? 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia(英語)にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ

                        「デザインシステム」がよくわからないので、理解の仕方を変えてみる|usagimaru
                      • デザインミートアップ「Service Design in Gov #0」を開催します|デジタル庁

                        デジタル庁のサービスデザインユニットは、2021年9月のデジタル庁発足当時から行政におけるサービスデザインの実践を続けています。 今回、第一線でサービスデザインを実践している諸外国行政機関のデザインチームを招聘し、デジタル庁のサービスデザインチームのメンバーと、行政におけるサービスデザインの実践知の共有と議論を行うデザインミートアップ「Service Design in Gov #0」を開催いたします。デジタル庁は本取組により、国際的にも行政におけるサービスデザインのハブを目指します。 本フォーラムは2023年10月20日(金)に開催し、オンラインでの配信を予定しています。 どなたでもインターネット上でご参加いただくことが可能です。 デザインミートアップ「Service Design in Gov #0」について目的行政におけるサービスデザイン・アクセシビリティの先進事例や課題の共有実践者

                          デザインミートアップ「Service Design in Gov #0」を開催します|デジタル庁
                        • モノタロウ社内デザインシステムの今までとこれから - MonotaRO Tech Blog

                          UIUXデザイングループのグループ長を担当させていただいている小田と申します。 一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。 今回はモノタロウのデザインシステムのお話をしたいと思います。 デザインシステムの始まり これは数年前の話です。 何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。 また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。 サービスの品質を上げるPDCAを早く回す為に土台(図1)を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。 分散していたスタイル: 作成したボタ

                            モノタロウ社内デザインシステムの今までとこれから - MonotaRO Tech Blog
                          • How Spotify’s Design System Goes Beyond Platforms | Figma Blog

                            Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components. In 2019, when our leadership at Spotify unveiled their ambition to make audio content available and consistent to anyone on any device, our design team faced a significant challenge: Spotify would now be available across 45 unique platforms, and

                              How Spotify’s Design System Goes Beyond Platforms | Figma Blog
                            • Dive into SmartHR UI

                              Encraft #6 Focus on UI Component 実装 での発表資料です。 https://knowledgework.connpass.com/event/291226/

                                Dive into SmartHR UI
                              • Spindle UIのつくりかた / Spindle UI: From Concept to Creation

                                RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub

                                  Spindle UIのつくりかた / Spindle UI: From Concept to Creation
                                • デザインシステムにおける意思決定の質を上げる方法|YUCCA

                                  こんにちは。クラウドワークスでデザイナーをしていますYUCCAです。 デザイン基盤チームでは、プロダクトや組織が成長・変化していく中でも品質を担保しながら拡張していける仕組みを作るべく、プロダクト開発としての技術的負債文脈や生産性文脈でのデザインシステム開発に取り組んでいます。 詳しくはこちらの記事に記載しています デザインシステムに関わってかれこれ3年程になりますが、デザインシステムを作る上での壁にぶち当たるポイントってたくさんありまして……その中でもプロジェクトを前に進めていく上での「判断基準を身につける」事が難しい。 今回は「デザインシステムにおける意思決定の質を上げる」をテーマで弊社ではどうやっていったかをお伝えできればと思います。 前提としてcrowdworks.jp (2023年3月末時点で、当社提供サービスのユーザーは558.8万人、クライアント数は90.5万社)のプロダクト

                                    デザインシステムにおける意思決定の質を上げる方法|YUCCA
                                  • デザインシステムを育てていく|sakito

                                    はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは?まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial DesignGoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iO

                                      デザインシステムを育てていく|sakito
                                    • Figma によるデザインシステム入門

                                      本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ

                                        Figma によるデザインシステム入門
                                      • 初公開!「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank

                                        こんにちはスマートバンクのデザイナーのputchomです。普段は「家計簿プリカ B/43」のプロダクトデザインやデザインシステムの構築を担当しています。 先日、CreatorZineさんでプロダクトデザインに関するスマートバンクの連載記事を書かせていただいたのですが、今回はその中でお伝えしきれなかった「デザイントークンの設計」についてご紹介しようと思います。 デザイントークンとは? そもそもデザイントークンとは、色、タイポグラフィ、サイズ、不透明度、影などのデザインをするための最小要素のことであり、スマートバンクではデザインの一貫性を保ったり、関わるメンバーがよりデザインに対する共通認識を持てるようにして、プロダクトの価値提供を早くするために定義しています。 まず完成形です。このあと説明する様々な工程を経て、以下のようなデザイントークンをJSONで定義しました。(すべて記述するとかなり長く

                                          初公開!「家計簿プリカ B/43」のデザイントークンの設計 - inSmartBank
                                        • BtoB SaaSプロダクトで「機能する」デザインシステムを目指して

                                          デザインシステム、今なにやってる?導入と運用のリアルな裏側を公開!-Lunch LT- 2023/06/15 https://findy.connpass.com/event/285080/

                                            BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
                                          • Proportio.app

                                            Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

                                            • Figmaであとからコンポーネントを作りまくるときのコツ|hassy

                                              Figmaでコンポーネント作るマン、hassyです。 業務でしばしば「ほとんどコンポーネントがないファイル」にコンポーネントを作りまくって置き換える、ということをやってきたので、ざっと心得的なものをメモっておきます。 正直そんなコツのいる話でもないですが、初めてこの作業を長大で膨大なファイル相手にやろうとすると心が挫けそうになるだろうな…と思い、少しでも道筋が開けて見えることを目指して書いてみることにしました。 スピード優先で作られたデザインファイルを落ち着いて整理するとき、引き継いだファイルを自分好みにカスタマイズするときなどに参考になれば👍 では順番に行きます。 0. これから作るデザインデータの基準・ゴールと進め方を決めておくこれが必要なファイルと必要でないファイルがあると思いますが、もしも前任者がいない・デザインの基準やルールが設定されていない、たとえば「マージンや文字サイズを何

                                                Figmaであとからコンポーネントを作りまくるときのコツ|hassy
                                              • ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話|Mercari Design Blog

                                                ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話 こんにちは、メルカリDesign Systemの立ち上げと運用を担当したデザイナーのtottieです。 この記事では、メルカリの抱えていたデザイン上の課題をDesign Systemの導入で改善したお話をご紹介いたします。 なぜDesign Systemを導入したの?Design Systemを導入した理由は、大きく分けて2つあります。 1つめは、開発における課題です。 導入を決定した当時(2018年)、メルカリはスタートアップから急成長したサービスだったため、開発チームは様々な課題を抱えていました。 サービスを改修したくても、複雑に絡み合ったコードのためアップデートが難しい状況になってきた。 急激なチームメンバーの増加にあたり、分担して作業するための土台の整備が間に合わなくなっ

                                                  ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話|Mercari Design Blog
                                                • デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法

                                                  この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 私が最近学んでいること、「デザインシステム」について書きたいと思います。 なぜデザインシステムを学んでいるのか。ですが、デザインの制作時にFigmaを使う機会が増えて、今までPhotoshopやXDで作業していたときよりも、コンポーネントを意識するようになったからです。 まだWeb制作を学び始めたばかりだから、デザインシステムとか難しそう。と思っている人もいるかもしれませんが、学

                                                    デザインシステム入門!Web制作初心者が知るべき基本原則とFigma活用法
                                                  • FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話|🐰

                                                    いつも大学や英語の勉強についての記事を書いてますが、今回はデザイナーとして働いている私が知った技術的なことについてまとめていきたいと思います。 改めて軽く自己紹介昨年の11月よりファインディ株式会社でUI/UXデザイナーとして働いております。ファイディで働くのはとても楽しく、また周りの優秀な人達に囲まれて自分もメキメキと成長を感じています。(ここに関しては入社半年エントリー記事で詳しく書く予定) 普段はプロダクトの魅力を高めるために様々な取り組みを行っています。その中でもデザインシステムはデザイナーだけでなくエンジニアも巻き込んで運用に向けて日々奔走しています。 ファインディデザインシステムとは現在手掛けているのはWebエンジニアの中途転職を支援するFindyというプロダクトのデザインシステムなのですが、サービス開始から6年ほど経過し多くのデザイナー、エンジニアの手によって作られたためどう

                                                      FigmaのSlotを活用したらデザインシステム管理が超絶楽になった話|🐰
                                                    • Figmaでminneのイラストモジュールができるまで|sziaoreo

                                                      こんにちは。 GMOペパボ株式会社のハンドメイドマーケットサービス「minne」でデザイナーをしております、sziaoreoです。 以前「minneのブランドを反映したイラストができるまで」の記事を公開しましたが、そのイラストをより簡単に活用できるように、Figmaでのモジュール化にチャレンジしてみました。 そのままではモジュールに展開するのが難しい状態だったイラストに対して行った作業ステップや、モジュール化してみての気づきについてご紹介していきたいと思います。 (Figmaでのモジュール化についてはこちらの記事を参考にさせていただきました。) ステップ1. すでにできているイラストをかき集めるまずは過去に人力で制作したイラストを1箇所にかき集めて俯瞰してみます。プロダクトの各所や販促施策などでも活用していたので、ある程度の数がストックされていました。 2. それぞれのイラストを分解してパ

                                                        Figmaでminneのイラストモジュールができるまで|sziaoreo
                                                      • デザインシステムを導入する為にやって良かったこと5選|YUCCA

                                                        こんにちは。クラウドワークスでデザイナーをしているYUCCAです。 今回「デザインシステムを導入する為にやって良かった事5選」のお話をしたいと思いますが、デザインシステムと一言で言ってもいろんな側面を持ち抽象度が高いので、前提としてこの記事でのデザインシステムのスコープや私たちのデザインシステム「norman」について軽く紹介させてください。 クラウドワークスのデザイン基盤チームでは、スケーラビリティを持ちながらUIデザインの品質を高められようにする為の一貫した仕組み(デザインシステム)づくりをしています。 このデザインシステムを私たちは「norman」と呼んでいます。 クラウドワークスで使用されている自社CSSフレームワークは2013年から根本的には変わっていない背景があります。なぜ変わっていないのかをここでは省略しますが、10年くらい前のものなので、レガシーなデザインが引き起こす様々な

                                                          デザインシステムを導入する為にやって良かったこと5選|YUCCA
                                                        • How we built our multi-platform design system at Booking.com

                                                          Building a design system that works is a challenge at any scale. Building a design system for 150+ product teams, used by 200+ designers and 800+ developers, and serving 4 different platforms? That’s a challenge requiring lots of special considerations. When building a design system for such a large scale, many questions come to mind: How can we make it strong and scalable to multiple themes and b

                                                            How we built our multi-platform design system at Booking.com
                                                          • アンドパッドのデザインシステムの
今までとこれから(Frontend Talk 〜デザインシステム構築のリアルな裏側〜)|sizucca

                                                            この記事は、2022年3月10日(木)に開催された「Frontend Talk 〜デザインシステム構築のリアルな裏側〜」のイベントに登壇した内容の記録用です。 転職してから初のイベント登壇でしたが、他社の方々の現場のお話を伺うことができたり、完全オフラインイベントだったため、イベント後にTwitterで参加者による2次会が開催されたり、と想像以上に楽しい1日を過ごすことができました。 登壇者の皆様、視聴してくださった皆様、本当にありがとうございました。 以下、各種アーカイブです。 発表資料デザイナー(自分)の発表資料

                                                              アンドパッドのデザインシステムの
今までとこれから(Frontend Talk 〜デザインシステム構築のリアルな裏側〜)|sizucca
                                                            • HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど

                                                              HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど TerraformやVagrantなどで知られるHashiCorpは、同社製品のユーザーインターフェイス開発に使われているデザインシステム「Helios」をオープンソースで公開しました。 デザイン設計の原則やサンプルと共に、25種類のUIコンポーネントと数百のアイコンが含まれています。 Check out the #opensource launch of Helios, the Ember.js-based design system we use to design and build our better, more consistent product UIs. https://t.co/1KqpdTMIri — HashiCorp (@HashiCorp) Janua

                                                                HashiCorp、UIデザインシステム「Helios」をオープンソースで公開。UIコンポーネントやアイコンなど
                                                              • Helios Design System

                                                                The page navigation is complete. You may now navigate the page content as you wish. This button opens a dialog containing an input field and some additional information that you may wish to explore. An automatic search will be performed as you type text into the search field, but the results may not be announced. Exploring the additional items in the modal will help you discover the search results

                                                                  Helios Design System
                                                                • 優れたデザインシステムでコスト削減、増収を叶える。デザインとROIの関係|FRACTA |トータルブランディングパートナー

                                                                  こんにちは。FRACTA ブランドクリエイティブ局 大野です。 2022年はスタートアップ冬の時代と言われ米国テックの株価暴落やウクライナ侵攻を始めとした環境不安など激動の一年でした。事業者やブランドはコストカット、キャッシュ引き締めを強いられるなど影響はさまざまなところに及んでいると思います。 そんな時代だからこそ、自分たちが何者であるか、どこに力を注いでいくのか、といったブランディングがより重要に。そして自分たちの価値を伝えていく上でクリエイティブやデザインの重要性は高まっているとも考えることができます。しかし今は冬の時代。キャッシュ引き締めの余波はさまざまな施策・製作にも及びがち。 自らの組織において適切に投資を受けられるためにできることはあるのか。 今回はデザインのROI(Return on Investment)について、初歩的な考え方をお話してみようと思います。 語られるデザイ

                                                                    優れたデザインシステムでコスト削減、増収を叶える。デザインとROIの関係|FRACTA |トータルブランディングパートナー
                                                                  • Can I get an Encore? Spotify’s Design System, Three Years On

                                                                    "For an audio company, you’re awfully quiet..." We last spoke publicly about what Spotify is doing in the design system space in 2019 when we introduced a new system called Encore. Since then it's been radio silence. We haven’t really said much or talked publicly despite being asked about it. We’ve had our heads down learning, thinking, and shipping. So, maybe you’re curious. What have we been up

                                                                      Can I get an Encore? Spotify’s Design System, Three Years On
                                                                    • そのデザインシステムは投資対効果をもたらしますか?|Kento Norita

                                                                      2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。 かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。 0. デザインシステムの導入における障壁昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話題性が起因して新たなデザインシステムが続々と誕生しています。話題になっているから・便利だから・品質を上げてくれるから・ユーザー体験が向上するからなど、導入の理由は組織・プロダクトに応じて多岐に渡ると思います。 上記の理由に加え、デザインシステムを構築する前に立ち止まって考えたいポイントが「投資対効果」です。 プロダクトに応

                                                                        そのデザインシステムは投資対効果をもたらしますか?|Kento Norita
                                                                      • 25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム

                                                                        ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン

                                                                          25年続くYahoo!ニュースを支える、Figmaを用いたデザインシステム
                                                                        • 後悔しないデザインシステムの始め方

                                                                          デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products

                                                                            後悔しないデザインシステムの始め方
                                                                          • デザインシステムに準拠したコンポーネント駆動UI開発への取り組み

                                                                            こんにちは、THECOO株式会社のpoteboyと申します。普段は現職1人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務していました。 専任がいなかったのは、Faniconが元々ネイティブベースのアプリで、WEBアプリの開発優先度を下げていたためです。 そのため、フロントエンドの開発環境に関しても万全とは言えず、2022年6月に私が入社し、9月には2人目のフロントエンド開発者となるTomoya氏が入社したタイミングで、2人で協力してFaniconフロントエンドの大改修を行なうこととなりました。 フロントエンド改修業務にはTypeScriptの導入、既存コンポーネントのVue3化、単体テスト

                                                                              デザインシステムに準拠したコンポーネント駆動UI開発への取り組み
                                                                            • デザインシステム|デジタル庁

                                                                              デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 更新情報2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました 2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました 2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました 2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました 2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました 2023年6

                                                                                デザインシステム|デジタル庁
                                                                              • Web制作者は要チェック! Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma

                                                                                Figmaで無料で利用できるWebサイトやスマホアプリのUI用のデザインシステムを紹介します。UIコンポーネント、カラー、アイコン、タイポグラフィなどがまとめられており、すぐにFigmaで利用できます。 Design Systems for Figma ※画像は、クックパッドのデザインシステム Design Systems for Figmaには日本のサイトをはじめ、海外のサイトのデザインシステムがまとめられています。 サイトの利用は簡単で、登録など面倒なことは一切不要です。

                                                                                  Web制作者は要チェック! Figmaで無料利用できるUI用のデザインシステムのまとめ -Design Systems for Figma
                                                                                • 加速するコンポーネント設計入門 / Component Design as an Accelerator

                                                                                  社内勉強会用 デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門 ※フロントエンドエンジニア視点 [Keywords] - 共通認識としてのデザインシステム - 共通認識としてのコンポーネント設計

                                                                                    加速するコンポーネント設計入門 / Component Design as an Accelerator