「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
NewsPicks UIデザイナーのFigma利用フロー大公開！｜つづく（ひらい）ともこ | mokataaan
自己紹介NewsPicksでUIデザイナーをしております。つづく（ひらい） ともこと申します！ 初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm 2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。 ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。 そして今年の6月末でヤフーを退職し、株式会社ニューズピックスにUIデザイナーとして転職しました。 現職ではNewsPicksアプリやWeb、その他関連サービスのUIデザイナーとして関わっております。 仕事の話はそこそこに…。なにより一番に覚えて帰っていただきたいのは、「女性アイドルが好きです！」ということです！！ ハロプロ、日向坂46などの日本の女性アイドルグループが物心ついたときから今までずっと好きでして、最近だと「Girls P
OpenAI API を使ったデザインからコード生成する Figma プラグイン - Gaudiy Tech Blog
こんにちは。ファンと共に時代を進める、Web3スタートアップのGaudiyに、6月からお試し入社する seya（@sekikazu01）と申します。 ここしばらく話題になっている、OpenAI が提供する ChatGPT を代表とした LLM。この記事では、そんな OpenAI の API を使って Figma からコード生成するプラグインを作ってみた過程を記していこうと思います。 先に背景をちょっとお伝えしますと、Gaudiy ではPSFに向けて、複数パターンのUI・機能を実際に提供しながら検証を回すことを予定しています。 すでに定義したコンポーネントはある程度使い回せるものの、ページ実装の試行回数の増加が見込まれる状況です。ここの作業効率化のために、コンポーネントをしっかり活用しながらも、ちょっといじればプロダクション利用可能な React コードを Figma から書き出すトライとし
サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています！ プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
I've been working on Chakra UI for the past five years, and I'm very proud of what we've achieved collectively. With our growing team, we've achieved over 1.9M downloads per month, 2M unique website visits per month, and over 31k Github stars; this has been one of my most rewarding projects to date. For a project that started with a single maintainer to become a multi-framework team, this has been
エンジニアが知りたいFigma Config 2023の話 Figmaのコンファレンス、config 2023は2023年6月21日から22日までの2日間、サンフランシスコで開催されました（オンラインでも見れます）。都合上、コンテンツを全部視聴できませんでしたが、リリースノートを見るだけで凄まじいアップデートが伝わってきたので一刻も早く皆さんに共有したいと思います。 今回のアップデート、デザイナーが喜ぶ新しいfeatureだけでなく、エンジニアが喜ぶ新しいfeatureもたくさんあります。今回の記事はエンジニアが気になる視点からFigmaのアップデートについて紹介します。 キーポイント 今回のConfigで、以下のような多くの更新が発表されました： Dev mode機能 VS Code内でFigmaファイルをチェックする機能（Extension） デザインの変数化（Design Token
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
Design Tokens Format Module Draft Community Group Report 24 July 2023 Latest published version: https://tr.designtokens.org/format/ Editors: Daniel Banks Donna Vitan James Nash Kevin Powell Louis Chenais Feedback: GitHub design-tokens/community-group (pull requests, new issue, open issues) Abstract This document describes the technical specification for a file format to exchange design tokens betw
Adobe XDとBootstrapで作業を効率化 第3回: デザイントークンでつなぐAdobe XDとBootstrap | Adobe Blog
前回の記事では、Adobe XDを使ってデザインガイドを作成し、登録したカラーやコンポーネントには「デザイントークン」として名前を付けました。今回は、デザイントークンを使って、デザインガイドとBootstrapを連携させる方法を紹介します。 連携方法はシンプルです。ただ、Bootstrapの構成を理解をしていないことには始まりません。最初に、連携方法を理解するのに必要なBootstrapの基本を説明しておきます。 Bootstrapの基本構成 Bootstrapは、CSSメタ言語であるSCSSを用いて管理されています（2020年1月時点）。SCSSは、少ない修正で多くの箇所の変更ができるシステムを構築できます。BootstrapもCSSの記述量は膨大ですが、SCSSを修正すれば簡単に様々な箇所の変更が行えるようになっています。この記事も、紹介する実例はSCSSの修正によるBootstrap
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
Figma Config 2022 感想まとめ - Goodpatch Tech Blog
2022年5月10日から2日間かけて行われた「Figma Config 2022」のアーカイブ動画が先日公開されましたね！ 本記事では、有志のGoodpatchエンジニアが興味を持ったセッションをピックアップし、セッションの概要や感想をご紹介します！ すべてのアーカイブ動画はこちら👉 Config 2022 - YouTube ピックアップセッション💙 Figma tutorial: What’s new in Auto layout negative spacing absolute position text baseline alignment How design tokens can make us better collaborators - Jan Six (Config 2022) Figma Hacks and Workflow Enhancements with P
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーのデータソリューション事業に携わっている水野です。現在は、「DATA SOLUTION」というサービスと、その開発基盤となる「DS.Design System」の開発に関わっています。 近年、デザインシステムはプロダクト開発のホットワードとなり、多くの有名企業がオープンソースとしてデザインシステムを公開しています。例えば、Atrasian社のLightning、Adobe社のSpectrumは有名なデザインシステムで、アメリカでは200以上の政府サイトに導入されているUSWDSもあります。企業のみならず、政府単位でデザインシステムが導入され、驚くべき広がりを見せています。 DATA SOLUTIONでは、デザイン
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 5 best practices for preventing chaos in Tailwind CSS—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/10 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 章立てや強調の一部は原文から変更しています。 参考: Tailwind CSS - Rapidly build modern webs
Android Advent Calendar 10日目です。 Material Designの一般的な話に留まってしまいました。Android特有の話やコードは出てきませんが、「ふーん」と流し読みいただければ幸いです。 Material Design 3とは 2014年にGoogleから発表されたMaterial Designですが、2018年にMaterial Themingが登場し、今年2021年にMaterial Youが新たに発表されました。発表当初は「Material You」という呼称での発表でしたが、先日ガイドラインが登場し、そこでは「Material Design 3」、略称として「M3」と記載されていました。このタイミングで、Material ThemingをM2、Material YouをM3と整理されたようです。 下記のガイドラインの用語集の中に詳細が記載されていま
今回はデザイントークンのコミュニティグループ、仕様ドラフトの動きと、その中で説明されているデザイントークンの役割に焦点を当てて紹介します。そしてデザイントークンをより効果的に活用するための便利なツールについても紹介します。 Design Tokens Community Group デザイントークンは色やスペースなどデザインと実装においてそれ以上分解できない核のような存在です。このデザイントークンを利用するために仕様策定をするコミュニティがDesign Tokens Community Groupです。 Design Tokens Community GroupはW3CのCommunity Groupに2020年頃に設立されました。W3CのCommunity Groupはオープンに議論をしていくことを目的とし、W3C COMMUNITY CONTRIBUTOR LICENSE AGREEM
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
Figmaconfig2022で発表されたComponent PropertyとAutoLayoutについても追記しました。 2023年にリリースされたVariables、NestedComponentに対応しました。 2024年のmulti-editに対応しました。 このドキュメントの目的デザインガイドライン・システムに関する理解を深め、UIUXを通したプロダクト価値の最大化が業界として底上げされるといいなと思っています。 あとは、私rikikaが個人的にいろいろなお仕事で作らせて頂く機会をいただくのですが、そのたびに事例や作り方のハウツーが目まぐるしく変わっていき、インターネット上に情報が散らばっていると感じていたのでそのsingle source of truthの役目を担いたいという気持ちもあります。 とはいえ、絶対これが正しいというのもない分野だと思うので、全体感を通して適宜コメ
Panda CSS は何を出力するのか？ 先日 Panda CSS がリリースされ、次の紹介記事を書きました。 その時点では、ドキュメントの内容に加えて Next.js に組み込んで動きを見てみたものをベースに書きました。ただ、実際に使うことを考えると、一体どんなファイルが出力されるのかについて理解が不足しているため、もう少し把握しておきたいところです。 ということで今回は、Panda CSS が具体的に出力するファイルの内容を覗いて、どういった点に注意すべきか見てみましょう、という記事です。 CLI のセットアップ 出力内容を確認できれば良いので、特にその他フレームワークなどは導入せず、CLI ベースでのビルドをセットアップします。（※ドキュメント通りに進めるため詳細は割愛します） デフォルトでの出力結果を見てみる まずは、CSS を一箇所も定義しない状態で pnpm panda を実行
AI won’t replace designers, but designers who use AI will replace those who don’t. Similar to how calculators were once thought to replace mathematicians, many fear that AI will replace designers. However, this is a misconception. Just as calculators didn’t replace mathematicians, AI won’t replace designers either. Instead, AI will offer you — designers, new tools and capabilities to increase thei
Extending Atomic Design
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. I thought I’d be sick of talking about this by now, but I’m still passionate about atomic design after hearing so many success stories, as well as w
Tokens Studio for FigmaとStyle Dictionaryでデザインの共通言語をつくる - 弁護士ドットコム株式会社 Creators’ blog
こんにちは、弁護士ドットコムデザイン部の細貝です。 担当しているプロダクトで、「Style Dictionary」と「Tokens Studio for Figma(FigmaTokens)」を使ってデザイントークンを実際のコードに反映する仕組みづくりをする機会がありました。 12月のアドベントカレンダーでも記事を書いたのですが、記事公開後に調べた内容や部分的な改善を反映しつつ、こちらのブログでも紹介させていただこうと思います。 弁護士ドットコムにデザイントークンがきた🎁 デザイントークンとは デザイントークンを使ってFigmaでデザインする 仕組み化することでデザイントークンをもっと活用したい 1. Style Dictionary 2. Tokens Studio for Figma(Figma Tokens) 3. Storybook Design Token 完成イメージ 実際に
ページから解放されたドキュメントツールの未来
Node型ツールの真価個人向けナレッジマネージメント で Roam Research をはじめとした Node で情報を整理するのに慣れてくると、ページという枠組みが窮屈に感じることがあります。Node型ツールはキーワードをリンクして関係性を構築するのが特徴なので Wiki と同じように見えますが、少し違います。 Node の下に参照している別 Node が表示されている一見、アウトライン型のページに見えますが、リストアイテムひとつひとつにメタデータが割り振られた Node （Block と呼ばれることもある）になっています。上図スクリーンショットでは、 Node を参照している別の Node が分かるようになっています。ページとページをリンクするというより、Node と Node をリンクさせることができるのが大きな特徴です。 少し分かり難いコンセプトですが、Notion の同期ブロック
iOSでデザイントークンを使ったカラーを運用する方法を模索する - Goodpatch Tech Blog
Design Division所属 iOSエンジニアの 藤井 です。弊社はあだ名文化があるため、実は高校時代から使い続けているハンドルネームでもある、「とうよう」というあだ名で普段は呼ばれています。 デザインに理解のあるエンジニアをこの世にもっと増やしていくという理想のもと、普段は日々デザイナーと一丸になっていいデザインをかたちにする仕事をしています。 今回は弊社社内のエンジニア勉強会で知ったデザイントークンという概念から、自分なりに考え研究してみた結果を紹介したいと思います。 デザイナーと共創しているiOSエンジニアの役に立てれば幸いです。 デザイントークンとは 今回考えたいこと カラーアセットについて知る カラーアセットとは？ カラーアセットのメリット カラーアセットのデメリット カラーアセットの仕組み iOSでの実現方法を考える 1. Color Panelにカラーパレットを定義して
上の記事、まとまっていていいですよね〜〜！ 個人用に使うために、日本語訳していくぜ！頼むぜChatGPTちゃん！！！！！！ プロンプトは日本語訳に訳して試していますが、もっといい感じのがあるよ！ってかたは教えて！！！！ 英語がうんちな僕のために頑張ってほしいはじめにAIはデザイナーを置き換えることはありませんが、AIを使用するデザイナーはそうでない人たちを置き換えるでしょう。 計算機が数学者を置き換えると考えられたように、多くの人々はAIがデザイナーを置き換えるのではないかと恐れています。しかしながら、これは誤解です。計算機が数学者を置き換えなかったように、AIもデザイナーを置き換えることはありません。 代わりに、AIはデザイナーに新しいツールや能力を提供し、効率性と創造性を向上させます。この投稿では、AIがデザイナーを置き換えることはないが、むしろ彼らの仕事を強化する理由について探求しま
Keeping it simple with CSS that scales - Andy Bell
This is the written version of my new talk, “Keeping it simple with CSS that scales”, which I first delivered at State of the Browser 2019. It’s a very long read, so I recorded an audio version, too: CSS has a weird place on the web today. There’s a lot of polarisation, with the opinion being seemingly split on “CSS sucks” and “CSS rules, learn it better, fools”. I empathise with the “CSS rules” c
この記事は2020年10月3日にWCAN 2020 Design Special 〜デザイン力の基本とブランドづくりの一歩〜で行うLTのスライドと原稿です。 投稿時点ではまだイベントは始まっていませんが、先んじて公開します。 以下が実際の内容です。 それでは「実装まで視野に入れるならAtomic Designを辞めましょう」と題して私のLTを始めます。 みなさんこんにちは。Increments株式会社でデザイナーをしている綿貫佳祐と言います。 Incremetnsではこれらのサービスを展開しております。 普段の業務からこれら3つ、インターフェースだけでなくフロントエンドまである程度担当していまして、両方の視点から見た話をしていきます。 最初にお断りしておきますと、現在Atomic Designを使っている方々を否定するつもりはありません。 ただ、主観ですがAtomic Designは「汎用
![[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b36672e68f2ccc80b4b17d448b528f5e5a3bb2ff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTFQlRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODklMjYlRTUlOEUlOUYlRTclQTglQkYlNUQlRTUlQUUlOUYlRTglQTMlODUlRTMlODElQkUlRTMlODElQTclRTglQTYlOTYlRTklODclOEUlRTMlODElQUIlRTUlODUlQTUlRTMlODIlOEMlRTMlODIlOEIlRTMlODElQUElRTMlODIlODlBdG9taWMlMjBEZXNpZ24lRTMlODIlOTIlRTglQkUlOUUlRTMlODIlODElRTMlODElQkUlRTMlODElOTclRTMlODIlODclRTMlODElODYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWNjOTkxODEzYWE5YTgzYjAxYTU1NGEwOTMxMDA2MDA1%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB4cnhveGN4b3gmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTVhZmVkZjZjZjNkMTFiMmYwOTA4NTAyYTkyYmQwZTVl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gUWlpdGHmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D46ba16e8a9b0707ba9fc31cfba17831c)
Learn how to create and craft a design token system for any modern multi-brand design system with the use of Figma Tokens Video to my official “Tokens Studio for Figma” talk on March 2nd 2023: https://www.youtube.com/watch?v=7utmznIOWLU and Figma resource: https://www.figma.com/community/file/1209842880001121589 IntroIn my last article, I talked about how to do the roundtrip of one single design t
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの春野です。普段は広告プロダクトに関わるデザイン業務やフロントエンド業務を行う傍ら、全社デザインシステムの制作に携わったり、全社的にフロントエンド推進活動を行ったりしています。 全社デザインシステム制作の取り組みのひとつとして、デザインツールであるFigmaで使用できる、カラースタイル切り替えFigmaプラグインを開発しました。またこのプラグインを誰でも使えるように公開しました。 本記事では、開発したFigmaプラグインの機能を紹介するとともに、Figmaプラグインを自作することで業務効率を改善するという手法や、そのプラグイン開発をどのように進めたのかを紹介します。 今回開発したFigmaプラグイン「Them
突然ですがアイコン作ってますか🤤 最近は Material Symbols やその他無料のアイコンセットも多いので、イチから作ることも少なくなったように思います。そのせいか、まとまった記事が観測できなかったのでまとめてみました。 本記事の作り方については必ずしも正解とは限りませんが、書いてある操作を大体覚えとけば一通りのアイコンが作れるようになる、的なものを目指します。 アイコンの品質の上げ方に関してはこういう note もあるみたいですね。 またこの記事を通じて、「〇〇アイコンってどう作るの？」とか「こういう方法もあるよ」などがあればぜひご連絡いただければ喜びます🥳 基礎編幾何学図形で作るアイコン美しいアイコンを見ると作れる気がしないと思いますが、よくよく見てみると幾何学的な図形（○□△）の組み合わせであることがわかります。よほどドメインに特化した特殊なアイコンでなければ丸や三角、四
Best Practices For Naming Design Tokens, Components And Variables — Smashing Magazine
How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way. Naming is hard. As designers and developers, we often struggle finding the right name — for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so it’s difficult to unders
Storybook is the standard tool for UI component development. It’s used to build the most popular design systems on the web, including Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos, and Airbnb Lunar. Quality documentation like this is crucial to help people re-use your UI components, but it’s also a huge pain to get right. In practice, you spend more time maintaining your document
はじめに 最近、Figmaが日本語に対応したり、大型リリースしたり、Figmaの勢いがすごいです。 そのため、Figmaが本格的にデザインツールとしての地位を確立する日も近そうです。 このようなFigmaの勢いにのっかて、「Sketchから、Figmaに乗り換えようとしてるよ」という 企業・団体は多いのではないのでしょうか？ また、勢いだけでは簡単に乗り換えられないという企業・団体もいるかもしれません。 そのためこの記事では、Figmaの代替アプリの１つである「Pixso」について紹介し、 主要なデザインツールと比べらていただけると嬉しいです。 Pixso Pixsoとは？ Pixsoとは、複数人でコラボレーション出来るように オンライン上でUIを作ることができるコラボレーションUIデザインツールです。 UIデザインを作るだけでなく、プロタイプを簡単に作れたり、デザイントークンを管理できた
こんにちは。クラウドワークスでデザイナーをしているYUCCAです。 今回「デザインシステムを導入する為にやって良かった事５選」のお話をしたいと思いますが、デザインシステムと一言で言ってもいろんな側面を持ち抽象度が高いので、前提としてこの記事でのデザインシステムのスコープや私たちのデザインシステム「norman」について軽く紹介させてください。 クラウドワークスのデザイン基盤チームでは、スケーラビリティを持ちながらUIデザインの品質を高められようにする為の一貫した仕組み（デザインシステム）づくりをしています。 このデザインシステムを私たちは「norman」と呼んでいます。 クラウドワークスで使用されている自社CSSフレームワークは2013年から根本的には変わっていない背景があります。なぜ変わっていないのかをここでは省略しますが、10年くらい前のものなので、レガシーなデザインが引き起こす様々な
GitHub - diez/diez: The Design Token Framework — Adopt a unified design language across platforms, codebases, and teams
Diez is an open-source developer toolkit for building & maintaining design tokens at scale. Write & maintain styles in one place, then compile & consume them everywhere: Diez supports any UI component library or codebase written in Swift, Objective-C, Kotlin, Java, TypeScript, JavaScript/JSON, CSS, or SCSS. Diez reduces the cost of delivering a consistent visual identity across your company's app
この記事は弁護士ドットコムAdvent Calendar 2022の10日目の記事です。 昨日は@mmorinoさんでした。 デザインリニューアルのその後 弊社ではtoC向けのサービスサイトを2018年から漸進的にリニューアルしてきました。 いまもまさにサービスを提供し続けている「生きたプロダクト」に手を入れていくプロセスというのはなかなか難しいものでして、見た目やコードが綺麗になったからといって、それで仕事が終わったことにはならないものです。 リニューアルという仕事自体はよく行われることですが、サイトのリニューアルをすると一口にいっても、見た目も含めて一気に刷新するのか、それとも改善を積み重ねていくようなやり方をするかの判断で迷ったことがあるという制作担当の方は割と多いのではないでしょうか。 2018年にスタートした弊社のリニューアルは、ページ単位で部分的に手を入れる形を取りつつも、見た
カンファレンスに参加したので、そのメモ → ざっくりメモったのと、記憶にあるものだけ書いてみる。 Schema by Figma Tokyo会場の様子スケジュールオープニング・キーノート / Opening KeynoteFigma / Sho KuwamotoFreeform Design × Structured Design Figmaは、アイディアレベルのデザインと構造的なデザインの両方をサポートしてきた。一方通行ではなく行ったり来たりするもの。 3つの視点 1) Layout ・画像のありなしや垂直・水平など、レイアウトが変わる場合がある → たくさんのレイアウトが必要な場合、デザインシステムチームでは管理が難しくなる → 大きなコンポーネントの中にそれぞれのレイアウトのデザインを入れる → Nestingを使って組み合わせるのが1つの方法 2) Theming ・メインテーマ以
Introducing Angular v17
Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for a new wave of JavaScript frameworks emerging to support the increasing need for rich web experiences. Today with a new look and a set of forward-thinking features we bring everyone along to the future with version 17, setting new standards for performance and developer experience. In v17 we’re happ
これは Qiita Advent Calendar 2021 「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア」の2日目の記事です。 --- 株式会社スペースマーケット所属のデザイナーの中原です。 スペースマーケットというWebサービスの開発に携わっています。 お鍋には必ずウインナーを入れます。 どんな内容？デジタルプロダクトの開発において、デザインとエンジニアリングは密に連携して協業する（シームレス）のが良いとは言うものの、目指すものの違いがあることは認識しておくと良さそうだね、というお話。 分業で起きていた悩み成果物や担当者がはっきり分かれがちだったデザインとエンジニアリングの間では、次のような問題がよく見られます。 デザイナーとエンジニアで認識が揃っていない、情報がうまく伝わらない 同じプロダクトを扱っているのに成果物・情報がデザインとエンジニアリングで分かれ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
フロントエンドから取り組むデザインシステムの改善 #UI
Amebaのデザインシステム「Spindle」の全貌公開
The future of Chakra UI
エンジニアが知りたいFigma Config 2023の話 - Qiita
Panda CSS - The Origin Story
Design Tokens Format Module
カオスなデザインシステムを生き返らせるためにやったこと
Material Design 3ガイドライン概要 - Qiita
デザイントークンのW3Cコミュニティグループと仕様ドラフト、関連ツールの利用について
デザインシステム完全版｜Figmaでの作り方、事例など【2024年版】｜rikika
Panda CSS の出力結果から注意点を学ぶ
Ultimate ChatGPT cheatsheet for UX UI Designers
【翻訳】UX/UIデザイナーにとっての究極のChatGPTチートシート｜ちゅうさん＠Designer
[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita
Creating & Crafting a Design Token System
Figmaのカラースタイル切り替えプラグインを開発してみました 〜 プラグイン内製で業務開発を改善する
Figma で作る、アイコン｜HikaruTayama
Rich docs with Storybook MDX
【UI/UX】Figmaの代替アプリの筆頭！「Pixso」を使ってみた！！！ - Qiita
デザインシステムを導入する為にやって良かったこと５選｜YUCCA
デザインの共通言語づくり〜デザイントークン導入前夜の思考実験 - Qiita
Schema by Figma Tokyoに参加したので、そのメモ #Schema2022｜じうん
デザインとエンジニアリングを「繋ぐ」部分と「切り分ける」部分｜711fumi｜note