{"id":21543,"date":"2022-02-14T11:51:14","date_gmt":"2022-02-14T02:51:14","guid":{"rendered":"https:\/\/www.skyarch.net\/blog\/?p=21543"},"modified":"2022-02-14T11:51:14","modified_gmt":"2022-02-14T02:51:14","slug":"aws-amplify-studio%e3%81%a7react%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%81%be%e3%81%97%e3%81%9f","status":"publish","type":"post","link":"https:\/\/www.skyarch.net\/blog\/aws-amplify-studio%e3%81%a7react%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%81%be%e3%81%97%e3%81%9f\/","title":{"rendered":"AWS Amplify Studio\u3067React\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f"},"content":{"rendered":"<h2>\u306f\u3058\u3081\u306b<\/h2>\n<p>AWS Amplify Studio\u3067React\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<h2>\u76ee\u6b21<\/h2>\n<ul>\n<li><a href=\"#overview\">\u624b\u9806\u306e\u6982\u8981<\/a><\/li>\n<li><a href=\"#env\">\u5b9f\u884c\u74b0\u5883<\/a><\/li>\n<li><a href=\"#tejun\">\u624b\u9806<\/a><\/li>\n<li><a href=\"#auto\">\u81ea\u52d5\u751f\u6210\u3055\u308c\u305f\u30ea\u30bd\u30fc\u30b9\u3068\u30b3\u30fc\u30c9<\/a><\/li>\n<li><a href=\"#matome\">\u307e\u3068\u3081<\/a><\/li>\n<\/ul>\n<h2 id=\"overview\">\u624b\u9806\u306e\u6982\u8981<\/h2>\n<ol>\n<li>Figma\u7121\u6599\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210<\/li>\n<li>Amplify CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n<li>Amplify Studio\u3078Figma\u30c7\u30b6\u30a4\u30f3\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/li>\n<li>\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u306e\u4f5c\u6210\u3068\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u306e\u7d10\u3065\u3051<\/li>\n<li>\u30ed\u30fc\u30ab\u30eb\u3078\u306e\u53d6\u308a\u8fbc\u307f\u3068\u52d5\u4f5c\u78ba\u8a8d<\/li>\n<\/ol>\n<h2 id=\"env\">\u5b9f\u884c\u74b0\u5883<\/h2>\n<ul>\n<li>Windows 10<\/li>\n<li>Node.js v16.13.2<\/li>\n<li>Chrome 97.0.4692.71<\/li>\n<li>FireFox 96.0.3<\/li>\n<\/ul>\n<h2 id=\"tejun\">\u624b\u9806<\/h2>\n<h3>Figma\u7121\u6599\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210<\/h3>\n<p>Figma\u306e\u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<br \/>\nhttp:\/\/www.figma.jp\/ja\/figma\/<\/p>\n<p>\u300cTry Figma for free\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21591 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/1.png\" alt=\"\" width=\"742\" height=\"417\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/1.png 742w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/1-300x169.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/1-728x409.png 728w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/a><\/p>\n<p>\u304a\u597d\u304d\u306a\u65b9\u6cd5\u3067SignUp\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21600 size-medium\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact2-233x300.png\" alt=\"\" width=\"233\" height=\"300\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact2-233x300.png 233w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact2.png 444w\" sizes=\"auto, (max-width: 233px) 100vw, 233px\" \/><\/a><\/p>\n<p>\u4eca\u56de\u306f\u300cSkip this step\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21602 size-medium\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact3-300x226.png\" alt=\"\" width=\"300\" height=\"226\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact3-300x226.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact3.png 628w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\u300cStart for free\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21606 size-medium\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact4-300x255.png\" alt=\"\" width=\"300\" height=\"255\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact4-300x255.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact4.png 615w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\u4eca\u56de\u306f\u300cI'll explore by myself\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21607 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact5.png\" alt=\"\" width=\"896\" height=\"563\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact5.png 896w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact5-300x189.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact5-768x483.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact5-728x457.png 728w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><\/a><\/p>\n<p>\u4ee5\u4e0a\u3067Figma\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n<h3>Amplify CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n<p>npm\u30b3\u30de\u30f3\u30c9\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install -g @aws-amplify\/cli\n<\/pre>\n<p>aws\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u8a2d\u5b9a\u3092\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\namplify configure\n<\/pre>\n<p>\u30d6\u30e9\u30a6\u30b6\u304c\u8d77\u52d5\u3057\u3066AWS\u306e\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-21610\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact6-205x300.png\" alt=\"\" width=\"205\" height=\"300\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact6-205x300.png 205w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact6.png 509w\" sizes=\"auto, (max-width: 205px) 100vw, 205px\" \/><\/a><\/p>\n<p>\u30a2\u30ab\u30a6\u30f3\u30c8\u3067\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u623b\u3063\u3066Enter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nFollow these steps to set up access to your AWS account:\n\nSign in to your AWS administrator account:\nhttps:\/\/console.aws.amazon.com\/\nPress Enter to continue\n<\/pre>\n<p>\u30ea\u30fc\u30b8\u30e7\u30f3\u306e\u9078\u629e\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001\u6771\u4eac\u30ea\u30fc\u30b8\u30e7\u30f3\u306e\u5834\u5408\u306fap-northeast-1\u3092\u9078\u629e\u3057\u3066Enter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nSpecify the AWS Region\n? region:\neu-west-2\neu-west-3\neu-central-1\nap-northeast-1\nap-northeast-2\nap-southeast-1\nap-southeast-2\n(Move up and down to reveal more choices)\n<\/pre>\n<p>\u305d\u306e\u307e\u307eEnter\u3059\u308b\u3068AWS\u306b\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u30d6\u30e9\u30a6\u30b6\u306bIAM\u30e6\u30fc\u30b6\u3092\u4f5c\u6210\u3059\u308b\u753b\u9762\u304c\u958b\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? region: ap-northeast-1\nSpecify the username of the new IAM user:\n? user name: (amplify-l962z)\n<\/pre>\n<p>\u5fc5\u8981\u306a\u9805\u76ee\u306f\u5165\u529b\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u307e\u307e\u30e6\u30fc\u30b6\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21611 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7-1024x565.png\" alt=\"\" width=\"728\" height=\"402\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7-1024x565.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7-300x166.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7-768x424.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7-728x402.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact7.png 1461w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u623b\u3063\u3066Enter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nComplete the user creation using the AWS console\nPress Enter to continue\n<\/pre>\n<p>\u5148\u307b\u3069\u4f5c\u6210\u3057\u305fIAM\u30e6\u30fc\u30b6\u306eaccessKeyId\u3092\u5165\u529b\u3057\u3066Enter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nEnter the access key of the newly created user:\n? accessKeyId: &#x5B;hidden]\n<\/pre>\n<p>secretAccessKey\u3092\u5165\u529b\u3057\u3066Enter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? secretAccessKey: &#x5B;hidden]\n<\/pre>\n<p>\u30ed\u30fc\u30ab\u30eb\u306b\u4fdd\u5b58\u3059\u308bAWS\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u306e\u540d\u524d\u3092\u5165\u529b\u3057\u307e\u3059\u3002\u30e6\u30fc\u30b6\u540d\u3068\u540c\u3058\u300camplify-l962z\u300d\u306b\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nThis would update\/create the AWS Profile in your local machine\n? Profile Name: (default)\n<\/pre>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nSuccessfully set up the new user.\n<\/pre>\n<p>\u4ee5\u4e0a\u3067Amplify CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u8a2d\u5b9a\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n<h3>Figma\u306e\u30c7\u30b6\u30a4\u30f3\u3092Amplify Studio\u306b\u30a4\u30f3\u30dd\u30fc\u30c8<\/h3>\n<p>Management Console \u306b\u30ed\u30b0\u30a4\u30f3\u3057\u3066AWS Amplify\u306b\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<\/p>\n<p>Amplify Studio\u306e\u300c\u4f7f\u7528\u3092\u958b\u59cb\u3059\u308b\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21613 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8-1024x487.png\" alt=\"\" width=\"728\" height=\"346\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8-1024x487.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8-300x143.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8-768x365.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8-1536x731.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8-728x346.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact8.png 1673w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u540d\u524d\u3092\u5165\u529b\u3057\u3066\u300cConfirm deployment\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21614 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9-1024x312.png\" alt=\"\" width=\"728\" height=\"222\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9-1024x312.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9-300x91.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9-768x234.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9-1536x468.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9-728x222.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact9.png 1759w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u5c11\u3057\u5f85\u3063\u3066\u3044\u308b\u3068\u51fa\u6765\u4e0a\u304c\u308a\u307e\u3059\u3002<br \/>\n\u300cStudio\u3092\u8d77\u52d5\u3059\u308b\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21615 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10-1024x484.png\" alt=\"\" width=\"728\" height=\"344\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10-1024x484.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10-300x142.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10-768x363.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10-1536x727.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10-728x344.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact10.png 1592w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>Select an envelopment\u3067staging\u3092\u9078\u629e\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact11.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21617 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact11.png\" alt=\"\" width=\"560\" height=\"139\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact11.png 560w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact11-300x74.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/a><\/p>\n<p>Amplify Studio\u304c\u8d77\u52d5\u3067\u304d\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21618 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12-1024x470.png\" alt=\"\" width=\"728\" height=\"334\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12-1024x470.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12-300x138.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12-768x352.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12-1536x705.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12-728x334.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact12.png 1864w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u6b21\u306fFigma\u3067\u30c7\u30b6\u30a4\u30f3\u3092\u4f5c\u6210\u3059\u308b\u306e\u3067\u3059\u304c\u3001\u4eca\u56de\u306fAWS Amplify UI Kit\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<br \/>\nAmplify Studio\u306e\u300cUI Library\u300d\u3092\u9078\u629e\u3057\u3066\u300cGet Started\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21619 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13-1024x343.png\" alt=\"\" width=\"728\" height=\"244\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13-1024x343.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13-300x100.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13-768x257.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13-1536x514.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13-728x244.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact13.png 1895w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u300cUse our Figma template\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21620 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact14.png\" alt=\"\" width=\"916\" height=\"727\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact14.png 916w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact14-300x238.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact14-768x610.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact14-728x578.png 728w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/a><\/p>\n<p>Figma\u306e\u753b\u9762\u304c\u958b\u304f\u306e\u3067\u300cDuplicate\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21621 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15.png\" alt=\"\" width=\"1472\" height=\"418\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15.png 1472w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15-300x85.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15-1024x291.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15-768x218.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact15-728x207.png 728w\" sizes=\"auto, (max-width: 1472px) 100vw, 1472px\" \/><\/a><\/p>\n<p>\u300cShare\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21622 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16.png\" alt=\"\" width=\"1918\" height=\"341\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16.png 1918w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16-300x53.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16-1024x182.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16-768x137.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16-1536x273.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact16-728x129.png 728w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<p>\u300cCopy link\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact17.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21623 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact17.png\" alt=\"\" width=\"697\" height=\"469\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact17.png 697w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact17-300x202.png 300w\" sizes=\"auto, (max-width: 697px) 100vw, 697px\" \/><\/a><\/p>\n<p>Amplify Studio\u306b\u623b\u3063\u3066\u30b3\u30d4\u30fc\u3057\u305fURL\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002<br \/>\n\u300cContinue\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact18.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21625 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact18.png\" alt=\"\" width=\"911\" height=\"731\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact18.png 911w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact18-300x241.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact18-768x616.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact18-728x584.png 728w\" sizes=\"auto, (max-width: 911px) 100vw, 911px\" \/><\/a><\/p>\n<p>\u300cAllow access\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact19.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21626 size-medium\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact19-229x300.png\" alt=\"\" width=\"229\" height=\"300\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact19-229x300.png 229w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact19.png 552w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/a><\/p>\n<p>\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact20.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21627 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact20.png\" alt=\"\" width=\"908\" height=\"389\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact20.png 908w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact20-300x129.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact20-768x329.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact20-728x312.png 728w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/a><\/p>\n<p>Figma\u3067\u30c7\u30b6\u30a4\u30f3\u3092\u65b0\u898f\u4f5c\u6210\u3057\u3066\u9023\u643a\u3057\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u540c\u69d8\u306e\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3067\u30b3\u30f3\u30bd\u30fc\u30eb\u30ed\u30b0\u3092\u78ba\u8a8d\u3059\u308b\u3068JS\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u3066\u3044\u307e\u3059\u3002<span style=\"color: #ff0000;\">\u30d6\u30e9\u30a6\u30b6\u3092Chrome\u304b\u3089FireFox\u306b\u5909\u66f4<\/span>\u3057\u3066\u540c\u69d8\u306e\u624b\u9806\u3092\u5b9f\u65bd\u3059\u308b\u3068\u9023\u643a\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u300cAccept all\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21630 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21-1024x287.png\" alt=\"\" width=\"728\" height=\"204\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21-1024x287.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21-300x84.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21-768x215.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21-1536x430.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21-728x204.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact21.png 1859w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>AmplifyStudio\u306bFigma\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u9023\u643a\u3067\u304d\u307e\u3057\u305f\u3002<br \/>\nAmplifyStudio\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306bFigma\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c1\u5bfe1\u3067\u9023\u643a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21631 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22-1024x274.png\" alt=\"\" width=\"728\" height=\"195\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22-1024x274.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22-300x80.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22-768x206.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22-1536x412.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22-728x195.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact22.png 1840w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<h3>\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u306e\u4f5c\u6210\u3068\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u306e\u7d10\u3065\u3051<\/h3>\n<p>Amplify Studio\u306e\u300cData\u300d\u3092\u9078\u629e\u3057\u3066\u300cAdd model\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\nModel\u306e\u540d\u524d\u300cTest\u300d\u3092\u5165\u529b\u3001Field\u3092\u8ffd\u52a0\u3057\u3066\u300cSave and deploy\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u300cimage_url\u300d\u300ctest\u300d\u300cdetail\u300d\u306e\uff13\u9805\u76ee\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21633 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23-1024x364.png\" alt=\"\" width=\"728\" height=\"259\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23-1024x364.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23-300x107.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23-768x273.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23-1536x546.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23-728x259.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact23.png 1869w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u300cDeploy\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact24.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21634 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact24.png\" alt=\"\" width=\"908\" height=\"265\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact24.png 908w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact24-300x88.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact24-768x224.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact24-728x212.png 728w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/a><\/p>\n<p>\u5c11\u3057\u5f85\u3063\u3066\u3044\u308b\u3068\u5b8c\u4e86\u3057\u307e\u3059\u3002\u5b8c\u4e86\u3057\u305f\u3089\u52d5\u4f5c\u78ba\u8a8d\u7528\u30c7\u30fc\u30bf\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u300cContent\u300d\u3092\u9078\u629e\u3057\u3066\u300cAuto-generate seed data\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21635 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25.png\" alt=\"\" width=\"1873\" height=\"629\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25.png 1873w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25-300x101.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25-1024x344.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25-768x258.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25-1536x516.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact25-728x244.png 728w\" sizes=\"auto, (max-width: 1873px) 100vw, 1873px\" \/><\/a><\/p>\n<p>\u30c7\u30fc\u30bf\u4ef6\u6570\u3068constraint\u3092\u6307\u5b9a\u3057\u3066\u300cGenerate data\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21636 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26-1024x685.png\" alt=\"\" width=\"728\" height=\"487\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26-1024x685.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26-300x201.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26-768x513.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26-728x487.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact26.png 1240w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>image_url\u306f\u753b\u50cf\u306eURL\u304c\u5fc5\u8981\u306a\u306e\u3067<a href=\"https:\/\/source.unsplash.com\/random\">Unsplash\u2019s random photo generator<\/a>\u3067\u30e9\u30f3\u30c0\u30e0\u753b\u50cf\u3092\u751f\u6210\u3057\u3066URL\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21637 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27-1024x449.png\" alt=\"\" width=\"728\" height=\"319\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27-1024x449.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27-300x132.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27-768x337.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27-728x319.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact27.png 1488w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u304c\u3067\u304d\u305f\u306e\u3067UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u7d10\u3065\u3051\u307e\u3059\u3002\u300cUI Library\u300d\u306e\u300cCardA\u300d\u3092\u9078\u629e\u3057\u3066\u300cConfigure\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21638 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28-1024x275.png\" alt=\"\" width=\"728\" height=\"196\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28-1024x275.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28-300x80.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28-768x206.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28-1536x412.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28-728x195.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact28.png 1906w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u300cComponent properties\u300d\u306e\u300cAdd prop\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u300cName\u300d\u306b\u300ctest\u300d\u3068\u5165\u529b\u3001Type\u306b\u300cTest\u300d\u3092\u9078\u629e\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21639 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29-1024x252.png\" alt=\"\" width=\"728\" height=\"179\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29-1024x252.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29-300x74.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29-768x189.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29-1536x378.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29-728x179.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact29.png 1566w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u300cimage\u300d\u3092\u9078\u629e\u3057\u3066\u300cChild properties\u300d\u306e\u300cSet prop\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u300cProp\u300d\u306b\u300csrc\u300d\u3092\u9078\u629e\u3057\u3066\u300cValue\u300d\u306b\u300ctest.image_url\u300d\u3092\u9078\u629e\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21640 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30-1024x328.png\" alt=\"\" width=\"728\" height=\"233\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30-1024x328.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30-300x96.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30-768x246.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30-1536x493.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30-728x234.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact30.png 1562w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u540c\u69d8\u306b2\u3064\u306e\u30c6\u30ad\u30b9\u30c8\u306b\u3082\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3067\u4f5c\u6210\u3057\u305f\u9805\u76ee\u3092\u305d\u308c\u305e\u308c\u7d10\u3065\u3051\u307e\u3059\u3002<br \/>\nFireFox\u3067\u306f\u30d7\u30ec\u30d3\u30e5\u30fc\u306b\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u30d6\u30e9\u30a6\u30b6\u3092Chrome\u306b\u5909\u66f4\u3057\u3066\u753b\u9762\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21641 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31-1024x486.png\" alt=\"\" width=\"728\" height=\"346\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31-1024x486.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31-300x143.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31-768x365.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31-1536x730.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31-728x346.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact31.png 1562w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<h3>\u30ed\u30fc\u30ab\u30eb\u3078\u306e\u53d6\u308a\u8fbc\u307f\u3068\u52d5\u4f5c\u78ba\u8a8d<\/h3>\n<p>\u30ed\u30fc\u30ab\u30eb\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3066cd\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ncd app\n<\/pre>\n<p>React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpx create-react-app .\n<\/pre>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u300cy\u300d\u3092\u5165\u529b\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nNeed to install the following packages:\ncreate-react-app\nOk to proceed? (y)\n<\/pre>\n<p>\u30d6\u30e9\u30a6\u30b6\u3067\u300cGet component code\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066amplify pull\u30b3\u30de\u30f3\u30c9\u3092\u30b3\u30d4\u30fc\u3057\u3066\u5b9f\u884c\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21644 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32-1024x657.png\" alt=\"\" width=\"728\" height=\"467\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32-1024x657.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32-300x193.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32-768x493.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32-360x230.png 360w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32-728x467.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact32.png 1237w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u30d6\u30e9\u30a6\u30b6\u304c\u8d77\u52d5\u3057\u3066Amplify CLI\u306e\u30ed\u30b0\u30a4\u30f3\u8a31\u53ef\u3092\u6c42\u3081\u3089\u308c\u307e\u3057\u305f\u3002\u300cyes\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact33.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21645 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact33.png\" alt=\"\" width=\"594\" height=\"229\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact33.png 594w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact33-300x116.png 300w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/a><\/p>\n<p>editor\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u300cVisual Studio Code\u300d\u3092\u9078\u629e\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Choose your default editor: (Use arrow keys)\nVisual Studio Code\nAndroid Studio\nXcode (macOS only)\nAtom Editor\nSublime Text\nIntelliJ IDEA\nVim (via Terminal, macOS only)\n<\/pre>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u300cjavascript\u300d\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Choose the type of app that you&amp;#039;re building (Use arrow keys)\nandroid\nflutter\nios\njavascript\n<\/pre>\n<p>\u4f7f\u7528\u3059\u308b\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u9078\u629e\u3057\u307e\u3059\u3002\u300creact\u300d\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? What javascript framework are you using (Use arrow keys)\nangular\nember\nionic\nreact\nreact-native\nvue\nnone\n<\/pre>\n<p>\u30bd\u30fc\u30b9\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u5165\u529b\u3057\u307e\u3059\u3002\u305d\u306e\u307e\u307eenter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Source Directory Path: (src)\n<\/pre>\n<p>\u914d\u5e03\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u5165\u529b\u3057\u307e\u3059\u3002\u305d\u306e\u307e\u307eenter\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Distribution Directory Path: (build)\n<\/pre>\n<p>\u30d3\u30eb\u30c9\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3057\u307e\u3059\u3002\u300cnpm run build\u300d\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Build Command: (npm.cmd run-script build)\n<\/pre>\n<p>\u30b9\u30bf\u30fc\u30c8\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3057\u307e\u3059\u3002\u300cnpm start\u300d\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Start Command: (npm.cmd run-script start)\n<\/pre>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3092\u5909\u66f4\u3059\u308b\u4e88\u5b9a\u304c\u3042\u308b\u304b\u9078\u629e\u3057\u307e\u3059\u3002\u300cy\u300d\u3092\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n? Do you plan on modifying this backend? (Y\/n)\n<\/pre>\n<p>App.js\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002CardA\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre>import '.\/App.css';\nimport { CardA } from '.\/ui-components';\n\nfunction App() {\nreturn (\n    &lt;div&gt;\n        &lt;CardA \/&gt;\n    &lt;\/div&gt;\n);\n}\n\nexport default App;\n<\/pre>\n<p>\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm start\n<\/pre>\n<p>\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<pre>Module not found: Error: Can't resolve '@aws-amplify\/ui-react\/internal' in \n<\/pre>\n<p>\u3053\u306e\u4e0b\u306b\u3082\u5927\u91cf\u306e\u30a8\u30e9\u30fc\u304c\u51fa\u529b\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u300c@aws-amplify\/ui-react\u300d\u304c\u898b\u3064\u304b\u3089\u306a\u3044\u3088\u3046\u306a\u306e\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm i @aws-amplify\/ui-react\n<\/pre>\n<p>\u3082\u3046\u4e00\u5ea6\u8d77\u52d5\u3057\u3066\u307f\u307e\u3059\u3002<br \/>\n\u30a8\u30e9\u30fc\u306f\u7121\u304f\u306a\u308aCardA\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u304c\u30c7\u30fc\u30bf\u304c\u53d6\u5f97\u3067\u304d\u3066\u3044\u307e\u305b\u3093\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21646 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34-1024x254.png\" alt=\"\" width=\"728\" height=\"181\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34-1024x254.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34-300x75.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34-768x191.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34-1536x382.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34-728x181.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact34.png 1920w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306ejsx\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<br \/>\namplify\u306edatastore\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066State\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002<br \/>\n\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u306e\u4ef6\u6570\u5206CardA\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n<pre>import { useEffect, useState } from \"react\";\nimport { DataStore } from '@aws-amplify\/datastore';\nimport { Test as testModel } from \".\/models\";\nimport { CardA } from \".\/ui-components\";\n\nconst TestView =()=&gt;{\n    const [state, setState] = useState([]);\n\n    useEffect(() =&gt;{\n        const fetchTests = async() =&gt;{\n            const output = await DataStore.query(testModel);\n            setState(output)\n        }\n        fetchTests()\n    }, [])\n\n    return (\n        &lt;div&gt;\n            {state.map((test, index) =&gt;{\n                return &lt;CardA key={index} test={test} \/&gt;\n            })}\n        &lt;\/div&gt;\n    )\n}\n\nexport default TestView;\n<\/pre>\n<p>CardA\u306fTestView\u304b\u3089\u51fa\u529b\u3059\u308b\u305f\u3081App.js\u306e\u300cCardA\u300d\u3092\u300cTestView\u300d\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<pre>import '.\/App.css';\nimport TestView from '.\/TestView';\n\nfunction App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;TestView \/&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/pre>\n<p>\u30c7\u30fc\u30bf\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact35.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21647 size-full\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact35.png\" alt=\"\" width=\"748\" height=\"883\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact35.png 748w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact35-254x300.png 254w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact35-728x859.png 728w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/a><\/p>\n<h2 id=\"auto\">\u81ea\u52d5\u751f\u6210\u3055\u308c\u305f\u30ea\u30bd\u30fc\u30b9\u3068\u30b3\u30fc\u30c9<\/h2>\n<p>Figma\u304b\u3089Amplify Studio\u3078\u9023\u643a\u3057\u305fUI\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u300csrc\/ui-components\u300d\u306b\u5c55\u958b\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21649 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36-1024x659.png\" alt=\"\" width=\"728\" height=\"469\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36-1024x659.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36-300x193.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36-768x494.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36-728x468.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact36.png 1373w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068TypeScript\u306e\u578b\u5b9a\u7fa9\u304c\u751f\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3068\u306e\u7d10\u3065\u3051\u3067\u884c\u3063\u305f\u300csrc=&#123;test?.image_url&#125;\u300d\u306e\u3088\u3046\u306b\u5c55\u958b\u3055\u308c\u3066\u3044\u3066\u3001\u30c7\u30fc\u30bf\u304c\u8868\u793a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059.<\/p>\n<p>\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3067\u4f5c\u6210\u3057\u305f\u30c7\u30fc\u30bf\u578b\u306f\u300csrc\/models\/schema.js\u300d\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21650 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37-1024x606.png\" alt=\"\" width=\"728\" height=\"431\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37-1024x606.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37-300x178.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37-768x455.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37-728x431.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact37.png 1115w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u307e\u305f\u3001\u300csrc\/models\/index.js\u300d\u3067DataStore\u304b\u3089\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3069\u3061\u3089\u3082TypeScript\u306e\u578b\u5b9a\u7fa9\u304c\u751f\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21651 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38-1024x359.png\" alt=\"\" width=\"728\" height=\"255\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38-1024x359.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38-300x105.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38-768x269.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38-728x255.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact38.png 1225w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>DataStore\u304b\u3089\u547c\u3073\u51fa\u3055\u308c\u308bGraphQL\u306fAWS AppSync\u3067\u30db\u30b9\u30c8\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21652 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39-1024x340.png\" alt=\"\" width=\"728\" height=\"242\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39-1024x340.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39-300x100.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39-768x255.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39-1536x511.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39-728x242.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact39.png 1796w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<p>\u30c7\u30fc\u30bf\u306fDynamoDB\u306b\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n<a href=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21653 size-large\" src=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40-1024x426.png\" alt=\"\" width=\"728\" height=\"303\" srcset=\"https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40-1024x426.png 1024w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40-300x125.png 300w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40-768x319.png 768w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40-1536x639.png 1536w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40-728x303.png 728w, https:\/\/www.skyarch.net\/blog\/wp-content\/uploads\/2022\/02\/AmplifyStudioFigmaReact40.png 1895w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><\/a><\/p>\n<h2 id=\"matome\">\u307e\u3068\u3081<\/h2>\n<p>AWS Amplify Studio\u3068Figma\u3092\u9023\u643a\u3057\u3066React\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u52d5\u304b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<h3>\u826f\u3044\u3068\u3053\u308d<\/h3>\n<ul>\n<li>\u81ea\u52d5\u751f\u6210\u3055\u308c\u305fReact\u306e\u30b3\u30fc\u30c9\u3082\u8aad\u3081\u308b\u72b6\u614b\u3067\u3001TypeScript\u306e\u578b\u5b9a\u7fa9\u3082\u81ea\u52d5\u751f\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n<li>DynamoDB\u306e\u30c7\u30fc\u30bf\u64cd\u4f5c\u3082DataStore\u3092\u4f7f\u3063\u3066AWS AppSync\u3068\u9023\u643a\u3057\u3066GraphQL\u3067\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<h3>\u8003\u616e\u304c\u5fc5\u8981\u306a\u3068\u3053\u308d<\/h3>\n<ul>\n<li>\u751f\u6210\u3055\u308c\u305fReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5909\u66f4\u3057\u306a\u3044\u3088\u3046\u306b\u5b9f\u88c5\u3092\u884c\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u30b3\u30e1\u30f3\u30c8\u306bamplify pull\u3059\u308b\u3068\u4e0a\u66f8\u304d\u3055\u308c\u308b\u306e\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u306a\u3044\u3088\u3046\u306b\u6ce8\u610f\u66f8\u304d\u304c\u3042\u308b\u305f\u3081\u3067\u3059\u3002<\/li>\n<li>Figma\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068React\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c1\u5bfe1\u306b\u306a\u308b\u306e\u3067\u3001UI\u306e\u8a2d\u8a08\u3068React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a2d\u8a08\u3092\u4e00\u81f4\u3055\u305b\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<p>\u5f8c\u8005\u306fAWS Amplify Studio\u306e\u8ab2\u984c\u3067\u306f\u306a\u304f\u3001React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\u3068\u304d\u306e\u5171\u901a\u7684\u306a\u8ab2\u984c\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u306f\u3058\u3081\u306b AWS Amplify Studio\u3067React\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002 \u76ee\u6b21 \u624b\u9806\u306e\u6982\u8981 \u5b9f\u884c\u74b0\u5883 \u624b\u9806 \u81ea\u52d5\u751f\u6210\u3055\u308c\u305f\u30ea\u30bd\u30fc\u30b9\u3068\u30b3\u30fc\u30c9 \u307e\u3068\u3081 \u624b\u9806\u306e\u6982\u8981 Figma\u7121\u6599\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210 Amplify C&#8230;<\/p>\n","protected":false},"author":198,"featured_media":21657,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"ja","_original_post":"https:\/\/www.skyarch.net\/blog\/?p=21543","footnotes":""},"categories":[1142,20,276],"tags":[],"class_list":{"0":"post-21543","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-amplify","8":"category-aws","9":"category-serverless","10":"ja"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/21543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/users\/198"}],"replies":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/comments?post=21543"}],"version-history":[{"count":37,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/21543\/revisions"}],"predecessor-version":[{"id":21656,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/posts\/21543\/revisions\/21656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media\/21657"}],"wp:attachment":[{"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/media?parent=21543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/categories?post=21543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.skyarch.net\/blog\/wp-json\/wp\/v2\/tags?post=21543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}