シェア
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する 下部にあるフッターナビゲーションの大きく
2023年初めに星野(s127)が会津大学Zliサークル用にポスターテンプレのFigmaのファイルを公開しました。この記事はそのファイルの説明や利用規約などをまとめたものです。 内容としては以下のポスター21枚が含まれています。 また、ポスター制作の心構えやFigmaのTipsについてはこちらのnoteにまとめたので、ぜひご覧下さい。 利用方法ファイル自体は以下のリンクに進み「Get a copy」で入手できます。 大人数で共同編集をする場合は、その後Teamsを作成
2023年初めに星野(s127)が会津大学Zliサークル用にポスターテンプレのFigmaのファイルを作り、公開しました。 この記事は、その制作過程で利用したTipsについてまとめたものです。 Zliに関係ない方も、Figmaの表現を広げるTipsがたくさんあると思うので、ぜひご覧ください。 また、ポスター制作の心構えについては別の記事に書いています。 Figmaでポスターを作るメリットデメリット- メリット 無料で利用できる ロゴ作り、画像編集などできることが多い
2023年初めに星野(s127)が会津大学Zliサークル用にポスターテンプレのFigmaのファイルを作り、公開しました。 この記事は、上記のテンプレートを改変する上で参考になりそうな、初心者向けにポスター制作をする人へ向けた心構えなどについて話す記事です。 より具体的なFigmaでポスターを作る際のTipsはこちらをご覧ください。 ツール大体以下のようなツールでポスター制作を行います。 レベル1（入門者） パワポ、keynoteなどのプレゼンテーション作成ツール
最近、アプリのデザインを二人で行う機会があった。 その時に作ったルールを紹介する記事。 前提プラン：無料 デザイナー：複数人 ページ構成 DesginSystem：デザインシステム Layout：画面デザイン Other：元のデザイン、ロゴ、Prototypeなど この手法のメリット タスクの担当を明確にできる デザインを評価し合える 素材の処理方法などに一定のルールを持てる 補足 ペアデザインとは別 かんばんボード今回はかんばんボードを自作した。理
Figmaでスライドを作る記事はたくさん投稿されています。 ただし、最終目標がpdf出力のものが多く、アニメーションやVariantsの利用方について解説している記事はあまり見かけません。 今回は、それらの機能を中心に解説します。 対象者 Figmaの基本的な機能が使える人 Prototype、Variants pdfを捨てられる人 スクロールFigmaではスライド内に複数スクロールする要素を含められます。 スライド自体も上記の条件に当てはまればスクロールしたり
Qiitaからのお引越し記事です。（元記事） 私MonoのFigmaファイルを初めて触るエンジニアに最低限の機能を教える記事。 他のFigmaファイルに対しても8割くらいは応用が効く内容になっていると思います。 心構え開発 >> デザイン 特にハッカソンでは、技術がメインで評価されます。 デザインに時間がかかって動かないプロダクトを作るよりは、全てデフォルトコンポネントでダサいけれど動く物を作る方ががマシだと思ってます。 デザイナーは実装の大変さを分かってない
知識ゼロの人が「とりあえずUIデザイナーにならないと死ぬ！何すればいんだぁああ？」って突撃してきた時に渡すための文章。 初歩的なことしか書いていないが、だからこそ1人だけでも進められ、無駄にならない内容が多いと思う。 対象者：UIデザイナー知識ゼロ 必要なもの：PC、3235円 ※以下の内容について 「（）」はオプションです。上の必要なお金には含まれていません 「1day」などで表される必要時間は、1日丸々使った場合の想定です マインドややり方よりも、具体的に何を
この記事ではDesin Systemの構築方法やCanvasへのデザインの配置方法について解説します。 Figmaの機能やDesgin Systemの記事は結構noteでも見かけます。しかし、Figmaファイルの全体の構成を説明している記事が少なかったので、自分流をまとめてみました。 全て無料プランで行える内容になっているので、ビギナーの人も是非読んでみてください！ また、以下で説明するファイルのテンプレートを無料公開しています。ぜひ利用してみてください！ ファイルについ
これは何？会津大学で2022年の6、7月ごろにAIzuHackというイベントが開催されました。AizuHackは一ヶ月の勉強会、一ヶ月のチームハッカソンで構成されたイベントです。私はそこでデザインコースの勉強会講師を担当しさせていただきました。 今回は、その時に利用した250以上のスライドの資料を公開します。 所々雑ですが、少しでも誰かの力になってくれたら幸いです。 内容Figmaの機能とUIの幅広い知識についてまとめてあります。 大体の目次は次のとおりです。 基本 U
Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 6. リスト要素だけはAuto layoutを適用構造 Frame-1 - fix 要素 - Frame-2 (Auto layout) - $spacing - リスト (Auto layout) - リスト要素1 - リスト要素2 - $spacing 解説 先ほども言ったように、Frame-2の子孫要素には$s
Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 4. Frame-2の要素の間に余白を挿入構造 Frame-1 - fix 要素 - Frame-2(Auto layout) - $spacing - 要素1 - $spacing - 要素2 - $spacing 解説 まず、FigmaのAuto layoutの問題点について考えてみましょう。1番の問題点は、間隔ごとに個
Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 先ほど作ったFrame-2に子要素として、さまざまな種類を入れまくっていきます。 では、入れる要素の配置ごとに見ていきましょう！ 3-1. 要素が1つで中央揃えしたい時 構造 Frame-1 - fix 要素1 (status bar) - fix 要素2 (bottom navigation) - Frame-2 (Auto layout)
（こちらはQiitaに以前投稿した記事のお引越しです） Figmaのスマホ設計手法① Figmaのスマホ設計手法② Figmaのスマホ設計手法③ Figmaのスマホ設計手法④ 今回は、自分なりのFigmaの設計手法について4日ほど悩みまくって決めました。長いですが最後まで読んでいただけると嬉しいです。 対象の人 Auto layout, Variantsを理解している人 Figmaでモバイルアプリ画面を作る際に、Auto layoutをノリで適用している人
