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