Ubie Design Tokensを公開しました
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 Ubieではデザインのクオリティと生産性向上のためデザイン生産基盤の整備に力を入れています。 今回その一環として開発したデザイントークンをnpmパッケージとして公開しました。（現在はColorのみ。） 開発経緯 Ubie Design Tokens開発以前からデザイントークンのようなものは存在しており、CSS Variablesとして実装されていました。しかしユースケースを想定せず作った変数があったり定義が細かすぎたりしたことで「どの変数をどういう場面で使用すれは良いかわからない」という問題が発生していました。 そこで変数の定義を見直し、より実際のデザインに即したデザイントークンを策定するとともに、プロダクトごとの実装差異をなくすためのライブラリの開発に着手しました。 Colorの定義 Ubie Desi
Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
デザインシステム導入しました - 一休.com Developers Blog
プロダクト開発部デザイナーの河村恵です。昨今、デザインシステムを用いた「UI / UXの品質担保」「トンマナの統一」「再利用性の向上による開発効率のUP」が注目されつつある中、一休.comでも本格的なデザインシステムの構築を目指し、プロジェクトが発足しました。 本記事では、プロジェクト発足から一休.comならではの課題・実際に作っているUIガイドラインについてなど赤裸々にお話ししたいと思います。 目次 １） プロジェクト発足に至る経緯 ２） プロジェクトの進め方 ３） 実際に作っているUIガイドライン ４） まとめ 1.プロジェクト発足に至る経緯 CTOからのフィードバック そもそも「デザインシステム導入しよう！」となったきっかけは、CTO（以下直也さん）から一休.com と Yahoo! トラベルの2システムを一つに統合することで実現した、Yahoo!トラベルのリニューアル（詳しくはこち
Figma の Component Properties を学ぶ｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。 この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。 公式のチュートリアルはこちら↓ Component Properties とは？Component Properties (コンポーネントプロパティ) は名前の通り UI コンポーネントにプロパティを設定することができる機能です。プロパティは以下の3つを設定することができます。 Boolean プロパティ (要素の表示・非表示を切り替えられる) Text プロパティ (テキストをプロパティとして管理
デザインの確認などレビューする人向けにFigmaの使い方をまとめました。 | DevelopersIO
Figmaを使ってレビューすることが増えましたね。そんなレビューする人に向けて、とりあえずの使い方をまとめました。 レビュー等でデザインの確認を目的とした、主にViewer権限を持ったユーザー向けのFigmaの使い方についてまとめました。 Viewer権限でも細かく見ていくとざまざまな機能がありますが、ここでは必要な機能＋知っていると便利になる機能を紹介しています。 この記事では次の点にご注意ください。 ショートカットの表記でcmd/ctrlのようにスラッシュで区切られている場合、スラッシュの前がMac、後ろがWindowsの修飾キーを表します。 ショートカットはUSキーボードを基準としているため、JISキーボードだとキーコンビネーションが異なるかもしれません。（筆者はUSキーボードユーザーのため、JISでの確認はしていません）。 ブラウザ版の利用を想定しています。 Figmaアカウントは
「エンジニアに愛される Figma デザインの作り方」文字起こし｜seya
先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。 せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。 「エンジニアに愛されるデザイン」とは？私は二つ大きい基準があると思っていて、それは デザインの意図を掴みやすい デザインが変わった時の変更が容易 があります。そして前者は Structured Design, 後者はデザインをシステム化していくことによって達成できると考えています。 いきなり Structured Design という耳慣れない単語が出てきたので、まずはそこを解説しますと、これは2021年の Schema という Figma のデザインシステムのカンファレンスのキーノートで紹介された概念なのですがデザインには Freeform と Structured という二
コーディングしやすいFigmaデータの作り方 - Qiita
これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません ツール名称などを適宜読み替えていただければSketchやXDでも使える考え方だと思います 対象読者 コーディングを依頼する人 主にUIデザイナー チームによってはディレクターやプロダクトオーナーも該当するかもしれません 作業しやすいデータ作成を理解するために読んでもらえたら嬉しいです コーディングをする人 フロントエンドエンジニア・マークアップエンジニア チームによってはデザイナーも該当するかもしれません 余りにもコーディン
2022年5月現在 Figmaで実施しない方が良いハック - Qiita
この記事の概要 Figmaは最近注目を集めているデザインツールです。 アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。 2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。 将来、ここで紹介したようなハックが検索でヒットして「なんだこれ？不要では？」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。 一辺だけのborderを再現するのにDrop shadowを使う これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。 そのため、一辺だけにborderを指定したい場合はBlurやSpreadを0にしたDrop shadowをかけて再現しているケースがありました。 アップ
Figmaの新機能まとめ #Config 2022｜Naoki Hashimoto
2. オートレイアウトアップデート ・プロパティパネルのUIアップデート ・Absolute Positioning (絶対位置)：オートレイアウトの指定を無視して要素を自由に配置できる ・Negative Spacing：余白をゼロ以下(マイナス)に指定できる ・テキスト省略設定できる 等々https://t.co/qTG2DQ1omB — ❖ ken｜旅するデザイナー (@ken_tbdz) May 10, 2022 今回の変更の目玉はAutoLayoutのリデザインでしょう。 Auto Layoutは便利ながらも、その機能性質上デザイン変更の自由度が低いところがありました。チームで「こうしたらどうかな？」と言われたときにAuto Layoutだとこの要素はここには置けないから一旦解除するか、みたいなことがありました。 今回の変更でそのあたりが解消されて、使いやすくなった印象です。 A
はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
FigmaのSmart Animateを活用したプロトタイプ入門 - ICS MEDIA
新進気鋭のデザインツール「Figma」。オンラインの共同編集やデザインシステムの構築機能などで人気を集めていますが、実は強力なアニメーション機能も搭載されています。 前回の記事『最新版で比較するAdobe XDとFigmaの違い - プロトタイプ機能編』でAdobe XDとFigmaの機能の違いを紹介しましたが、本記事では改めてFigmaの「Smart Animate」について詳しく紹介します。 「Smart Animate」を使うことで、簡単にアニメーションを実現でき、インタラクションのイメージの共有が可能です。これからFigmaを触り始めようと思っている方や、どのデザインツールを使うべきか具体的な機能を知ってから判断したいという方は是非ご覧ください。 Smart Animateとは 「Smart Animate」とは、アートボード間の差分をアニメーションでつないでくれる機能です。2つの
2022年、Figmaで特にお勧めしたいプラグインのまとめ
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
Figmaで線と線を結合する
Figmaで線と線を結合する方法を説明します。 まずは線を２本用意します。 Penツールを選択します。 ２本の線を書きました。 Shiftを押しながら２つの線をクリック(選択)し、ctrl+Eを押します。 ２つの線が１つのグループにまとめられます。 線をダブルクリックすると各点を編集できるモードになります。 その状態で、Shiftを押しながら２本の線の下の点をクリック(選択)します。 Ctrl+Jで２点を結合します。 以上で線を結合できました。 結合した線を曲線にする ここからは余談になりますが、結合した線を曲線にしてみます。 結合した線の真ん中あたりにカーソルを持っていくと点が表示されます。 この点をドラッグすると線の折り目(?)が増えます。 ベンドツールを選択します。 （線をダブルクリックして各点を編集するモードにしていないと表示されないので注意してください） 増やした点をドラッグする
高度なモーションデザインを無料で作成できるWebエディタ「Jitter」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、Webデザインに活用できるモーションデザインをブラウザ上のエディタから誰でも簡単に作れるWebサービスをご紹介します。 手軽に高度なアニメーションを実現できる機能が豊富に提供されており、簡単なものならマウスで数回クリックするだけで完成してしまいます。無料で書き出しにも対応しており、記事後半ではFigmaとの連携方法についても解説しています。 Webのアニメーションにご興味ある方はぜひ参考にしてみてください！ 【 Jitter 】 ■「Jitter」の使い方 それでは、「Jitter」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Try it now】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレスや名前などを入力するだけなので簡単です。 登録したメールアドレス宛にログイン用
Figmaの権限と課金の仕組みで注意することおよび対策｜enpipi_work
Figmaはオンラインで共同編集ができるデザインツールです。無料から気軽に利用することができ、Web上で利用できるため便利な一方で課金や権限の仕組みを正しく理解しないと意図しない過払いやインシデントが発生してしまいます。 この記事では課金と権限の仕様について述べ、気をつけるべきポイントについて記します。 前程 Professional Planでの調査結果です。 Organization Planでは仕様が異なるところがあるかもしれません。 もし誤りがあった場合は、フィードバックいたただければと思いますmm 権限の全体像Figmaの構成はFile, FileをまとめるProject（フォルダのようなもの）, ProjectをまとめるTeamで成り立っています。 Team, Project, Fileにはそれぞれ下記のような権限があります。 Figmaの公式ヘルプページより抜粋 ユーザーはT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Untitled UI Icons — The Ultimate Figma Icon Library
CSSフレームワークやライブラリを素振りするためのFigmaファイルを作った - Qiita
シンプルなパターンがたくさん揃ってる！商用無料で使えるSVGの背景素材 -Basic Pattern Repository
https://www.designencyclopedia.io/
Open design systems from the Figma Community
