Figmaでのスタイルとコンポーネントの管理方法｜スマートキャンプ デザインブログ
スマートキャンプデザインブログ、葉栗です。 Figma内で何度も繰り返し使用する色、文字、部品はそれぞれFigmaのファイル上に登録しておくと、再利用ができてとても効率的です。しかし、その管理方法は人やチームによってバラバラで、何が一番使いやすいのかは分かりません。 そこで今回は、実際のプロダクトデザイン（SaaS）をしているFigmaファイルのスタイルとコンポーネントの管理方法の一部を公開します。 スタイルスタイルとは、Figmaの右側のパネルに表示される装飾系のものを管理するためのものです。 スタイルでは、大きく以下の4つのスタイルを管理できます Text Styleフォントの種類、大きさ、太さなどが定義できます。今回は以下のようにしています。 名前に「 / 」をつけることで階層化できることを利用して、まずTextとIconを分けています。 Textには、Heading1からCapti
Reactチュートリアル1：犬画像ギャラリーを作ろう
本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 Web 入門 HTML 入門 課題：手紙をマークアップする 課題：コンテンツページを構造化する CSS の第一歩 課題：新しい知識を使う JavaScript の第一歩 課題：バカ話ジェネレーター JavaScript の構成要素 課題：イメージギャラリー JavaScript オブジェクト入門 課題：バウンスボールに機能を追加する クライアントサイド Web API ドキュメントの操作 サーバからのデータ取得 本資料で学ぶこと 本資料では以下の内容を学びます。 React の基本 開発の始め方
実践 Docker - ソフトウェアエンジニアの「Docker よくわからない」を終わりにする本
------------------------------------------------------ 2024 年 1 月更新 本書がきっかけで「なんとか Docker を使えるようになりたい」というプログラマの方向けの入門書を秀和システム様から出版させていただけることになりました 開発系エンジニアのためのDocker絵とき入門 https://www.amazon.co.jp/dp/4798071501 紙書籍と電子書籍、どちらもございます この書籍と執筆経験は、みなさまからの驚くほどの高評価があればこそ得られた機会でした いつも本当にありがとうございます 書籍化に際しまして、この場で次のとおり説明させていただきます 1️⃣ 本書 ( Zenn ) は有料化しません 2️⃣ 本書 ( Zenn ) は今後更新しません 3️⃣ 本書 ( Zenn ) と出版される絵とき入門の違い
React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 01 ー atomを使った項目操作 - Qiita
React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 01 ー atomを使った項目操作JavaScriptTypeScriptECMAScriptReactRecoil 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 02 ー selectorによるフィルタリングと集計」 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 03 ー 構成とロジックを整える」 「React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにする」 RecoilはMeta(Facebook)が開発している、Reactの状態を管理するライブラリです。状態をひとまとめにするのではなく、ひとつひとつ細
[Adobe Animate CC使い方講座] アニメーション作成の基本！シェイプトゥイーンの使い方解説！
2023年6月 (8) 2023年5月 (10) 2023年4月 (2) 2023年2月 (5) 2023年1月 (2) 2022年11月 (1) 2022年10月 (10) 2022年9月 (1) 2022年6月 (3) 2022年5月 (17) 2022年4月 (26) 2022年3月 (36) 2022年2月 (22) 2022年1月 (9) 2021年11月 (14) 2021年10月 (7) 2021年9月 (3) 2021年7月 (8) 2021年6月 (11) 2021年5月 (31) 2021年4月 (30) 2021年3月 (17) 2021年2月 (39) 2020年12月 (8) 2020年11月 (12) 2020年10月 (5) 2020年7月 (13) 2020年6月 (9) 2020年5月 (12) 2020年4月 (27) 2020年3月 (14) 2020
![[Adobe Animate CC使い方講座] アニメーション作成の基本！シェイプトゥイーンの使い方解説！](https://cdn-ak-scissors.b.st-hatena.com/image/square/37c7128ac76d65f12bf60605d5ed77bf1bdebf25/height=288;version=1;width=512/https%3A%2F%2Fretu27.com%2Fwp-content%2Fuploads%2Fbotorutool6.gif)
Adobe Animate CCでアニメーションを作る | パソコン工房 NEXMAG
アニメーション作成に長けた「Adobe Animate CC」。ここでは初心者でも無理なく進められるように、スクリプトを使わずに実現できるアニメーションについて解説します。必要なパーツをIllustratorで作り、それらをAnimateへと移し、きちんと動くようにしましょう。 Adobe Animate CCの特性を理解する 「ステージ」と「ライブラリ」について Animateを起動すると、定番サイズはすぐ新規ファイルとして指定可能です。「新規ファイルを素早く開始する」をクリックします。 ただ最初のうちは、左ペインの「新規作成」を選ぶほうがいいでしょう。新規作成をクリックすると、立ち上がった設定画面の下にいくつか「サンプルファイル」が表示されるので、自習には最適だからです。 ここでは、プリセットの「標準」を選択。なお、スクリプトを作成しなくても、プラットホームとして何らかのスクリプトを選
チュートリアル：React の導入 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しくなったチュートリアルでは最新の React の使い方がライブサンプル付きで学べます。 このチュートリアルは React の事前知識ゼロでも読み進められます。 チュートリアルを始める前に このチュートリアルでは小さなゲームを作成します。自分はゲームを作りたいのではないから、と飛ばしたくなるかもしれませんが、是非目を通してみてください。このチュートリアルで学ぶ技法はどのような React のアプリにおいても基本的なものであり、マスターすることで React への深い理解が得られます。 ヒント このチュートリアルは実際に手を動かして学びたい人向けに構成されています。コンセプトを順番に学んでいきたい人は一段階ずつ学べるガイドを参照してください。このチュート
Lightsail コンテナ: クラウドでコンテナを実行する簡単な方法 | Amazon Web Services
Amazon Web Services ブログ Lightsail コンテナ: クラウドでコンテナを実行する簡単な方法 私は通常、デベロッパーに対し AWS クラウドの概要を説明するときには、Amazon Lightsail について話した上で、デモンストレーションのために少し時間を費やします。このサービスは、AWS の使用を開始するために極めて有効です。ユーザーはほんの数分の内に、自分の仮想サーバー上でアプリケーションを実行させることができるからです。これまでに当社では、Amazon Lightsail に対する、コンテナベースのワークロードのデプロイを可能にしてきました。Amazon Lightsail が仮想サーバーに提供しているのと同じシンプルさとバンドル料金により、今後は、コンテナーイメージをクラウドにデプロイできます。 Amazon Lightsail は、費用対効果が高く、わ
https://aws.amazon.com/jp/getting-started/hands-on/
ハンズオンチュートリアル 最初のアプリケーションを起動するためのステップバイステップのチュートリアルを開始しましょう。
EC2よりシンプルな料金体系の「Amazon Lightsail」で仮想プライベートサーバを立てる
「Amazon Web Services」（AWS）活用における便利な小技を簡潔に紹介する連載「AWSチートシート」。今回は「Amazon Lightsail」で仮想プライベートサーバを立てる方法を紹介します AWSを使い始めたら一度は「Amazon EC2」を起動してみると思いますが、慣れないうちはどうしても従量課金が気になってしまうことでしょう。もし簡単な構成を試すのなら、EC2ではなくAmazon Lightsailを利用すると、その不安が解決されるかもしれません。 Amazon Lightsailとは？ Amazon Lightsail（以下、Lightsail）は、AWSが提供するVPS（仮想プライベートサーバ）です。AWS以外が提供しているVPSと同じように、スペックに制限がある代わりに月額料金で利用することができます。EC2のように、インスタンスの消し忘れなどで想定以上の料金
【最短、最小構成】DjangoのWebアプリ公開方法。AWS Lightsail + Nginx + Gunicorn - Qiita
【最短、最小構成】DjangoのWebアプリ公開方法。AWS Lightsail + Nginx + Gunicorn DjangonginxgunicornAWS_Lightsail 概要 Djangoアプリを、最短かつ最小構成で公開する準備をしてみる。 値段が最小とは限らないため注意。 サーバー：AWS Lightsail（一番安い3.5ドル/月プラン） OS：Ubuntu Webサーバーアプリ：Nginx Webアプリ：Django NginxとDjangoの橋渡し：Gunicorn ローカルPC：Win10 1909 SSH通信アプリ：Win10のコマンドプロンプト 1.【AWS Lightsail】サーバーを契約、起動 ・AWS Lightsailは月々定額でサーバーが使える。 ・最初からDjango付きのパッケージを選ぶと1か月無料プランが使えない。OSだけにする。 インスタン
Mr. CreativeEdge - Learn Adobe XD | Adobe XD プロトタイピング実践ガイド〜ユーザーの要求に応えるUI/UXデザイン
Adobe XDは2018年12月のアップデートでCreative Syncテクノロジーベースの新しいネイティブファイルタイプ（クラウドドキュメント）を導入しました。この仕様変更によって「クラウド保存」がデフォルトとなり、従来のCreative Cloud Filesよりも速く、そして堅牢な共有システムに変わりました。 今後のアップデートで、バージョン管理や共有者との共同編集を可能にするライブコラボレーション機能などが搭載されていく予定で、大規模なデザインシステムを構築できるデザインプラットフォームに進化していくことになります。 Adobeは「Spectrum」と呼ばれる大規模デザインシステムを構築しており、Adobe製品・サービスを対象に取り組んでいます。Spectrumは、Adobe Design Brandチームによって管理され、6つのプラットフォーム（UWP、macOS、iOS、A
Hello World - GitHub Docs
Introduction This tutorial teaches you GitHub essentials like repositories, branches, commits, and pull requests. You'll create your own Hello World repository and learn GitHub's pull request workflow, a popular way to create and review code. In this quickstart guide, you will: Create and use a repository. Start and manage a new branch. Make changes to a file and push them to GitHub as commits. Op
Web業界で働くためのPHP入門
オープンソースのWeb開発向けスクリプト言語「PHP」の文法を一から学ぶための入門連載。最終回は、クラスの論理的な入れ物である名前空間とクラスを自動的に読み込むオートロードを解説します。
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
10分で分かる！Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編
Adobe XDは毎月アップデートされ、6/19のアップデートでは待望の固定ヘッダ・フッタ、アートボードのオーバーレイ、数値フィールドの四則計算に対応しました。Webサイトやスホマアプリの制作に役立つ機能ばかりで、作業がどんどん便利になっています。 そんな新機能も含めた使い方が学べる「Adobe XDスターターキット中級編」が公開されました。新機能をはじめ、実践的な使い方まで学べるチュートリアルが収録されています。 Adobe XDスターターキットのダウンロードは、下記ページから。 Windows版とmacOS版が用意されており、Adobe XDファイルをダウンロードできます。 ※Adobe XDを持っていない人も大丈夫、先月からAdobe XDは無料プランで全機能を利用できます。参考: Adobe XDのプラン一覧
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figma Tutorial: Creating Styles
Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリス
GitHub - mixi-inc/JavaScriptTraining: Training course repository for JavaScript
Adobe XDの使い方をマスターしておこう！基本的な操作が10分で身につくAdobe公式のチュートリアルファイル
