Fix the naming of Figma to code (#5129)

Co-authored-by: Chris Woolum <[email protected]>

Author: 2 people

src/directory/directory.js

@@ -2333,7 +2333,7 @@ const directory = {
         ]
       },
       uibuilder: {
-        title: 'Figma-to-Code (React)',
+        title: 'Figma to Code (React)',
         items: [
           {
             title: 'Overview',
@@ -2368,7 +2368,7 @@ const directory = {
             route: '/console/uibuilder/override'
           },
           {
-            title: 'Figma-to-Code best practices',
+            title: 'Best practices',
             route: '/console/uibuilder/bestpractices'
           }
         ]

src/pages/console/uibuilder/bestpractices.mdx

@@ -1,9 +1,9 @@
 export const meta = {
-  title: `Figma-to-Code best practices`,
-  description: `Constraints of Amplify Studio's Figma-to-React capabilities`,
+  title: `Figma to Code best practices`,
+  description: `Constraints of Amplify Studio's Figma to React capabilities`,
 };
 
-We're constantly improving Amplify Studio to make Figma-to-React code conversion better but there are some constraints that need to be taken into account.
+We're constantly improving Amplify Studio to make Figma to React code conversion better but there are some constraints that need to be taken into account.
 
 ## Make sure to mark frames as components in Figma
 Amplify Studio only converts Figma components. If you only have a Figma "frame", Studio will ignore it because frames tend to be used to layout a set of components.
@@ -14,21 +14,21 @@ Learn more about how Figma components work and how to create them with the video
 
 ## Fonts aren't automatically integrated
 
-By default, Amplify Studio doesn't automatically export the font from the Figma file and download it as part of your `src/ui-components/` folder. To workaround this, you can include the font like you'd usually do yourself in your React app. 
+By default, Amplify Studio doesn't automatically export the font from the Figma file and download it as part of your `src/ui-components/` folder. To workaround this, you can include the font like you'd usually do yourself in your React app.
 
 Review the [Adding Fonts](https://create-react-app.dev/docs/adding-images-fonts-and-files/) documentation from the Create React App on how to configure this.
 
 ## Try to use Figma Auto layout whenever possible
 
-Figma "Auto layout" can make a component significantly more responsive than used fixed position of elements. Think of Figma's Auto layout as "Flexboxes" (`display: flex`) in CSS. 
+Figma "Auto layout" can make a component significantly more responsive than used fixed position of elements. Think of Figma's Auto layout as "Flexboxes" (`display: flex`) in CSS.
 
 Learn more about how Figma's Auto layout works with the video below from the Figma team:
 
 <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PNJxeD29ZTg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Represent UI element states in code (hover, active)
 
-Amplify Studio currently doesn't support Figma-to-React code conversion of UI state. For example, if you want to add a hover effect to a button, you need to [override the component behavior in code](/console/uibuilder/override/#set-hover-states-on-icons) instead of creating a hover variant in Figma.
+Amplify Studio currently doesn't support Figma to React code conversion of UI state. For example, if you want to add a hover effect to a button, you need to [override the component behavior in code](/console/uibuilder/override/#set-hover-states-on-icons) instead of creating a hover variant in Figma.
 
 ## Figma variants must have the same child elements
 

src/pages/console/uibuilder/responsive.mdx

@@ -1,6 +1,6 @@
 export const meta = {
   title: `Responsive Components`,
-  description: `Learn how to configure Figma-to-Code components in order for them to scale according to breakpoints`,
+  description: `Learn how to configure Figma to Code components in order for them to scale according to breakpoints`,
 };
 
 You can use Amplify Studio to dynamically toggle between different component variants based on your app's breakpoint. For example, you can have the navigation bar shrink to a smaller size as the window gets smaller.
@@ -9,7 +9,7 @@ You can use Amplify Studio to dynamically toggle between different component var
 
 ## 1. Set your preferred breakpoints in Figma
 
-To apply breakpoints to components generated by Amplify Studio, you must have a Figma account with the [AWS Amplify Theme Editor](https://www.figma.com/community/plugin/1040722185526429545/AWS-Amplify-Theme-Editor) plugin installed.  
+To apply breakpoints to components generated by Amplify Studio, you must have a Figma account with the [AWS Amplify Theme Editor](https://www.figma.com/community/plugin/1040722185526429545/AWS-Amplify-Theme-Editor) plugin installed.
 
 By default, all Amplify UI provides the following [breakpoints as part of the Amplify UI theme](https://ui.docs.amplify.aws/react/theming/responsive#breakpoints):
 
@@ -41,11 +41,11 @@ To make a component responsive, create different variants for the component base
 
 <Callout warning>
 
-**IMPORTANT:** The variants are required to have the same <strong>component structure</strong>. Elements within the component structure must also use the same <strong>layout method</strong> (i.e. "Auto Layout" or manual). 
+**IMPORTANT:** The variants are required to have the same <strong>component structure</strong>. Elements within the component structure must also use the same <strong>layout method</strong> (i.e. "Auto Layout" or manual).
 
 If the variants don't have the same structure, then Amplify Studio will not be able to import the component.
 
-To customize child elements in variants, you can use the eye icon to hide and show elements in different variants. 
+To customize child elements in variants, you can use the eye icon to hide and show elements in different variants.
 
 ![Image showing that the component structure needs to be the same](/images/studio/responsive/component-structure2.png)
 
@@ -72,7 +72,7 @@ With your design complete in Figma, import and render your component using Ampli
 
 Figma allows users to create variants based on multiple properties.  For example, a component may need `breakpoint` variants (small, medium, and large) and `displayMode` variants (light mode, dark mode).
 
-If your component has any variant properties in addition to `breakpoint`, additional steps are required for responsiveness.  All additional properties <i>must</i> be given inline values, or the component will not be responsive.  
+If your component has any variant properties in addition to `breakpoint`, additional steps are required for responsiveness.  All additional properties <i>must</i> be given inline values, or the component will not be responsive.
 
 In the below examples, the `ResponsiveToolbar` component has both `breakpoint` and `displayMode` variants.  In the first example, the component will not automatically be responsive.
 
@@ -100,7 +100,7 @@ function App() {
 export default App;
 ```
 
-Alternatively, multidimensional variants can be separated into separate components, each with only the `breakpoint` variant property.  For example, the above component could be split into `ResponsiveToolbarLight` and `ResponsiveToolbarDark`, and rendered conditionally.  
+Alternatively, multidimensional variants can be separated into separate components, each with only the `breakpoint` variant property.  For example, the above component could be split into `ResponsiveToolbarLight` and `ResponsiveToolbarDark`, and rendered conditionally.
 
 ```jsx
 function App() {
@@ -113,4 +113,4 @@ function App() {
   );
 }
 export default App;
-```
+```

src/pages/console/uibuilder/slots.mdx

@@ -1,12 +1,12 @@
 export const meta = {
   title: `Component slots`,
-  description: `Add component slots to Amplify-generated Figma-to-code components.  Use this to support nested components or collections in React code.`,
+  description: `Add component slots to Amplify-generated Figma to code components.  Use this to support nested components or collections in React code.`,
 };
 
 Component slots allow you to nest other components as React code within your Studio-generated UI components. You can use component slots to create dynamically generated child components, like Comments on a Post, or to replace a child element altogether.
 
 ## Adding a component slot
-First, you'll need a component.  
+First, you'll need a component.
 1. Log into Amplify and [navigate to Studio](/console/adminui/start/).
 
 2. On the left-hand navigation bar, click UI Library
@@ -18,44 +18,44 @@ First, you'll need a component.
 
 ![Animated image of opening a component and clicking the gear icon to configure](/images/console/slots-console1.gif)
 
-Next, you'll add a component slot to this component.  
-1. On the left-hand side, you'll see the elements of your component. Select a Figma **Frame** (![Figma frame icon](/images/console/figma-frame-icon.png)) within your component.  
+Next, you'll add a component slot to this component.
+1. On the left-hand side, you'll see the elements of your component. Select a Figma **Frame** (![Figma frame icon](/images/console/figma-frame-icon.png)) within your component.
 
   In this example, the "Area" frame is selected.
 
 2. On the right-hand panel, click the "Convert to a slot" button. This will add a new prop to your UI component. Any JSX element you pass into that prop will be rendered in the generated component slot.
 
-3. Optionally, change your property name.  
+3. Optionally, change your property name.
 
   In this example, the property has been renamed "comments"
 
 ![Animated image of selecting a frame and add a component slot](/images/console/slots-console2.gif)
 
 <Callout warning>
 
-Want to undo your component slot creation?  
+Want to undo your component slot creation?
 
 Locate your component slot in the **Component properties** (top-right corner), click the triple-dot menu, and click **Erase property** to remove the component slot.
 
 </Callout>
 
 ## Render the component with component slots in React code
 ### Importing your component
-Once you've added a component slot to your component, click the **Get component code** button at the bottom of the screen to see instructions on the next steps.  
+Once you've added a component slot to your component, click the **Get component code** button at the bottom of the screen to see instructions on the next steps.
 1. Copy the `amplify pull` command, and run it in your Terminal
 2. Copy the import code and paste it in your React app code
 3. Lastly, render the component
 
 ```jsx
 /*Import your component*/
-import { 
-  Ampligram 
+import {
+  Ampligram
 } from './ui-components'
 
 function App() {
   return (
     /*Add your component below*/
-    <Ampligram  style={styles.post}/> 
+    <Ampligram  style={styles.post}/>
   );
 }
 const styles = {
@@ -69,19 +69,19 @@ Here's how the code above would render in your app. *Some minor styling has been
 ![Screenshot of an imported component with a component slot](/images/console/slots1.png)
 
 ### Using your component slot to replace individual child components
-To use the component slot, pass a child component as a property of the parent component, using the prop name you picked earlier. Then, the content you pass will be rendered as a child of the component.  
+To use the component slot, pass a child component as a property of the parent component, using the prop name you picked earlier. Then, the content you pass will be rendered as a child of the component.
 
 
 ````jsx
-import { 
-  Ampligram 
+import {
+  Ampligram
 } from '.ui-components'
 
 function App() {
   return (
     <Ampligram style={styles.post} comments={
       /* Pass your content into the component slot */
-      <div style={styles.comment}> 
+      <div style={styles.comment}>
         <h1>Hi mom!</h1>
         <p>Thanks for checking out my app</p>
       </div>
@@ -100,32 +100,32 @@ Here's how the code above would render in your app. *Some styling has been added
 ![Screenshot of a component with static text in the component slot](/images/console/slots2.png)
 
 ### Adding component slots to collections
-Any component can be [converted to a collection](/console/uibuilder/collections/) and bound to data, and that includes components with component slots.  With a collection, you can [extend your component via code](/console/uibuilder/override/) using the `overrideItems` prop to generate unique content within each component slot.  
+Any component can be [converted to a collection](/console/uibuilder/collections/) and bound to data, and that includes components with component slots.  With a collection, you can [extend your component via code](/console/uibuilder/override/) using the `overrideItems` prop to generate unique content within each component slot.
 
-Here, the Ampligram collection is mapped to a data model called Post. The Post model has a field called Comment, which contains an array of all the Comments associated with this Post. Each of these items in the Comment array is then mapped to the "comments" component slot you created.  
+Here, the Ampligram collection is mapped to a data model called Post. The Post model has a field called Comment, which contains an array of all the Comments associated with this Post. Each of these items in the Comment array is then mapped to the "comments" component slot you created.
 
-Dynamically rendering child components is where component slots get very useful - you can even [pass another collection](/console/uibuilder/override/#nesting-collections) into this component slot. 
+Dynamically rendering child components is where component slots get very useful - you can even [pass another collection](/console/uibuilder/override/#nesting-collections) into this component slot.
 
 <Callout note>
   <strong>Limitation: Nested data fetching for many-to-many relationships</strong>
   <p>
-Automatic nested data fetching for many-to-many relationships is currently not supported. Currently, component slots only automatically fetches data for [has One](/cli/graphql/data-modeling/#has-one-relationship) and [has Many relationships](/cli/graphql/data-modeling/#has-many-relationship), like one Post to many Comments. 
+Automatic nested data fetching for many-to-many relationships is currently not supported. Currently, component slots only automatically fetches data for [has One](/cli/graphql/data-modeling/#has-one-relationship) and [has Many relationships](/cli/graphql/data-modeling/#has-many-relationship), like one Post to many Comments.
   </p>
 </Callout>
 
-The code below will render an Ampligram for each Post in the AmpligramCollection. Then, the Comments for each Post will render in the "comments" component slot.  
+The code below will render an Ampligram for each Post in the AmpligramCollection. Then, the Comments for each Post will render in the "comments" component slot.
 
 In this example, the first Post has 2 comments, but the second post has none.
 
 ```jsx
-import { 
-  AmpligramCollection 
+import {
+  AmpligramCollection
 } from './ui-components'
 
 function App() {
   return (
     <AmpligramCollection style={styles.post} overrideItems={({ item }) => ({
-      comments: 
+      comments:
       <div style={styles.post}>
         {item.Comments.map(comment => <div>{comment.content}</div>)}
       </div>