Figma でスライドを作る時に知っておくと便利なこと｜seya
Figma でスライドを作っている方、増えてきたのではないかと思います。私も最近は Figma で作っています。やはり自由度の高いツールでありながらもコンポーネントなどでスライド共通の装飾なども作れるので生産性も高く気に入っております。 そんな Figma でスライドを作る時にいくつか知っておくといいことを紹介していきます。 プロトタイプで共有よりは SpeakerDeck などのスライド共有サイトを使った方が多分いいなぜかと言うと、Figma のプロトタイプでシェアすると全部のFrameが読み込まれるまで表示がされないからです。せっかく読もうと思ってくれた人を少し待たせてしまいます。Speaker Deckなどでは最初の一スライドだけ読み込まれたらすぐ表示してくれるのでその点は大丈夫です。 例として猫ちゃんのスライドを作ってみました。ちょっと開くまでに時間がかかるのがみて取れると思います
我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜｜seya
やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集
手触りのいい UI を Web で実現するために実装者ができることを考える｜seya
「手触りのよさにこだわってます！」 なんてフレーズはよく聞きますが、具体的に "手触りのよさ" とはなんなのか、実装者としてはどんなところにこだわるべきなのか、ふと気になったので自分なりの考えをしたためてみました。 手触りのよさって何？まず言葉の定義がふわふわしているのでここをはっきりさせてみます。 主観的に普段自分がスマホなりを使っていて手触りがいいと感じる要素をあげてみると次のような要素が思い浮かびました。 1. パフォーマンスがいい レンダリングが重くて動作が遅くなったりしないことや、なんらかアクションを起こした時(なにかをタップしたりした時)にそれに呼応した画面の変化がすぐに行われることが望ましいです。 2. 迷わない 画面の変化が起きた時に、自分が求めている情報がどこに表示されているかすぐに分かることを指します。自分が起こしたいアクションがどこにあるかすぐ分かるか、というのも重要
CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集｜seya
こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ
デザイナーが実装できれば中間成果物としてのデザインはいらないのか｜seya
たまにタイトルのような言説をみかけ、個人的には「必要っしょ」と思っているのだが、なぜ必要なのかを言語化してみたい。 前提 そもそもそんなデザインも実装も高度なレベルで実行できる人間中々いねーよ！という現実もあるのだが、一旦そこはそういう人がいるという前提に立って、それでも必要なのか、を問うてみたい。 あとデザイナーとエンジニアの分業的な観点も一旦考えない。 なんで必要だと思うのか 必要と思っている理由は一つで「デザインは一発で頭に描いたものを作ったら終わり！というものではなく、反復的に変更され得るものだから」だ。 正直自分は自信を持って自分はデザイナーと名乗れるほどの経験がないのだが、ちょっと自分で頑張ってみようかと試みたことがあるので、それを振り返ってデザインのプロセスを言語化すると次のようになると思う 1. デザインしたい対象でユーザに達成してほしいこと or なってほしい状態を定義す
【入門】Figmaのプロトタイプを一から極める｜seya
こんにちは。最近の趣味はFigma、seyaと申します。 本記事はFigmaのプロトタイプ機能をなるべく隅々まで調べて、触って見た内容をまとめたものです。 慣れれば高い忠実度のプロトタイプを高速に作れる強力なツールだと感じたため、この記事を読んで同じ気分になってくれたら嬉しいです。 想定読者 - Figma触りたての方 - プロトタイプ機能は使っているけど、簡単な画面遷移にしか使っていない方 ゴール - 自分のワークフローの中で「Figmaのプロトタイプ機能はこの辺で価値を発揮できそう」というイメージが持てるようになるプロトタイプ機能とは何か最初に「プロトタイプ機能とはなんぞや」というのをベーシックな画面遷移を作ることによってざっくりと説明してから、詳細な用語やテクニックの紹介をしていこうと思います。 すでにある程度触ったことがある方には既知の内容が多いと思うので、適宜読み飛ばしてください
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本国内でデザインシステムに取り組んでいる会社・事例をまとめてみた｜seya