minor changes for Figma

app/views/design-system/figma/figma-in-dfe.html

@@ -89,12 +89,12 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-6">{{pageName}}</h1>
 * create a pre-set frame using any of the desktop options Figma provides 
 * click the plus symbol next to the Layout grid option 
 * Figma by default adds a 10px grid but this is not what is required in this example 
-* change it by clicking on the 9 square grid icon and in the dropdown menu, changing the option from “grid” to “columns” 
-* GOV services use 4, 3, or 2 columns as a rule, so set the column count to 4. 
-* set the gutter (the distance between each column), GOV services use a 30px gutter so change the 20 to 30. 
+* change it by clicking on the 9 square grid icon and in the dropdown menu, changing the option from 'grid' to 'columns' 
+* GOV services use 4, 3, or 2 columns as a rule, so set the column count to 4
+* set the gutter (the distance between each column), GOV services use a 30px gutter so change the 20 to 30
 * change the type from ‘Stretch’ to ‘Center’ - this way the grid will be centred in the page no matter what screen size is in use 
 
-GOV services have a grid width of 1200 pixels, which includes 3 gutters of 30 pixels each between the columns. To get the column width subtract the three gutters (90) from 1200 and divide it by 4 (the number of columns) to give 277.5 pixels. (Figma will not handle the half pixel so it will round it up to 278. although 277.5 can be entered). The grid will now appear 
+GOV services have a grid width of 1200 pixels, which includes 3 gutters of 30 pixels each between the columns. To get the column width subtract the 3 gutters (90) from 1200 and divide it by 4 (the number of columns) to give 277.5 pixels. (Figma will not handle the half pixel so it will round it up to 278. although 277.5 can be entered). The grid will now appear 
 
 The 4-column grid is now ready to aid the design. For future use it should be saved to a library of grid styles. To do this, click on the 4 dots icon to open the library and click on the plus icon to create a new style. You can then name the grid, for example ‘GDS 4 column for all desktop screens’.  
 
@@ -110,8 +110,8 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-6">{{pageName}}</h1>
 
 * first switch on the ruler (short cut for this is SHIFT + R) 
 * click and hold the mouse button down when the pointer is inside the ruler and begin dragging a guide (a straight red line) on to the design
-* When the guide is in the correct position release the mouse button
-* To move a guide simply hover the mouse over it and click when the mouse pointer change to pick it back up again
+* when the guide is in the correct position release the mouse button
+* to move a guide simply hover the mouse over it and click when the mouse pointer change to pick it back up again
 
 To remove a guide: 
 
@@ -141,7 +141,7 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-6">{{pageName}}</h1>
 Using frames gives you extra functionality, such as: 
 
 * layout grids 
-* auto layout
+* auto-layout
 * constraints
 * prototyping
 
@@ -197,7 +197,7 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-6">{{pageName}}</h1>
 
 ## Auto-layout 
 
-Auto layout is a property that can be added to frames (it will only work on frames – although applying it to a group will convert it automatically into a frame). It lets users create designs that grow to fill or shrink to fit, and automatically adapt as their contents change.  
+Auto-layout is a property that can be added to frames (it will only work on frames – although applying it to a group will convert it automatically into a frame). It lets users create designs that grow to fill or shrink to fit, and automatically adapt as their contents change.  
 
 This is extremely helpful when: