Today, I created a UI Card using auto-layout. I made sure to take note of the finer details, such as naming layers, space between elements, alignment, and use of color. I also learned about text layouts for websites; we have the aligned layout and the zigzag layout.
<img src alt class="image--center mx-auto" />
<h3 id="heading-references">References</h3>
<ul>
<li>UI Card Designed with Auto Layout: Figma Crash Course <a target="_blank" href="https://www.youtube.com/watch?v=wuhgLGLrMoM">https://www.youtube.com/watch?v=wuhgLGLrMoM</a>
</li>
<li>Zigzag Image: Text Layouts Make Scanning Less Efficient <a target="_blank" href="https://www.nngroup.com/articles/zigzag-page-layout/">https://www.nngroup.com/articles/zigzag-page-layout</a>
</li>
</ul>

Today, I created a **UI Card using auto-layout**. I made sure to take note of the finer details, such as naming layers, space between elements, alignment, and use of color. I also learned about text layouts for websites; we have the **aligned layout** and the **zigzag layout**.

![]( align="center")

### References

* UI Card Designed with Auto Layout: Figma Crash Course [https://www.youtube.com/watch?v=wuhgLGLrMoM](https://www.youtube.com/watch?v=wuhgLGLrMoM)
 
* Zigzag Image: Text Layouts Make Scanning Less Efficient [https://www.nngroup.com/articles/zigzag-page-layout](https://www.nngroup.com/articles/zigzag-page-layout/)

Day 57: Layout

References