マガジンのカバー画像

UI UX interaction

53
運営しているクリエイター

#figma

間違えがちなUI用語《モーダル?ポップアップ?》

間違えがちなUI用語《モーダル?ポップアップ?》

こんにちは!Link-UのUIチームです!
今回の記事はモーダルやダイアログ、ポップアップなどの似たようなUI用語について具体的な使用用途をまとめました。
混同しがちな用語なので明確に違いを捉えて理解しましょう🔥

モーダル特定の操作を求めるために表示させるウィンドウ
画面を覆い被さるようなウィンドウが表示されることを「モーダル」と呼びます。
情報を入力するように促したり、承諾やキャンセル、項目

もっとみる
094 FigmaのVertical trim(上下トリミング)が惜しい感じ。2023/03/29

094 FigmaのVertical trim(上下トリミング)が惜しい感じ。2023/03/29

やはり日本語の文字って難しいというか、形式が違うというか。

今日は小さいけど大きなアプデがFigmaに入り、「Vertical trim(上下トリミング)」という機能が地味に細かい部分ですが地味に嬉しい!けど、惜しい感じなんです。

おそらく欧文フォントのベースラインを基準にしてるので、日本語フォントは割りかしはみ出ています。上下中央かもちょっと怪しい感じです。

ただ欧文フォントでも個性的な形

もっとみる
「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

「楽天カードらしさ」を追求した楽天カードのデザインシステムの導入と今後について

楽天グループはさまざまなサービスを展開しており、楽天カードのお客様においても楽天カードだけではなく楽天市場や楽天銀行など、ほかの楽天グループのサービスも多くのお客様にご利用いただいています。

それぞれご提供するサービスは別ですが、お客様にとっては1つの「楽天ブランド」であるため、楽天グループ共通のデザインを踏襲しながらも、金融サービスに特化した顧客体験を提供できるよう、楽天カードのデザインチーム

もっとみる
Figma の Component Properties を学ぶ

Figma の Component Properties を学ぶ

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。

この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。

もっとみる
「エンジニアに愛される Figma デザインの作り方」文字起こし

「エンジニアに愛される Figma デザインの作り方」文字起こし

先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。

せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。

「エンジニアに愛されるデザイン」とは?私は二つ大きい基準があると思っていて、それは

デザインの意図を掴みやすい

デザインが変わった時の変更が容易

があります。そして前者は S

もっとみる
Figmaの新機能まとめ #Config 2022

Figmaの新機能まとめ #Config 2022

Figmaの大きなアップデートイベント Config 2022が開催されています。

僕自身業務でガツガツfigmaを使っているのですが、変更点は今まで気になっていたところを解消してくれる良いアップデートだなと思いました。

変更自体は figma公式のツイートのスレッド および それを訳している方 をみればざっとわかりますが、自分でも内容を噛み砕いて理解するために記事にまとめてみました。

内容

もっとみる
Figmaでよく使うショートカット

Figmaでよく使うショートカット

こんにちは。UIデザイナーのカヒブンです。

UIデザインする時にショートカットを使うと、効率良く時間をかけずに作業をすすめられますので、今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にFigmaでよく使うショートカットを学んでみました。

今回の内容は、Figmaを操作しながら学ぶとわかりやすいので、下記のFigmaリンクを参考にしていただければ幸いです。

もっとみる
デザイナーとエンジニアを巻き込んだワークフローの改善

デザイナーとエンジニアを巻き込んだワークフローの改善

「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。

今年の5月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。
以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションな

もっとみる

Figmaの権限と課金の仕組みで注意することおよび対策

Figmaはオンラインで共同編集ができるデザインツールです。無料から気軽に利用することができ、Web上で利用できるため便利な一方で課金や権限の仕組みを正しく理解しないと意図しない過払いやインシデントが発生してしまいます。

この記事では課金と権限の仕様について述べ、気をつけるべきポイントについて記します。

前程
Professional Planでの調査結果です。
Organization Pl

もっとみる
Figmaでオブジェクトを規則的に整列する3つの方法

Figmaでオブジェクトを規則的に整列する3つの方法

スマートキャンプ株式会社でデザイナーをしているhaguriです。

デザインの世界では「近接」「整列」「強弱」「反復」をあわせて、デザインの4大原則とよくいわれています。

今回はFigmaでデザインするうえで、どのように整列していくのがいいのかを説明します。

Figma上で整える方法はいくつかあるのですが、主に「レイアウトグリッド(layout grid)」を使ってUIを整えることが多いと思い

もっとみる
デザインツール「Figma」をデザイナーがさわってみた件

デザインツール「Figma」をデザイナーがさわってみた件

こんにちは、SONICJAMデザイナーの濱川です。

昨今、プロトタイプやUI制作に関わるツールが賑わってますね。

SketchやXDや最近のinvisionStudioなど、画面を描くツールは色々とありますが、Figmaというツールが個人的に便利だったので、ご紹介したいと思います。

Figmaについて少し触って見たところ、SketchやXDに使用感は似ています。
できることもそこまで大きく違

もっとみる
Figmaの使い方、全力でまとめました。

Figmaの使い方、全力でまとめました。

最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。
私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。

導入編アカウント登

もっとみる
Figmaでつくるレイアウト(サンプル付) Google Sheet SyncとAuto Layout編

Figmaでつくるレイアウト(サンプル付) Google Sheet SyncとAuto Layout編

Figmaプラグインの「Google Sheet Sync」と、Auto Layout機能を組み合わせることで効率的なテキストレイアウトが実現します。

準備するもの
Google Sheet SyncSpread Sheetを流し込むためのFigmaプラグインです。

Google Spread Sheet

入力の仕様:一行目は、Tile、Captionなど、後述するFigmaのレイヤー名と一

もっとみる
Figmaのconstraints徹底解説

Figmaのconstraints徹底解説

どうもーUI/UXデザイナーのうっくんです。

以前、Figmaのgroupとframeの違いについて書いた記事が評判でした。

そこではサラッとしか説明しなかったのですが、つまづく人も多そうなので、今回はconstraintsについて解説してみようと思います。

constraintsとは

「constraintsってなんやねん。日本語でおk」と思いますよね。安心してください。そういう方の為に

もっとみる