How to connect AWS Amplify Studio and Figma
AWS Amplify Studio is a visual development environment that connects with Figma to enable quick cloud-based app development.
There is a bit of meandering in the video, so fast forward and / or use the chapter markers.
// Chapters
- Start (0:00)
- Spinning up Amplify Studio (1:45)
- Duplicating the UI Kit (4:08)
- Getting the shareable link from the kit for pasting into Amplify Studio (5:25)
- Entering in the shareable link (7:18)
- Importing components from Figma into Amplify Studio (7:46)
- Working with components in Figma (8:20)
- Duplicating and modifying an item in Figma (8:39)
- Turning an item into a component so that it will sync to Amplify Studio (9:30)
- Resyncing Figma and Amplify Studio ()9:57
// Resources
- Amplify Studio: https://docs.amplify.aws/console
- AWS Amplify UI Kit: https://www.figma.com/community/file/1047600760128127424
- Figma: https://www.figma.com/
- Figma to Code: https://docs.amplify.aws/console/uibuilder/figmatocode
// Let's Connect
Twitter: https://twitter.com/colleenmbrady
Website: https://www.iheartnocode.com
#NoCode #Figma #AWS #Amplify
Видео How to connect AWS Amplify Studio and Figma канала I Heart #NoCode
There is a bit of meandering in the video, so fast forward and / or use the chapter markers.
// Chapters
- Start (0:00)
- Spinning up Amplify Studio (1:45)
- Duplicating the UI Kit (4:08)
- Getting the shareable link from the kit for pasting into Amplify Studio (5:25)
- Entering in the shareable link (7:18)
- Importing components from Figma into Amplify Studio (7:46)
- Working with components in Figma (8:20)
- Duplicating and modifying an item in Figma (8:39)
- Turning an item into a component so that it will sync to Amplify Studio (9:30)
- Resyncing Figma and Amplify Studio ()9:57
// Resources
- Amplify Studio: https://docs.amplify.aws/console
- AWS Amplify UI Kit: https://www.figma.com/community/file/1047600760128127424
- Figma: https://www.figma.com/
- Figma to Code: https://docs.amplify.aws/console/uibuilder/figmatocode
// Let's Connect
Twitter: https://twitter.com/colleenmbrady
Website: https://www.iheartnocode.com
#NoCode #Figma #AWS #Amplify
Видео How to connect AWS Amplify Studio and Figma канала I Heart #NoCode
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![TextFX: Google Labs Collaboration with Lupe Fiasco](https://i.ytimg.com/vi/cHbPotWPAr4/default.jpg)
![Creating a Sticky Notification Bar Using Data from a Webflow CMS Collection](https://i.ytimg.com/vi/WYdG3EMzric/default.jpg)
![Creating Webflow Slugs with Airtable Automations](https://i.ytimg.com/vi/W0kQ4MoXj-A/default.jpg)
![AI Revolution: Quick Unboxing of Relume's Sitemap Generator](https://i.ytimg.com/vi/uOnhna0mb2k/default.jpg)
![Connecting FormSort to Xano via a Webhook](https://i.ytimg.com/vi/xJeb7iv1XLg/default.jpg)
![Find Airtable Bases Share with You](https://i.ytimg.com/vi/WtlmU4II3fM/default.jpg)
![How to Screen Capture Websites Using Airtable Scripting and Rasterwise's GetScreenshot API](https://i.ytimg.com/vi/t7k9KGLwuL8/default.jpg)
![Sneak Peek 1: Xano + Webflow](https://i.ytimg.com/vi/t6VtH_chNvc/default.jpg)
![How to move the "You are editing" component message in Webflow](https://i.ytimg.com/vi/82SRigXOLFg/default.jpg)
![How To Build an RSVP System With Calendar Invites using Tally, Integromat, and Google Calendar](https://i.ytimg.com/vi/sQuHYKr-Gyo/default.jpg)
![Airtable Formula Editor Improvements: Hide Parts of a Formula You Don't Want to See](https://i.ytimg.com/vi/KxS9rUV-8qw/default.jpg)
![How to create conditional workflows in n8n using switches](https://i.ytimg.com/vi/OOoNnrFJ3PA/default.jpg)
![How to Create a Custom Animation in Descript](https://i.ytimg.com/vi/uYLjv-ksuJ4/default.jpg)
![Clean Up Your Pocket Queue with Make + Airtable](https://i.ytimg.com/vi/W_GbDmZ_YgY/default.jpg)
![Adding Style to Lists in Rich Text Fields from Webflow CMS Collection](https://i.ytimg.com/vi/2LGE52NW2qo/default.jpg)
![AI Revolution: Website Creation Tool Dora AI](https://i.ytimg.com/vi/IMouYuA8Jrk/default.jpg)
![AI Revolution: Website Creation Tool Pineapple Builder](https://i.ytimg.com/vi/02fvcwdwgV8/default.jpg)
![AI Revolution: Unboxing with Framer's "Start with AI" feature](https://i.ytimg.com/vi/0U_Yje3qzSE/default.jpg)
![How to Embed a Tweet in Obsidian](https://i.ytimg.com/vi/GDjHWzElWZI/default.jpg)
![Page Transitions Example Built in Webflow](https://i.ytimg.com/vi/Jv31GK74azg/default.jpg)
![How to Extract a Tweet ID from a Twitter URL using Regex](https://i.ytimg.com/vi/94LNVOeIfKg/default.jpg)