「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア 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
DMM.com ラボさまの社内勉強会にお声がけ頂き、「Atomic Design & Design Systems」というテーマでお話させて頂きました。 当日の構成 勉強会のテーマがAtomic Designについてだったので、前半はGUILDさん勉強会でお話させて頂いた内容を少し持ってきました。 後半ではAtomic Designの視点をもう少し広げて、Design System（毎回デザインシステム表記とどっちにしようか悩む）全般について、僕が調べたり考えたことをまとめました。 と言っても自分は何かしらのデザインシステムを取り入れたり実践したりと言った経験はありません。そのため、内容のほとんどは海外の事例や記事の引用・意訳になります。Design Systemについてまとまった情報が知りたい！という方には有益かと思いますが、基本的なことは知ってるよーという方にはあまりお役に立てないと思
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
Mr. CreativeEdge - Learn Adobe XD | Adobe XD プロトタイピング実践ガイド〜ユーザーの要求に応えるUI/UXデザイン
Adobe XDは2018年12月のアップデートでCreative Syncテクノロジーベースの新しいネイティブファイルタイプ（クラウドドキュメント）を導入しました。この仕様変更によって「クラウド保存」がデフォルトとなり、従来のCreative Cloud Filesよりも速く、そして堅牢な共有システムに変わりました。 今後のアップデートで、バージョン管理や共有者との共同編集を可能にするライブコラボレーション機能などが搭載されていく予定で、大規模なデザインシステムを構築できるデザインプラットフォームに進化していくことになります。 Adobeは「Spectrum」と呼ばれる大規模デザインシステムを構築しており、Adobe製品・サービスを対象に取り組んでいます。Spectrumは、Adobe Design Brandチームによって管理され、6つのプラットフォーム（UWP、macOS、iOS、A
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
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
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
Animation illustrating how changes to Diez source code trigger visual updates to web, iOS, and Android apps. The Design Token Framework Diez radically reduces the cost of delivering a consistent visual identity across your company’s apps & websites. Get Started What is Diez? Diez is a free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native plat
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
Flexible and powerful, Specify makes it easy to build the exact Design Token workflow your Design System needs. Flexible and powerful, Specify makes it easy to build the exact Design Token workflow your Design System needs. Flexible and powerful, Specify makes it easy to build the exact Design Token workflow your Design System needs.
ヤフー株式会社は、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の役目を担いたいという気持ちもあります。 とはいえ、絶対これが正しいというのもない分野だと思うので、全体感を通して適宜コメ
InVision謹製、DSMこと「DesignSystemManager」を使ってみて - GameWith Developer Blog
GameWith デザイナーの @guchitaka_ です。Web からアプリまで諸々デザインに携わらせていただいております。 inVision が2018年1月提供予定の DSMこと「DesignSystemManager」の EarlyAccess が出来るようになったので早速使ってみました。 www.invisionapp.com InVision「DesignSystemManager」について はじめに、そもそもデザインシステムとは 組織におけるデザインの共通言語となるものです。 従来はスタイルガイドやUIキットを作り、それを関係者が参照するような形で組織のデザインを制御していました。しかしながら少しでも更新が滞ったりすると参照する意味がなくなり、死んだガイドラインとなった経験をされた方も多いのではないでしょうか。メンテナンスにかけるコストも馬鹿にならなく、ガイドラインの整備に
Panda CSS は何を出力するのか？ 先日 Panda CSS がリリースされ、次の紹介記事を書きました。 その時点では、ドキュメントの内容に加えて Next.js に組み込んで動きを見てみたものをベースに書きました。ただ、実際に使うことを考えると、一体どんなファイルが出力されるのかについて理解が不足しているため、もう少し把握しておきたいところです。 ということで今回は、Panda CSS が具体的に出力するファイルの内容を覗いて、どういった点に注意すべきか見てみましょう、という記事です。 CLI のセットアップ 出力内容を確認できれば良いので、特にその他フレームワークなどは導入せず、CLI ベースでのビルドをセットアップします。（※ドキュメント通りに進めるため詳細は割愛します） デフォルトでの出力結果を見てみる まずは、CSS を一箇所も定義しない状態で pnpm panda を実行
画面デザインpart1: 画面UIの解剖 -- 構成要素と操作（翻訳）｜TechRacho by BPS株式会社
こんにちは、hachi8833です。本シリーズ（全3回）は主にデザイナーを想定していますが、フロントエンド開発者、フルスタック開発者、HTMLコーダーにも有用な内容です。 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The Anatomy of all Interfaces -- Part I. A quick overview of how all digital things you interact with are constructed. 著者: Oscar Gonzalez 本記事は、「デザインシステム」および画面UIのデザインや開発におけるデザインシステムの重要性について解説するシリーズ記事のpart 1です。 解剖学（anatomy）は、生き物を部分に切り分けて構造を記述する学問です。画面UIも生き物と同じように、誕生（プロジェクト発足）、成長（UIデザイナ
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 の同期ブロック
Recently I have come across a tool, called Style Dictionary, developed by Danny Banks at Amazon, that allows you to manage design tokens (or “style properties”) for a design system. I’ve used it to replace the existing tool that we used to process the design tokens for our Cosmos design system. I’ve found the task very interesting, and I’ve decided to document it, so that other people may benefit
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
はじめまして。松本芳郎と申します。 デザイナーですが、コーディングばかりやっているものです。 DesignToken2CodeというSketch プラグインを公開いたしました。Sketchデータ内のシェイプからSASS用のカラー変数をコマンド一発でシュッと作成するものです。 「初めてのプラグイン作成！初めてのOSS！」といった私的事情もあり、やりきった気持ちになってしまいそうです。 しかし、作ったツール以上に、ツールを通して自分の考えを公表することが大事だと、会社の凄腕エンジニアに教わりました。 ツールを作りどんな課題を解決しようとしたのか、動機など記しておこうと思います。 ※ 本記事では、コーディング・コードという単語をWebアプリを想定して使用しています。 ・きっかけはスタイルガイドの運用 ・Design Token | デザインの構成要素を命名する ・Sketchとコードの維持は大変
突然ですがアイコン作ってますか🤤 最近は Material Symbols やその他無料のアイコンセットも多いので、イチから作ることも少なくなったように思います。そのせいか、まとまった記事が観測できなかったのでまとめてみました。 本記事の作り方については必ずしも正解とは限りませんが、書いてある操作を大体覚えとけば一通りのアイコンが作れるようになる、的なものを目指します。 アイコンの品質の上げ方に関してはこういう note もあるみたいですね。 またこの記事を通じて、「〇〇アイコンってどう作るの？」とか「こういう方法もあるよ」などがあればぜひご連絡いただければ喜びます🥳 基礎編幾何学図形で作るアイコン美しいアイコンを見ると作れる気がしないと思いますが、よくよく見てみると幾何学的な図形（○□△）の組み合わせであることがわかります。よほどドメインに特化した特殊なアイコンでなければ丸や三角、四
The themes are always changing, but the tokens stay the same
Mineral UI is an open source design system, built by CA Technologies, for which I am a core contributor. Design tokens, popularized by Lightning Design System and helpfully explained by Nathan Curtis, are a valuable asset to any organization, particularly large ones with many products/platforms to support. Think of each token as a relatively static value representing a design decision. In the imag
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
フロントエンドから取り組むデザインシステムの改善 #UI
Amebaのデザインシステム「Spindle」の全貌公開
「Atomic Design & Design Systems」をお話させて頂きました | よりデザイン
The future of Chakra UI
エンジニアが知りたいFigma Config 2023の話 - Qiita
Design Tokens Format Module
Panda CSS - The Origin Story
Diez — The Design Token Framework
Specify | Your Design Token Engine
カオスなデザインシステムを生き返らせるためにやったこと
Material Design 3ガイドライン概要 - Qiita
デザイントークンのW3Cコミュニティグループと仕様ドラフト、関連ツールの利用について
デザインシステム完全版｜Figmaでの作り方、事例など【2024年版】｜rikika
Panda CSS の出力結果から注意点を学ぶ
Ultimate ChatGPT cheatsheet for UX UI Designers
How to manage your Design Tokens with Style Dictionary
【翻訳】UX/UIデザイナーにとっての究極のChatGPTチートシート｜ちゅうさん＠Designer
[LTスライド&原稿]実装まで視野に入れるならAtomic Designを辞めましょう - Qiita
Creating & Crafting a Design Token System
Figmaのカラースタイル切り替えプラグインを開発してみました 〜 プラグイン内製で業務開発を改善する
Sketchプラグイン `DesignToken2Code` を作ってみた｜松本芳郎
Figma で作る、アイコン｜HikaruTayama