2020年3月の記事一覧
【FigmaのAuto Layoutをマスターしよう vol.1】 シンプルなボタン
みなさんFigmaのAuto Layout使ってますか？
私は普段アプリデザインの仕事をしていますが、Auto Layoutがリリースされてからプロトタイピングのスピードが２倍ぐらいになったのでは......？という感覚です。
というわけで、今回はシンプルなボタンを作りながらAuto Layoutの使い方を解説していきたいと思います！
Auto Layoutとは？
はじめに「Auto Layo
アプリの文字列管理がつらかったのでFigmaへの文字列反映を楽にするプラグインを作ってみた
アプリ開発中につらみを感じたためtsvファイルを食わせるとPage上で合致したTextNodeの文字列を自動で置換するプラグインを作りました。
百聞は一見に如かずということでまずはデモをご覧ください。
作った経緯業務で作っているアプリでは、デザインツールとしてFigmaを使っています。
また、デザインデータとは別に文字列の管理には下図のようなスプレッドシートを使い、OS間の文言に差異が生まれ
Figmaでつくるデザインシステム設計#2 Atoms〜Moleculesの作成
はじめに前回の記事で、デザイン設計に関しての準備や作り方の概念及び、Figmaのアセットを利用したAtomsの作り方を書きました。今回は、その続きとしてアセットの作り方の補足と、Atoms同士の組み合わせで生成されるMoleculesの概念、実際のFigmaでの作り方まで解説します。
前回の記事は下記からご覧いただけます。
Figmaでのアセット管理の特徴前回は、Atomsフレームを作り、At
【FigmaのAuto Layoutをマスターしよう vol.2】 アイコン入りボタン
今回はAuto Layoutを使ってアイコンの入ったボタンを作っていきたいと思います。
「Auto Layoutってなに？」という方は前回の記事を読んでいただけたらと思います。
並ぶ方向（Direction）の設定
では最初に中身の要素が並ぶ方向の指定について見ていきましょう。
並ぶ方向には横方向（Horizontal）、縦方向（Vertical）の２つがあります。
Flexboxで言うところ
Figmaを導入して変わった5つのこと｜使い方・事例・記事まとめ
スマートキャンプデザインブログ、Designer / Engineer のhaguriです。
スマートキャンプでよく使用するデザインツールにFigma（フィグマ）というツールがあります。過去にも数回、Figmaに関する記事を書いてきました。
Figmaの導入後からしばらく経ち、会社全体で5つの変化が生まれました。
今回はFigmaによるコラボレーションやデザインワークの変化について、スマートキ
Figmaでつくるデザインシステム設計#1 Atoms作成まで
まずは、figmaを開く前に要件整理を行います。
デザインシステムを作る目的デザインの一貫性を担保し、デザイナーがユーザーが期待する機能性やユーザビリティを素早く提供できるようする。また、デザインシステムを実行した結果として迅速にKPIを達成できるツールとして機能することを目指している。
メリットと留意点サービスをまたいで一貫したUXデザインを実行することができる。
コンポーネントが標準化され
Figmaを使って模写コーディングしよう！
こんにちは！いちくん（@ichikun0000）と申します。
普段は都内のWEB制作会社でエンジニアとして勤務しており、デイトラというオンラインスクールのメンターもやらせていただいております。
また、最近MENTAも始めました。
ご興味ありましたら是非相談してください:)
今回紹介するのはFigmaというツールです。
まずはこれを使ったらどんなことができるのか知るために以下の僕のツイートを見