Figma の Dev Mode で UI の確認を楽にする｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。 この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。 公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。 エンジニアが Figma にあるデザインを実装する時に、デザインに関する情報をすぐに参照したり、UIに関連するコードを確認したりすることができます。 具体的なメリットは以下の通りです。 開発に必要なデザイン・画面だけを素早く参照できる デザインに関連するリンク(GitHub や Storybook, Notion など)を
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
求人メディアGreen の Flutterの構成について - Atrae Tech Blog
こんにちは、エンジニアの @muttsu_623 です。 最近、開発を頑張っている自分へのご褒美として念願だった『左右分離型キーボード』のMISTEL『Barocco MD770 静音赤軸』を購入しました。 Mistel BAROCCO MD770 RGB メカニカルキーボード 英語配列 85キー 左右分離型 CHERRY MX RGB 静音赤軸 ブラック MD770-PUSPDBBT1 発売日: 2020/01/30メディア: Personal Computers 購入してからまだ2週間くらいなのでまだ効果を実感できているわけではありませんが、肩が開かれた状態で姿勢良く開発を行うことができるため、長期的にみればいいお買い物になったかなと思います。 さて本題ですが、先日弊社の「求人サイト Green」のAndroidアプリをFlutterで作成しリリースしました。 Flutterでアプリを
Photon - Electron開発者要注目のOS X風UIツールキット | ソフトアンテナ
元々GitHubのAtomエディタのために開発されたデスクトップアプリ作成用フレームワーク「Electron」。HTML/CSSといったWeb系技術を使って、クロスプラットフォームのデスクトップアプリを開発可能なため、多くの開発者の注目を集めています。 本日紹介する「Photon」は、このElectron用の便利なコンポーネントを多数収録したUIツールキットです(GitHub、Hacker News)。 ツールバー、タブ、ナビゲーション、リスト、ボタン、フォーム、テーブルといった、GUIアプリ作成に必要なさまざまなコンポーネントを、アプリケーションに素早く組み込むことができます。コンポーネントの見た目もOS X風でクールです。 以下ご紹介。 バー ヘッダーとフッターを組み込むことができます。 バーとアクション バーにボタンを設置してアクションを定義することもできまうｓ． バーとタブ タブを
タップした点から円が広がるようにして画面遷移するアニメーションを作る - Qiita
※ すべてのコードを載せると量が多くなってしまうので、ポイントを絞って説明します。 ※ すべて見たい方はGitHubを参照してください。 ポイントを簡潔にまとめると以下のようになります。 遷移の始まりと終わりの円のCGPathを取得する 遷移先のUIViewControllerのview.layer.maskにCAShapeLayerを代入する 取得したCGPathを使ってアニメーションを実行する 画面遷移のアニメーションの実装には、UIViewControllerAnimatedTransitioningを使っています。 遷移の始まりと終わりの円のCGPathを取得する // 画面全体を覆う円の半径 let radius = { () -> CGFloat in // centerはタップしたCGPoint let x = max(self.center.x, containerView
[翻訳]Issue 55 | Front-end Dev Weekly JP
2015-05-12 [翻訳]Issue 55 Front-end Dev Weekly Issue 55の元記事はこちら コメント 良いUI、UXの心理学、アクセシビリティのネガティブな集まりに打ち勝つこと 疑いなく、今週の記事の中で一番重要なのは全てのデザイナーがアクセシビリティについて知っておくべき7つのことです。SalesforceのUXチームのJesse Hauslerによって書かれた記事で、デジタルなインターフェースを「アクセシブル」にする際の間違いを正すことや、期待した通りにインターフェースを構築するためのまっすぐで簡単なガイドラインにおいてだけではなく、個人的又は技術的に制限があろうとなかろうと、そういったユーザーをブロックしない点において、印象的な役割を果たします。Jesse自身の発言で一番良いのは、「表面的には、コンポーネントの使い方によっては制限を配置することであると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
