# Mathieu Legault — full site content

> Hi, bonjour 👋. I’m a Product Designer at Fern, shaping best-in-class developer and agentic experiences. Previously, I worked on Dev Docs at Shopify, Design Systems at Narvar, and 3D printing experiences at Formlabs.

Every page of https://legault.me as markdown, one section per page, each
preceded by its canonical URL. Per-page twins: append `.md` to any page
URL. Index of pages: https://legault.me/llms.txt

---

Source: https://legault.me/

Hi, bonjour, I'm Mathieu Legault

# Product designer shaping developer & agentic experiences.

Currently at [Fern](https://buildwithfern.com/). Previously, I worked on Dev Docs at [Shopify](https://www.shopify.dev/), Design Systems at [Narvar](https://corp.narvar.com/), and 3D printing experiences at [Formlabs](https://formlabs.com/).

- [View work](https://legault.me/work.md)
- [Get in touch](https://legault.me/contact.md)
## Featured work

- [All projects](https://legault.me/work.md)
- [Shopify.dev](https://legault.me/work/shopify.md)
- [Metadata Fixer](https://legault.me/work/metadata-fixer.md)
- [Narvar](https://legault.me/work/narvar.md)
- [Coderlife](https://legault.me/work/coderlife.md)
- [Formlabs](https://legault.me/work/formlabs.md)
- [PromptCut](https://legault.me/work/prompt-cut.md)
- [SiteDownload](https://legault.me/work/site-download.md)
## From the blog

- [All posts](https://legault.me/blog.md)
- [Introducing PromptCut: Edit Videos at the Speed of Thought](https://legault.me/blog/introducing-promptcut-edit-videos-at-the-speed-of-thought.md)
- [How to Export Your Webflow Site and Rebuild It with AI + Deploy to Vercel](https://legault.me/blog/how-to-export-your-webflow-site-and-rebuild-it-with-ai-deploy-to-vercel.md)
- [Export Figma Variables as CSS Variables with Ease](https://legault.me/blog/export-figma-variables-as-css-variables-with-ease.md)

## Dribbble shots

- [All shots](https://legault.me/shots.md)
- [PromptCut: an AI video editor](https://dribbble.com/shots/27158929-PromptCut-an-AI-video-editor)
- [AI Taskbar](https://dribbble.com/shots/26222747-AI-Taskbar)
- [BirdCounts](https://dribbble.com/shots/21089293-BirdCounts)
- [Writing Portfolio](https://dribbble.com/shots/15208294-Writing-Portfolio)

---

Source: https://legault.me/work

Index / Work

# Selected work

16 projects

- [Shopify.dev](https://legault.me/work/shopify.md)
- [Metadata Fixer](https://legault.me/work/metadata-fixer.md)
- [Narvar](https://legault.me/work/narvar.md)
- [Coderlife](https://legault.me/work/coderlife.md)
- [Formlabs](https://legault.me/work/formlabs.md)
- [PromptCut](https://legault.me/work/prompt-cut.md)
- [SiteDownload](https://legault.me/work/site-download.md)
- [Waypoint3D](https://legault.me/work/waypoint3d.md)
- [Material Explorer](https://legault.me/work/material-explorer.md)
- [The Digital Factory & User Summit](https://legault.me/work/fus-tdf.md)
- [Motion Graphics Library](https://legault.me/work/motion-graphics-library.md)
- [Brand.ai](https://legault.me/work/brand-ai.md)
- [Zoo Time](https://legault.me/work/zoo-time.md)
- [Learn Ruby On Rails](https://legault.me/work/learn-ruby-on-rails.md)
- [Aether and Elements](https://legault.me/work/aether-and-elements.md)
- [Schmooz](https://legault.me/work/schmooz.md)

---

Source: https://legault.me/blog

Index / Blog

# Notes & writing

11 entries

- [Introducing PromptCut: Edit Videos at the Speed of Thought](https://legault.me/blog/introducing-promptcut-edit-videos-at-the-speed-of-thought.md)
- [How to Export Your Webflow Site and Rebuild It with AI + Deploy to Vercel](https://legault.me/blog/how-to-export-your-webflow-site-and-rebuild-it-with-ai-deploy-to-vercel.md)
- [Export Figma Variables as CSS Variables with Ease](https://legault.me/blog/export-figma-variables-as-css-variables-with-ease.md)
- [Figma Variables: Hex Colors to Aliases Automatically](https://legault.me/blog/figma-variables-hex-colors-to-aliases.md)
- [How to Resize Elements of a Component Instance](https://legault.me/blog/figma-how-to-resize-elements-of-a-components-instance.md)
- [Creating Scalable Components in Figma for Your Pattern Library](https://legault.me/blog/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library.md)
- [Versatile Image Filters for Figma Components](https://legault.me/blog/image-filters-in-figma-components-with-layer-blend-modes.md)
- [Free Alembic 3D Dust Particles to Use in Your Scene](https://legault.me/blog/free-alembic-3d-dust-particles-to-use-in-your-scene.md)
- [How To Correctly Export And Migrate Away From Google Photos](https://legault.me/blog/correctly-migrate-away-from-google-photos-to-icloud.md)
- [Creating a 3D Print Material in Cinema 4D + Freebie](https://legault.me/blog/creating-a-3d-print-material-in-cinema-4d.md)
- [How To Make Beautiful Minecraft Renders In Cinema 4D](https://legault.me/blog/minecraft-renders-tutorial.md)

---

Source: https://legault.me/about

Dossier / About

# Every portfolio should have this sort of page, right? 😜

Hi, and welcome to my site!

My name is Mathieu Legault, I'm a Product Designer from Canada and have studied Global Business and Digital Arts at the University of Waterloo.

I've worked on dozens of projects with friends and clients, or just for fun across a wide range of digital mediums and using many different design tools along the way. I'm primarily a Product Designer, but I also love doing 3D art, photography, and making silly websites.

Recently, I've been working a lot on dev tooling at [Shopify](https://shopify.dev/docs) and at [Fern](https://buildwithfern.com/), and augmenting those experiences with AI.

If you want to chat, [reach out to me](https://legault.me/contact.md)!:)

![Mathieu Legault](https://legault.me/images/pages/about/portrait.jpg)
*FIG. 00 — M. Legault*

---

Source: https://legault.me/contact

Channel / Contact

# Got a project in mind?

Contact me and let's work together!

*Interactive form — use it at [/contact](https://legault.me/contact).*

- 01 — Name
- 02 — Email
- 03 — Message

---

Source: https://legault.me/photography

Index / Photography

# Photography

204 plates

![Photo 001](https://legault.me/images/photography/photo-001/image.jpg)

![Photo 004](https://legault.me/images/photography/photo-004/image.jpg)

![Photo 007](https://legault.me/images/photography/photo-007/image.jpg)

![Photo 010](https://legault.me/images/photography/photo-010/image.jpg)

![Photo 013](https://legault.me/images/photography/photo-013/000006.jpg)

![Photo 016](https://legault.me/images/photography/photo-016/000010.jpg)

![Photo 019](https://legault.me/images/photography/photo-019/000013.jpg)

![Photo 022](https://legault.me/images/photography/photo-022/000016.jpg)

![Photo 025](https://legault.me/images/photography/photo-025/000019.jpg)

![Photo 028](https://legault.me/images/photography/photo-028/000022.jpg)

![Photo 031](https://legault.me/images/photography/photo-031/000025.jpg)

![Photo 034](https://legault.me/images/photography/photo-034/000028.jpg)

![Photo 037](https://legault.me/images/photography/photo-037/000031.jpg)

![Photo 040](https://legault.me/images/photography/photo-040/000034.jpg)

![Photo 043](https://legault.me/images/photography/photo-043/000037.jpg)

![Photo 046](https://legault.me/images/photography/photo-046/000040.jpg)

![Photo 049](https://legault.me/images/photography/photo-049/000043.jpg)

![Photo 052](https://legault.me/images/photography/photo-052/000046.jpg)

![Photo 055](https://legault.me/images/photography/photo-055/000049.jpg)

![Photo 058](https://legault.me/images/photography/photo-058/000052.jpg)

![Photo 061](https://legault.me/images/photography/photo-061/000055.jpg)

![Photo 064](https://legault.me/images/photography/photo-064/image.jpg)

![Photo 067](https://legault.me/images/photography/photo-067/000061.jpg)

![Photo 070](https://legault.me/images/photography/photo-070/000064.jpg)

![Photo 073](https://legault.me/images/photography/photo-073/000067.jpg)

![Photo 076](https://legault.me/images/photography/photo-076/000070.jpg)

![Photo 079](https://legault.me/images/photography/photo-079/000073.jpg)

![Photo 082](https://legault.me/images/photography/photo-082/000076.jpg)

![Photo 085](https://legault.me/images/photography/photo-085/000079.jpg)

![Photo 088](https://legault.me/images/photography/photo-088/000084.jpg)

![Photo 091](https://legault.me/images/photography/photo-091/000091.jpg)

![Photo 094](https://legault.me/images/photography/photo-094/000094.jpg)

![Photo 097](https://legault.me/images/photography/photo-097/000097.jpg)

![Photo 100](https://legault.me/images/photography/photo-100/000100.jpg)

![Photo 103](https://legault.me/images/photography/photo-103/000103.jpg)

![Photo 106](https://legault.me/images/photography/photo-106/000106.jpg)

![Photo 109](https://legault.me/images/photography/photo-109/000112.jpg)

![Photo 112](https://legault.me/images/photography/photo-112/000115.jpg)

![Photo 115](https://legault.me/images/photography/photo-115/000122.jpg)

![Photo 118](https://legault.me/images/photography/photo-118/000125.jpg)

![Photo 121](https://legault.me/images/photography/photo-121/000128.jpg)

![Photo 124](https://legault.me/images/photography/photo-124/000131.jpg)

![Photo 127](https://legault.me/images/photography/photo-127/000135.jpg)

![Photo 130](https://legault.me/images/photography/photo-130/000139.jpg)

![Photo 133](https://legault.me/images/photography/photo-133/000142.jpg)

![Photo 136](https://legault.me/images/photography/photo-136/000146.jpg)

![Photo 139](https://legault.me/images/photography/photo-139/000149.jpg)

![Photo 142](https://legault.me/images/photography/photo-142/000152.jpg)

![Photo 145](https://legault.me/images/photography/photo-145/image.jpg)

![Photo 148](https://legault.me/images/photography/photo-148/000158.jpg)

![Photo 151](https://legault.me/images/photography/photo-151/000161.jpg)

![Photo 154](https://legault.me/images/photography/photo-154/000164.jpg)

![Photo 157](https://legault.me/images/photography/photo-157/000167.jpg)

![Photo 160](https://legault.me/images/photography/photo-160/000170.jpg)

![Photo 163](https://legault.me/images/photography/photo-163/000173.jpg)

![Photo 166](https://legault.me/images/photography/photo-166/000176.jpg)

![Photo 169](https://legault.me/images/photography/photo-169/000179.jpg)

![Photo 172](https://legault.me/images/photography/photo-172/000182.jpg)

![Photo 175](https://legault.me/images/photography/photo-175/000185.jpg)

![Photo 178](https://legault.me/images/photography/photo-178/000188.jpg)

![Photo 181](https://legault.me/images/photography/photo-181/000191.jpg)

![Photo 184](https://legault.me/images/photography/photo-184/000194.jpg)

![Photo 187](https://legault.me/images/photography/photo-187/000197.jpg)

![Photo 190](https://legault.me/images/photography/photo-190/000201.jpg)

![Photo 194](https://legault.me/images/photography/photo-194/000205.jpg)

![Photo 197](https://legault.me/images/photography/photo-197/000208.jpg)

![Photo 200](https://legault.me/images/photography/photo-200/000211.jpg)

![Photo 203](https://legault.me/images/photography/photo-203/000214.jpg)

![Photo 002](https://legault.me/images/photography/photo-002/image.jpg)

![Photo 005](https://legault.me/images/photography/photo-005/image.jpg)

![Photo 008](https://legault.me/images/photography/photo-008/image.jpg)

![Photo 011](https://legault.me/images/photography/photo-011/image.jpg)

![Photo 014](https://legault.me/images/photography/photo-014/000008.jpg)

![Photo 017](https://legault.me/images/photography/photo-017/000011.jpg)

![Photo 020](https://legault.me/images/photography/photo-020/000014.jpg)

![Photo 023](https://legault.me/images/photography/photo-023/000017.jpg)

![Photo 026](https://legault.me/images/photography/photo-026/000020.jpg)

![Photo 029](https://legault.me/images/photography/photo-029/000023.jpg)

![Photo 032](https://legault.me/images/photography/photo-032/000026.jpg)

![Photo 035](https://legault.me/images/photography/photo-035/000029.jpg)

![Photo 038](https://legault.me/images/photography/photo-038/000032.jpg)

![Photo 041](https://legault.me/images/photography/photo-041/000035.jpg)

![Photo 044](https://legault.me/images/photography/photo-044/000038.jpg)

![Photo 047](https://legault.me/images/photography/photo-047/000041.jpg)

![Photo 050](https://legault.me/images/photography/photo-050/000044.jpg)

![Photo 053](https://legault.me/images/photography/photo-053/000047.jpg)

![Photo 056](https://legault.me/images/photography/photo-056/000050.jpg)

![Photo 059](https://legault.me/images/photography/photo-059/000053.jpg)

![Photo 062](https://legault.me/images/photography/photo-062/000056.jpg)

![Photo 065](https://legault.me/images/photography/photo-065/000059.jpg)

![Photo 068](https://legault.me/images/photography/photo-068/000062.jpg)

![Photo 071](https://legault.me/images/photography/photo-071/000065.jpg)

![Photo 074](https://legault.me/images/photography/photo-074/000068.jpg)

![Photo 077](https://legault.me/images/photography/photo-077/000071.jpg)

![Photo 080](https://legault.me/images/photography/photo-080/000074.jpg)

![Photo 083](https://legault.me/images/photography/photo-083/000077.jpg)

![Photo 086](https://legault.me/images/photography/photo-086/000080.jpg)

![Photo 089](https://legault.me/images/photography/photo-089/000089.jpg)

![Photo 092](https://legault.me/images/photography/photo-092/000092.jpg)

![Photo 095](https://legault.me/images/photography/photo-095/000095.jpg)

![Photo 098](https://legault.me/images/photography/photo-098/000098.jpg)

![Photo 101](https://legault.me/images/photography/photo-101/000101.jpg)

![Photo 104](https://legault.me/images/photography/photo-104/image.jpg)

![Photo 107](https://legault.me/images/photography/photo-107/000107.jpg)

![Photo 110](https://legault.me/images/photography/photo-110/000113.jpg)

![Photo 113](https://legault.me/images/photography/photo-113/000120.jpg)

![Photo 116](https://legault.me/images/photography/photo-116/000123.jpg)

![Photo 119](https://legault.me/images/photography/photo-119/000126.jpg)

![Photo 122](https://legault.me/images/photography/photo-122/000129.jpg)

![Photo 125](https://legault.me/images/photography/photo-125/000133.jpg)

![Photo 128](https://legault.me/images/photography/photo-128/000137.jpg)

![Photo 131](https://legault.me/images/photography/photo-131/000140.jpg)

![Photo 134](https://legault.me/images/photography/photo-134/000144.jpg)

![Photo 137](https://legault.me/images/photography/photo-137/000147.jpg)

![Photo 140](https://legault.me/images/photography/photo-140/000150.jpg)

![Photo 143](https://legault.me/images/photography/photo-143/image.jpg)

![Photo 146](https://legault.me/images/photography/photo-146/image.jpg)

![Photo 149](https://legault.me/images/photography/photo-149/000159.jpg)

![Photo 152](https://legault.me/images/photography/photo-152/000162.jpg)

![Photo 155](https://legault.me/images/photography/photo-155/000165.jpg)

![Photo 158](https://legault.me/images/photography/photo-158/000168.jpg)

![Photo 161](https://legault.me/images/photography/photo-161/000171.jpg)

![Photo 164](https://legault.me/images/photography/photo-164/000174.jpg)

![Photo 167](https://legault.me/images/photography/photo-167/000177.jpg)

![Photo 170](https://legault.me/images/photography/photo-170/000180.jpg)

![Photo 173](https://legault.me/images/photography/photo-173/000183.jpg)

![Photo 176](https://legault.me/images/photography/photo-176/000186.jpg)

![Photo 179](https://legault.me/images/photography/photo-179/000189.jpg)

![Photo 182](https://legault.me/images/photography/photo-182/000192.jpg)

![Photo 185](https://legault.me/images/photography/photo-185/000195.jpg)

![Photo 188](https://legault.me/images/photography/photo-188/000199.jpg)

![Photo 192](https://legault.me/images/photography/photo-192/000203.jpg)

![Photo 195](https://legault.me/images/photography/photo-195/000206.jpg)

![Photo 198](https://legault.me/images/photography/photo-198/000209.jpg)

![Photo 201](https://legault.me/images/photography/photo-201/000212.jpg)

![Photo 204](https://legault.me/images/photography/photo-204/000215.jpg)

![Photo 003](https://legault.me/images/photography/photo-003/image.jpg)

![Photo 006](https://legault.me/images/photography/photo-006/image.jpg)

![Photo 009](https://legault.me/images/photography/photo-009/image.jpg)

![Photo 012](https://legault.me/images/photography/photo-012/000005.jpg)

![Photo 015](https://legault.me/images/photography/photo-015/000009.jpg)

![Photo 018](https://legault.me/images/photography/photo-018/000012.jpg)

![Photo 021](https://legault.me/images/photography/photo-021/000015.jpg)

![Photo 024](https://legault.me/images/photography/photo-024/000018.jpg)

![Photo 027](https://legault.me/images/photography/photo-027/000021.jpg)

![Photo 030](https://legault.me/images/photography/photo-030/000024.jpg)

![Photo 033](https://legault.me/images/photography/photo-033/000027.jpg)

![Photo 036](https://legault.me/images/photography/photo-036/000030.jpg)

![Photo 039](https://legault.me/images/photography/photo-039/000033.jpg)

![Photo 042](https://legault.me/images/photography/photo-042/000036.jpg)

![Photo 045](https://legault.me/images/photography/photo-045/000039.jpg)

![Photo 048](https://legault.me/images/photography/photo-048/000042.jpg)

![Photo 051](https://legault.me/images/photography/photo-051/000045.jpg)

![Photo 054](https://legault.me/images/photography/photo-054/000048.jpg)

![Photo 057](https://legault.me/images/photography/photo-057/000051.jpg)

![Photo 060](https://legault.me/images/photography/photo-060/000054.jpg)

![Photo 063](https://legault.me/images/photography/photo-063/image.jpg)

![Photo 066](https://legault.me/images/photography/photo-066/000060.jpg)

![Photo 069](https://legault.me/images/photography/photo-069/000063.jpg)

![Photo 072](https://legault.me/images/photography/photo-072/000066.jpg)

![Photo 075](https://legault.me/images/photography/photo-075/000069.jpg)

![Photo 078](https://legault.me/images/photography/photo-078/000072.jpg)

![Photo 081](https://legault.me/images/photography/photo-081/000075.jpg)

![Photo 084](https://legault.me/images/photography/photo-084/000078.jpg)

![Photo 087](https://legault.me/images/photography/photo-087/image.jpg)

![Photo 090](https://legault.me/images/photography/photo-090/000090.jpg)

![Photo 093](https://legault.me/images/photography/photo-093/000093.jpg)

![Photo 096](https://legault.me/images/photography/photo-096/000096.jpg)

![Photo 099](https://legault.me/images/photography/photo-099/000099.jpg)

![Photo 102](https://legault.me/images/photography/photo-102/000102.jpg)

![Photo 105](https://legault.me/images/photography/photo-105/000105.jpg)

![Photo 108](https://legault.me/images/photography/photo-108/000111.jpg)

![Photo 111](https://legault.me/images/photography/photo-111/000114.jpg)

![Photo 114](https://legault.me/images/photography/photo-114/000121.jpg)

![Photo 117](https://legault.me/images/photography/photo-117/000124.jpg)

![Photo 120](https://legault.me/images/photography/photo-120/000127.jpg)

![Photo 123](https://legault.me/images/photography/photo-123/000130.jpg)

![Photo 126](https://legault.me/images/photography/photo-126/000134.jpg)

![Photo 129](https://legault.me/images/photography/photo-129/000138.jpg)

![Photo 132](https://legault.me/images/photography/photo-132/000141.jpg)

![Photo 135](https://legault.me/images/photography/photo-135/000145.jpg)

![Photo 138](https://legault.me/images/photography/photo-138/000148.jpg)

![Photo 141](https://legault.me/images/photography/photo-141/000151.jpg)

![Photo 144](https://legault.me/images/photography/photo-144/image.jpg)

![Photo 147](https://legault.me/images/photography/photo-147/000157.jpg)

![Photo 150](https://legault.me/images/photography/photo-150/000160.jpg)

![Photo 153](https://legault.me/images/photography/photo-153/000163.jpg)

![Photo 156](https://legault.me/images/photography/photo-156/000166.jpg)

![Photo 159](https://legault.me/images/photography/photo-159/000169.jpg)

![Photo 162](https://legault.me/images/photography/photo-162/000172.jpg)

![Photo 165](https://legault.me/images/photography/photo-165/000175.jpg)

![Photo 168](https://legault.me/images/photography/photo-168/000178.jpg)

![Photo 171](https://legault.me/images/photography/photo-171/000181.jpg)

![Photo 174](https://legault.me/images/photography/photo-174/000184.jpg)

![Photo 177](https://legault.me/images/photography/photo-177/000187.jpg)

![Photo 180](https://legault.me/images/photography/photo-180/000190.jpg)

![Photo 183](https://legault.me/images/photography/photo-183/000193.png)

![Photo 186](https://legault.me/images/photography/photo-186/000196.jpg)

![Photo 189](https://legault.me/images/photography/photo-189/000200.jpg)

![Photo 193](https://legault.me/images/photography/photo-193/000204.jpg)

![Photo 196](https://legault.me/images/photography/photo-196/000207.jpg)

![Photo 199](https://legault.me/images/photography/photo-199/000210.jpg)

![Photo 202](https://legault.me/images/photography/photo-202/000213.jpg)

![Photo 205](https://legault.me/images/photography/photo-205/000199.jpg)

---

Source: https://legault.me/renders

Index / Renders

# 3D Renders

65 figures

Product renders, architectural visualizations and other experimental projects done with Cinema 4D and Redshift.

![Render 01](https://legault.me/images/renders/render-01/beauty0030-14.jpg)
*FIG. 01*

![Render 03](https://legault.me/images/renders/render-03/aon3d-1.jpg)
*FIG. 03*

![Render 05](https://legault.me/images/renders/render-05/aon3d-6-1-1.jpg)
*FIG. 05*

![Render 07](https://legault.me/images/renders/render-07/aon3d-8.jpg)
*FIG. 07*

![Render 09](https://legault.me/images/renders/render-09/product-rendering-large.jpg)
*FIG. 09*

![Render 11](https://legault.me/images/renders/render-11/box-render-topmulti-1.jpg)
*FIG. 11*

![Render 13](https://legault.me/images/renders/render-13/box-render-variant.jpg)
*FIG. 13*

![Render 15](https://legault.me/images/renders/render-15/box-render-close_up_label_1.jpg)
*FIG. 15*

![Render 17](https://legault.me/images/renders/render-17/hotel-base-tranquility-casino-bathroom-2.jpg)
*FIG. 17*

![Render 19](https://legault.me/images/renders/render-19/controller-top_0001.jpg)
*FIG. 19*

![Render 21](https://legault.me/images/renders/render-21/controller-free-02.jpg)
*FIG. 21*

![Render 23](https://legault.me/images/renders/render-23/frame.jpg)
*FIG. 23*

![Render 25](https://legault.me/images/renders/render-25/colorful-7-copy.jpg)
*FIG. 25*

![Render 27](https://legault.me/images/renders/render-27/first-light-side.jpg)
*FIG. 27*

![Render 29](https://legault.me/images/renders/render-29/wavy4_notitle.jpg)
*FIG. 29*

![Render 31](https://legault.me/images/renders/render-31/lumion_archviz_2.jpg)
*FIG. 31*

![Render 33](https://legault.me/images/renders/render-33/3d-sla-material-banner_web.jpg)
*FIG. 33*

![Render 35](https://legault.me/images/renders/render-35/drame-au-desert_face.jpg)
*FIG. 35*

![Render 37](https://legault.me/images/renders/render-37/cartridge2.jpg)
*FIG. 37*

![Render 39](https://legault.me/images/renders/render-39/wash-l-and-cure-l-10-1.jpg)
*FIG. 39*

![Render 41](https://legault.me/images/renders/render-41/eames-chair_main.jpg)
*FIG. 41*

![Render 43](https://legault.me/images/renders/render-43/image.jpeg)
*FIG. 43*

![Render 45](https://legault.me/images/renders/render-45/image.jpeg)
*FIG. 45*

![Render 47](https://legault.me/images/renders/render-47/image.jpeg)
*FIG. 47*

![Render 49](https://legault.me/images/renders/render-49/image.jpeg)
*FIG. 49*

![Render 51](https://legault.me/images/renders/render-51/image.jpg)
*FIG. 51*

![Render 53](https://legault.me/images/renders/render-53/image.jpeg)
*FIG. 53*

![Render 55](https://legault.me/images/renders/render-55/image.jpeg)
*FIG. 55*

![Render 57](https://legault.me/images/renders/render-57/image.jpeg)
*FIG. 57*

![Render 59](https://legault.me/images/renders/render-59/image.jpeg)
*FIG. 59*

![Render 61](https://legault.me/images/renders/render-61/image.jpeg)
*FIG. 61*

![Render 63](https://legault.me/images/renders/render-63/image.jpeg)
*FIG. 63*

![Render 65](https://legault.me/images/renders/render-65/image.png)
*FIG. 65*

![Render 02](https://legault.me/images/renders/render-02/aon3d-5.jpg)
*FIG. 02*

![Render 04](https://legault.me/images/renders/render-04/aon3d-2.jpg)
*FIG. 04*

![Render 06](https://legault.me/images/renders/render-06/aon3d-3.jpg)
*FIG. 06*

![Render 08](https://legault.me/images/renders/render-08/fuse-hero-shot.jpg)
*FIG. 08*

![Render 10](https://legault.me/images/renders/render-10/core77-render-1.jpg)
*FIG. 10*

![Render 12](https://legault.me/images/renders/render-12/box-render-with_ecosystem.jpg)
*FIG. 12*

![Render 14](https://legault.me/images/renders/render-14/box-render-close_up_small_boxes.jpg)
*FIG. 14*

![Render 16](https://legault.me/images/renders/render-16/eames-3.jpg)
*FIG. 16*

![Render 18](https://legault.me/images/renders/render-18/hotel-base-tranquility-casino-shower.jpg)
*FIG. 18*

![Render 20](https://legault.me/images/renders/render-20/controller-free-01.jpg)
*FIG. 20*

![Render 22](https://legault.me/images/renders/render-22/eames-chair_take_3_3.jpg)
*FIG. 22*

![Render 24](https://legault.me/images/renders/render-24/frame-1.jpg)
*FIG. 24*

![Render 26](https://legault.me/images/renders/render-26/first-light.jpg)
*FIG. 26*

![Render 28](https://legault.me/images/renders/render-28/trapped_2.jpg)
*FIG. 28*

![Render 30](https://legault.me/images/renders/render-30/wavy3_notitle.jpg)
*FIG. 30*

![Render 32](https://legault.me/images/renders/render-32/lumion_render_archviz.jpg)
*FIG. 32*

![Render 34](https://legault.me/images/renders/render-34/drame-au-desert_layerlinescloseup.jpg)
*FIG. 34*

![Render 36](https://legault.me/images/renders/render-36/cartridge.jpg)
*FIG. 36*

![Render 38](https://legault.me/images/renders/render-38/mathieu-legault-render-formlabs.jpg)
*FIG. 38*

![Render 40](https://legault.me/images/renders/render-40/wash-l-and-cure-l-8-1.jpg)
*FIG. 40*

![Render 42](https://legault.me/images/renders/render-42/formlabs-sand-mathieu-legault.jpg)
*FIG. 42*

![Render 44](https://legault.me/images/renders/render-44/image.jpeg)
*FIG. 44*

![Render 46](https://legault.me/images/renders/render-46/image.jpg)
*FIG. 46*

![Render 48](https://legault.me/images/renders/render-48/image.jpeg)
*FIG. 48*

![Render 50](https://legault.me/images/renders/render-50/image.jpg)
*FIG. 50*

![Render 52](https://legault.me/images/renders/render-52/image.jpeg)
*FIG. 52*

![Render 54](https://legault.me/images/renders/render-54/image.jpeg)
*FIG. 54*

![Render 56](https://legault.me/images/renders/render-56/image.jpeg)
*FIG. 56*

![Render 58](https://legault.me/images/renders/render-58/image.jpeg)
*FIG. 58*

![Render 60](https://legault.me/images/renders/render-60/image.jpeg)
*FIG. 60*

![Render 62](https://legault.me/images/renders/render-62/image.jpg)
*FIG. 62*

![Render 64](https://legault.me/images/renders/render-64/image.png)
*FIG. 64*

---

Source: https://legault.me/shots

Index / Shots

# Dribbble

- [@legault](https://dribbble.com/legault)
- [PromptCut: an AI video editor](https://dribbble.com/shots/27158929-PromptCut-an-AI-video-editor)
- [AI Taskbar](https://dribbble.com/shots/26222747-AI-Taskbar)
- [BirdCounts](https://dribbble.com/shots/21089293-BirdCounts)
- [Writing Portfolio](https://dribbble.com/shots/15208294-Writing-Portfolio)

---

Source: https://legault.me/work/shopify

- [Index / Work](https://legault.me/work.md)
# Shopify.dev

- **Category:** PRODUCT
- **Year:** 2025
- **Site:** Visit

![Shopify.dev](https://legault.me/images/projects/shopify/heroImage.jpg)
*FIG. 01 — Shopify.dev*

# Designing Shopify’s Developer Platform

I’ve worked across Shopify’s developer platform, shaping a sprawling ecosystem into a cohesive, interconnected experience. What began as a loose collection of tools has grown into a platform supporting tens of thousands of apps and developers, and billions in developer revenue—one of the world’s largest app ecosystems where hundreds of billions in merchant value flow each year.

![](https://legault.me/images/projects/shopify/homepage-header.jpg)

A cornerstone of this work has been [shopify.dev](https://shopify.dev/), our developer documentation site. With thousands of articles covering every API, component, and pattern, the challenge was helping developers navigate a massive, complex system. I led the design of API references, tutorials, and guides, and helped evolve the information architecture to reduce friction and improve discoverability.

Over time, I helped shape a unified design system and visual language across the developer ecosystem, spanning documentation, community forums, our dashboard, and other dev tooling, so each surface felt part of a single, cohesive platform.

[video](https://legault.me/videos/shopify/s-scrolling-tutorial.mp4)

![](https://legault.me/images/projects/shopify/s-eco.jpg)

# The AI-Powered Dev Experience

I worked on the design of our Dev Assistant: AI-powered in-context guide that answers questions, surfaces code, and integrates seamlessly with developers’ IDEs..

![](https://legault.me/images/projects/shopify/dev-assistant.gif)

[video](https://legault.me/videos/shopify/dev-assistant-video.mp4)

![](https://legault.me/images/projects/shopify/ai-vibe-coding.jpg)

# Shaping the Dev Dashboard Experience

Beyond documentation, I helped extend the dev visual language and design system to shape the Dev Dashboard, Shopify’s central hub for creating and managing apps. My work guided the look and feel, ensured coherence across products, and supported UX decisions to make the platform intuitive and approachable.

[video](https://legault.me/videos/shopify/dev-dash-visuals.mp4)

# The Future of Polaris

I also led the creation of the docs for the new Polaris Web components, which migrated from [polaris.shopify.com](https://polaris-react.shopify.com/), producing guides, examples, and references that make adoption seamless for developers.

![](https://legault.me/images/projects/shopify/p-web-components-main.jpg)![](https://legault.me/images/projects/shopify/p-web-button.jpg)![](https://legault.me/images/projects/shopify/p-web-components.jpg)

---

Source: https://legault.me/work/metadata-fixer

- [Index / Work](https://legault.me/work.md)
# Metadata Fixer

- **Client:** Self, Co-Founder
- **Category:** PRODUCT
- **Year:** 2024
- **Site:** Visit

![Metadata Fixer](https://legault.me/images/projects/metadata-fixer/metadatafixer-thumb-2.jpg)
*Metadata Fixer*

⚠️ Metadata Fixer has been sold and is no longer owned and maintained by us.

After experiencing firsthand Google Takeout and trying to export pictures from Google Photos, there was a clear pain point where files exported without any EXIF metadata embedded into them. These stripped pictures and videos would then be impossible to sort by their right chronological order, date, time, or even location. *Metadata Fixer* was designed and developed to help restore the metadata into pictures and videos easily and automatically for any amounts of files. What was originally only achievable with complex commands or EXIF tools can now be done easily with an intuitive interface and process tens of thousands of photos in minutes.

A second version of this software called *Photos Downloader For Google Photos*, targeted towards the less tech savvy demographic, was also created at [photosdownloader.com](https://photosdownloader.com/). This software bypassed the need of using Google Takeout by simply automating the downloading of photos directly from the Google Photos web app.

![](https://legault.me/images/projects/metadata-fixer/metadata-fixer-featured.jpg)
*FIG. 01*

![](https://legault.me/images/projects/metadata-fixer/screen-shot-2020-12-22-at-11.32.jpg)
*FIG. 02*

![](https://legault.me/images/projects/metadata-fixer/screen-shot-2020-12-22-at-11.33-1.jpg)
*FIG. 03*

![](https://legault.me/images/projects/metadata-fixer/screen-shot-2020-12-22-at-11.33-2.jpg)
*FIG. 04*

![](https://legault.me/images/projects/metadata-fixer/screen-shot-2020-12-22-at-11.33.jpg)
*FIG. 05*

![](https://legault.me/images/projects/metadata-fixer/metadatafixer-frame.jpg)
*FIG. 06*

![](https://legault.me/images/projects/metadata-fixer/photosdownloader_legault.jpg)
*FIG. 07*

---

Source: https://legault.me/work/narvar

# Password protected

This project is shared on request. Unlock it in a browser at [/work/narvar](https://legault.me/work/narvar).

---

Source: https://legault.me/work/coderlife

- [Index / Work](https://legault.me/work.md)
# Coderlife

- **Category:** PRODUCT
- **Year:** 2023

![Coderlife](https://legault.me/images/projects/coderlife/coderlife-poster-large-progressive.jpg)
*FIG. 01 — Coderlife*

> A developer’s work is digital, immaterial. Coder Life brings it to the physical world.

## The Objective

Developing software is like practicing an art —writing concise and flowing code, elegant algorithms and solid architecture. Yet this art stays on computers. Digital. Immaterial. It’s not easily understood by outsiders. The Coder Life initiative transforms this digital art and showcases the beauty of code on everyday objects for the world to admire.

## The Outcome

In less than 4 months, we raised $8,000 on Kickstarter to fund a programmer-focused product, which we called the Coder Cards. We conducted market research, design, negotiation with suppliers, marketing, and shipping: in the end, we grossed $15,000 after selling 500+ decks of Coder Cards to customers internationally, on our own website and through Amazon FBA.

![](https://legault.me/images/projects/coderlife/coderlife-codercards-white-bg-cropped.jpeg)

> If you’re into programming at all or just love the look of code, these cards are awesome! Same quality as bicycle cards, very durable and in my opinion worth a buy – Colin (Amazon)

## Research

To identify whether this product was worth building and to see what we needed to accomplish this, we started out by doing market research on software developers, programmers, and other technical folks. This process was made easier by several of our team members being software developers and artists.

Most software developer themed products tend to be clothes and posters featuring coding jokes, or memes. We wanted to create a product that was fun and more interactive than simple eye-candy: decks of playing cards fulfilled that role perfectly, and even more when they featured a snippet of code on each card —each card featuring a different programming language. This would expose the players to 52 different languages and let them see how many they recognize in a fun and interesting way.

![coder-life-research](https://legault.me/images/projects/coderlife/image_preview.jpeg)coder-life-research

## Financial Study

We wanted the decks of cards to be printed on a material of highest quality, something that was made possible by the competitive pricing of well-known playing card printing companies like Bicycle and AdMagic. We also wanted the cards to be affordable, with shipping costs as low as possible: the weight and dimensions of a deck of cards made the package eligible for small parcel international shipping with Canada Post, thus fulfilling that wish.

![](https://legault.me/images/projects/coderlife/coderlife-box-design.jpeg)

## Kickstarter

In order to kick off the project and fund the design process, we launched a very successful [KickStarter campaign](https://www.kickstarter.com/projects/2028771431/programming-playing-cards) leading to pledges totaling $8,000+ CAD — 400% of our financing goal. Additionally, invaluable constructive feedback from the community allowed for the improvement of the product beyond what we had imagined.

![](https://legault.me/images/projects/coderlife/coderlife-kickstarter.jpeg)

## Crowdsourcing

We reached out to the community once more to write and enhance the snippets of code in 52 different languages by crowdsourcing on [GitHub](https://github.com/Bathlamos/Programmers-Playing-Cards) and Quora. Funders who contributed also had the opportunity to give shape to the product that they were backing. Most of them would be able to see their very own code on a card of their choice.

![](https://legault.me/images/projects/coderlife/coderlife-cards.jpeg)![](https://legault.me/images/projects/coderlife/coderlife-package.jpeg)

## Community Feedback

We conducted user testing and sent out surveys to finalize the card design and get feedback on the different iterations.

![](https://legault.me/images/projects/coderlife/coderlife-early-iterations.png)![](https://legault.me/images/projects/coderlife/5e4ec3194cfce29341dfaecb_render.jpeg)![](https://legault.me/images/projects/coderlife/5e4ec328a6bc9452c7e9fe00_render2.jpeg)

## Card Design

The design’s objective was to appeal to software developers and designers —a goal which was achieved through mimicking a typical code editor with syntax highlighting on the cards.

![](https://legault.me/images/projects/coderlife/3-javascript.png)![](https://legault.me/images/projects/coderlife/7-perl-1.png)![](https://legault.me/images/projects/coderlife/8-c.png)

See all cards on [GitHub](https://github.com/Bathlamos/Programmers-Playing-Cards).

![](https://legault.me/images/projects/coderlife/coderlife-carddesign.jpeg)![](https://legault.me/images/projects/coderlife/coderlife-jokers.png)

## Brand Identity

The double slash (‘//’) in the logo represents the beginning of a comment in popular programming languages. Paired with rounded corners, it gives a playful vibe that still retains elements important to software developers.

![](https://legault.me/images/projects/coderlife/coderlife-logo.png)![](https://legault.me/images/projects/coderlife/coderlife-logo-mark.png)

*Logomark*![](https://legault.me/images/projects/coderlife/coderlife-logo-mark-inverted.png)

*Inverted Logomark*

## Marketing

#### Social Media Platforms

To promote the Coder Life decks, we ran several promotional campaigns on Facebook and Instagram with eye-catching pictures. We offered discounts during the holidays to make our product an appealing gift idea, and targeted our efforts towards our niche market. We offered an additional 10% discount on our website for people who would share our product on social media and included thank you cards with each package sent.

#### Hackathons

One of the events most distinctive in the world of software developers is a hackathon. As such, we teamed up with the [deCODE Hackathon](http://hackdecode.io/), an event running in four cities across Canada and involving companies such as Microsoft, Google and Shopify. Participants who distinguished themselves received a Coder Life deck of cards as a prize, which promoted the brand.

## Website

Acting as an online shopfront for the Coder Life decks, the [Coderlife.io website](https://coderlife.io/) needed to remain subtle, stylish, and with great attention to the little details.

The challenge we faced was designing a beautiful website that truly reflects the values of the brand and of the customers, whilst simultaneously encouraging potential buyers to purchase the product. This was achieved by showcasing the product as often as possible through beautiful photography.

![](https://legault.me/images/projects/coderlife/coderlife-website-mockup.png)

## Personalization

We targeted companies by offering them Coder Life decks featuring their logo, to be used as promotional material. Here is an example with the Amazon logo (note that we are not affiliated, associated, authorized, endorsed by, or in any way officially connected with Amazon).

![](https://legault.me/images/projects/coderlife/coderlife-amazon.jpeg)

## Outcome

Ideas came to fruition, and in less than 4 months, we raised $8,000 on [Kickstarter](https://www.kickstarter.com/projects/2028771431/programming-playing-cards) to fund a programmer-focused product, which we called the [Coder Cards](http://coderlife.io/). We conducted market research, design, negotiation with suppliers, marketing, and shipping: in the end, we grossed $15,000 after selling 500+ decks of Coder Cards to customers internationally, on our own website and through [Amazon FBA](https://www.amazon.ca/Coder-Cards-Playing-Programmers/dp/B01M1DE728/ref=sr_1_1?ie=UTF8&qid=1515089625&sr=8-1&keywords=coder+cards).

Key challenges included working under tight deadlines and facing unexpected problems, such as a shipping cost increases throughout the project, all this while keeping a reasonable profit margin.

We are now exploring other programming-related products to create and sell alongside the Coder Cards to truly fulfill the coder life.

![coderlife-team](https://legault.me/images/projects/coderlife/team-1.jpeg)coderlife-team

---

Source: https://legault.me/work/formlabs

- [Index / Work](https://legault.me/work.md)
# Formlabs

- **Client:** Formlabs
- **Category:** WEB
- **Year:** 2022
- **Site:** Visit

![Formlabs](https://legault.me/images/projects/formlabs/heroImage.jpg)
*Formlabs*

Formlabs develops professional 3D printers, materials, and software that empower designers, engineers, and manufacturers to turn ideas into reality with precision and speed.

I led the design of the company’s marketing site, shaping the visual identity and user experience that communicates Formlabs’ products to a global audience.

On the software side, I worked on the printer fleet dashboard, designing tools that let users manage multiple devices efficiently while maintaining a clean, approachable interface. I prototyped the sound design for the printers themselves, crafting an audio experience that makes the machines feel more intuitive and alive. I also created high-quality 3D renders of Formlabs machines for marketing, presentations, and internal use, ensuring the products are represented accurately and beautifully.

Beyond products, I designed and built websites for Formlabs’ conferences and events, creating cohesive, visually engaging experiences that reflect the brand and engage attendees. Across hardware, software, and web, my work combined strategy, hands-on design, and storytelling to create cohesive experiences that bring Formlabs’ technology to life.

![](https://legault.me/images/projects/formlabs/gallery/0.jpg)
*FIG. 01*

![](https://legault.me/images/projects/formlabs/gallery/1.jpg)
*FIG. 02*

![](https://legault.me/images/projects/formlabs/gallery/2.jpg)
*FIG. 03*

![](https://legault.me/images/projects/formlabs/gallery/3.jpg)
*FIG. 04*

![](https://legault.me/images/projects/formlabs/gallery/4.jpg)
*FIG. 05*

![](https://legault.me/images/projects/formlabs/gallery/5.jpg)
*FIG. 06*

![](https://legault.me/images/projects/formlabs/gallery/6.jpg)
*FIG. 07*

![](https://legault.me/images/projects/formlabs/gallery/7.jpg)
*FIG. 08*

![](https://legault.me/images/projects/formlabs/gallery/8.jpg)
*FIG. 09*

![](https://legault.me/images/projects/formlabs/gallery/9.jpg)
*FIG. 10*

![](https://legault.me/images/projects/formlabs/gallery/10.jpg)
*FIG. 11*

![](https://legault.me/images/projects/formlabs/gallery/11.jpg)
*FIG. 12*

![](https://legault.me/images/projects/formlabs/gallery/12.jpg)
*FIG. 13*

![](https://legault.me/images/projects/formlabs/gallery/13.jpg)
*FIG. 14*

![](https://legault.me/images/projects/formlabs/gallery/14.jpg)
*FIG. 15*

![](https://legault.me/images/projects/formlabs/gallery/15.jpg)
*FIG. 16*

![](https://legault.me/images/projects/formlabs/gallery/16.jpg)
*FIG. 17*

![](https://legault.me/images/projects/formlabs/gallery/17.jpg)
*FIG. 18*

![](https://legault.me/images/projects/formlabs/gallery/18.jpg)
*FIG. 19*

---

Source: https://legault.me/work/prompt-cut

- [Index / Work](https://legault.me/work.md)
# PromptCut

- **Category:** APP
- **Year:** 2024
- **Site:** Visit

![PromptCut](https://legault.me/images/projects/prompt-cut/heroImage.jpg)
*FIG. 01 — PromptCut*

# **Edit videos with natural language**

Just describe what you want. [**PromptCut**](https://promptcut.legault.me/) understands your instructions and edits your footage from your prompts.

This project explores building a native macOS application in Swift that enables video editing through natural language. Inspired by modern AI prompting interfaces, the app allows users to perform common tasks, such as compressing, cropping, or converting video formats, using plain English commands, removing the complexity of traditional video editing tools.

### Read the blog post

Editing video clips can be surprisingly painful. Even for the simplest tasks, trimming a clip, converting it to a different format, extracting audio, or merging a couple of shots, there’s usually a long chain of steps across different tools. Clicking through timelines, wrestling with export settings, opening yet another app… it all adds friction to the creative process...

- [Read](http://localhost:3000/blog/introducing-promptcut-edit-videos-at-the-speed-of-thought)
![](https://legault.me/images/projects/prompt-cut/promptcut-demo.gif)

![](https://legault.me/images/projects/prompt-cut/7ee12ea247da3607faff911e5bcc7041.webp)

---

Source: https://legault.me/work/site-download

- [Index / Work](https://legault.me/work.md)
# SiteDownload

- **Category:** PRODUCT
- **Year:** 2026
- **Site:** Visit

![SiteDownload](https://legault.me/images/projects/site-download/heroImage.jpg)
*FIG. 01 — SiteDownload*

[SiteDownload](https://sitedownload.app/) began as a side project to solve a surprisingly common problem: downloading and archiving modern websites is far more complicated than it should be. Existing tools are often outdated, difficult to use, or aimed at highly technical users.

I designed and built SiteDownload to make website downloads accessible through a simple, intuitive interface. Users can archive websites for offline viewing, migration, backups, or preservation without navigating complex command-line tools or configuration.

Beyond building the product, this project gave me the opportunity to own the entire experience—from product strategy and UX to visual design, front-end development, branding, and launch. It became an exercise in reducing technical complexity into a workflow that feels approachable, fast, and reliable.

![](https://legault.me/images/projects/site-download/sitedownload-2.jpg)

---

Source: https://legault.me/work/waypoint3d

- [Index / Work](https://legault.me/work.md)
# Waypoint3D

- **Client:** Self, Co-Founder
- **Category:** WEB
- **Year:** 2020
- **Site:** Visit

![Waypoint3D](https://legault.me/images/projects/waypoint3d/heroImage.jpg)
*Waypoint3D*

Through photography, 360 tours and aerial vantage points, Waypoint3D captures reality with a unique perspective to create rich digital experiences of spaces and properties. The room scan render was done in Cinema 4D and designed for this scrolling-video section.

[video](https://legault.me/images/projects/waypoint3d/gallery/0/value.mp4)
*FIG. 01*

![](https://legault.me/images/projects/waypoint3d/gallery/1/value.gif)
*FIG. 02*

![](https://legault.me/images/projects/waypoint3d/gallery/2/value.png)
*FIG. 03*

---

Source: https://legault.me/work/material-explorer

- [Index / Work](https://legault.me/work.md)
# Material Explorer

- **Client:** Formlabs
- **Category:** APP
- **Year:** 2020
- **Site:** Visit

![Material Explorer](https://legault.me/images/projects/material-explorer/heroImage.jpg)
*FIG. 01 — Material Explorer*

Formlabs is a 3D printing technology developer and manufacturer based in Boston, Massachusetts. They design and manufacture stereolithography (SLA) and selective laser sintering (SLS) 3D printers for professionals.

As part of their marketing efforts, they participate in several 3D printing and additive manufacturing conferences throughout the year to showcase their product and resin technologies.

![](https://legault.me/images/projects/material-explorer/tradeshow-booth.jpeg)

Formlabs’ trade show booth receives high volume of traffic which can be overwhelming to the booth representatives. The panoply of resins and their unique properties often raise questions relating to their differences.

We created an interactive tool, hosted on iPad stands around the booth, to help mitigate this problem at tradeshows. People are thus able to interact with our Material Explorer which lets them learn about our different products and request one of our free samples.

![](https://legault.me/images/projects/material-explorer/tradeshow-booth-ipad.jpeg)

Various mediums of delivering the content were researched, such as interactive videos and slide decks. The building of a web app was appealing because it allowed for greater customization and local hosting. The limited access to wifi during tradeshows required the use of a light-weight, easy to set up, and totally independent application.

Early concepts and testing confirmed the importance of having a single-screen, flat-hierarchy application preventing users from getting lost and increasing the simplicity of the app. It allows users to start using the app and pick up where the last user left off at any time without having their experience affected. Since this is an interactive kiosk, it is important that the solution be self-maintained without the need to be reset by the staff.

The final design offered a way to show all the relevant information on a single screen, allowing passersby to start interacting with the app from any screen without taking away context and intuitivity.

![](https://legault.me/images/projects/material-explorer/material-explorer-final-mockup.jpeg)

Through testing, we moved the materials list to the side instead of the top because it was a more familiar and intuitive gesture. We added an expandable table of the materials’ properties and made it the focal point of the page, placing the gallery below it, as it was revealed the former was more useful and wanted by users. People at the booth have the very pieces featured in the gallery in their hands so seeing them again in pictures was not as important.

Another crucial feature was the screensaver being automatically triggered when left idle in order to catch people’s attention. Testing at tradeshows with previous prototypes concluded that people were not immediately aware that the kiosk was interactive, and/or were simply not drawn to it when it had a static screen. Therefore, the screensaver has not only increased attractiveness but was also a chance to play a promo video of the company on loop.

A primary call to action in the navigation bar prompts people to “request a free sample”. To shorten the completion time, the form only asks for an email address at which we can later follow up for further shipping information as well as resins of interest. This allows Formlabs to quickly gather leads in a more contextual and fun way at the trade shows. To accommodate for the lack of wifi at events, all leads are recorded locally on the device and easily retrievable later.

Finally, the entire app was coded in HTML, CSS and Javascript almost entirely from scratch to have greater control over its total size and features. A light-weight and simple CMS was integrated to allow the Marketing team to easily add or modify the content. The Material Explorer is loaded on iPad Pros and put up on kiosk stands for easier interactivity at the booths.

*Due to a non-disclosure agreement, some elements are not covered here to protect the intellectual property of the company I work for.*

---

Source: https://legault.me/work/fus-tdf

- [Index / Work](https://legault.me/work.md)
# The Digital Factory & User Summit

- **Client:** The Digital Factory
- **Category:** WEB
- **Year:** 2020
- **Site:** Visit

![The Digital Factory & User Summit](https://legault.me/images/projects/fus-tdf/heroImage.jpeg)
*The Digital Factory & User Summit*

**Formlabs hosted two conferences in May 2019 in Boston, MA.**

Two sites were created to promote the events, sell tickets, show schedules, and present the speakers.

We developed the websites in Webflow and integrated a CMS in both. The 3D assets for the User Summit were inspired by printed parts submitted by users over the years. It was a nice way to showcase some incredible work done by the community while presenting a wide range of applications using our printers.

In less than a month, the two sites have registered over **40,000 sessions** helping in selling over **1,200 tickets** to the events, approximately twice as many as the previous year.

Website designs by Christen Dute and [Aashman Goghari](https://www.linkedin.com/in/aashmangoghari/).

## The Digital Factory

[**https://thedigitalfactory.com**](https://thedigitalfactory.com/)

The Digital Factory took place on May 7, bringing together CEOs, CTOs, and manufacturing leaders at the summit. Attendees heard from managers who are reconfiguring their entire businesses around new digital manufacturing technologies, including artificial intelligence, additive manufacturing, advanced automation, and analytics.

## User Summit

[**https://summit.formlabs.com**](https://summit.formlabs.com/)

Formlabs User Summit brought together the people defining what’s possible with digital fabrication and the Formlabs community. It immersed attendees in success stories and take away actionable tips and techniques for perfecting and scaling their own 3D designs, printing workflows, and parts.

![](https://legault.me/images/projects/fus-tdf/gallery/0.jpg)
*FIG. 01*

![](https://legault.me/images/projects/fus-tdf/gallery/1.jpg)
*FIG. 02*

![](https://legault.me/images/projects/fus-tdf/gallery/2.jpeg)
*FIG. 03*

![](https://legault.me/images/projects/fus-tdf/gallery/3.jpg)
*FIG. 04*

![](https://legault.me/images/projects/fus-tdf/gallery/4.jpg)
*FIG. 05*

![](https://legault.me/images/projects/fus-tdf/gallery/5.jpg)
*FIG. 06*

---

Source: https://legault.me/work/motion-graphics-library

- [Index / Work](https://legault.me/work.md)
# Motion Graphics Library

- **Client:** Formlabs
- **Category:** MOTION-DESIGN
- **Year:** 2020
- **Site:** Visit

![Motion Graphics Library](https://legault.me/images/projects/motion-graphics-library/heroImage.jpg)
*FIG. 01 — Motion Graphics Library*

Formlabs is a 3D printing technology developer and manufacturer based in Boston, Massachusetts. They design and manufacture stereolithography (SLA) and selective laser sintering (SLS) 3D printers for professionals.

They create their own web video clips, marketing material, trailers, interviews and all other video assets through their in-house Studio department and release many assets daily.

As the videography department grows and more artists collaborate on projects, the risk for inconsistency and mistakes across those aforementioned videos increases. There is a heavy use of motion graphics such as callouts, lower thirds, name & location tags, watermarks and titles included in the videos. Their integration into projects are difficult and the assets are often created from scratch every time. The need for reusable templates is of crucial importance considering the increasing use of graphics in videos. This will improve the workflow, the consistency and, finally, help maintain the strong and recognizable brand image across all created assets.

A study of the Studio’s current workflow offered insights and a greater grasp of the pain points. These include the constant back and forth between Premiere Pro and Adobe After Effects to make the graphics, and the hours spent re-creating those graphics each time they are used.

![](https://legault.me/images/projects/motion-graphics-library/5fd90b0dde7b1165d8fb0511_nestedsequence01.gif)

As part of the solution, various motion graphics were created in After Effects, heavily using Expressions (Javascript) to create dynamic elements linked to a control panel, tailored to the team’s needs. That control panel allows modifying only predefined parameters such as color, text, font and spacing, while hiding irrelevant or complicated ones that you would normally find in the timeline, thus reducing the risk of confusion or mistake.

![](https://legault.me/images/projects/motion-graphics-library/5fd90b334a4d6731b341c041_nestedsequence02.gif)

Through responsive animations, the ability to shorten or lengthen the motion graphics in the timeline without affecting or having to use keyframes helps create an intuitive and fast process for the user.

Callouts can easily be motion tracked to videos, mirrored on both axes based on their quadrant, and have additional “text boxes” added and stacked dynamically.

![](https://legault.me/images/projects/motion-graphics-library/5fd90b3bd04858cbb29c2848_nestedsequence03.gif)![](https://legault.me/images/projects/motion-graphics-library/5fd90b46f562cde055b77ca3_nestedsequence04.gif)

What’s more, all the templates are adapted to work with Premiere, eliminating the need for After Effects for simple projects and, therefore, greatly improving the workflow.

A thorough and complete documentation was written for each motion graphic template to offer guidance and help when needed, allowing new team members to use the motion graphic pack without extensive training or continuous confusion.

![](https://legault.me/images/projects/motion-graphics-library/5fd90b6a83b7851a77d19eaa_nestedsequence05.gif)

*Some elements are not covered here to protect the intellectual property of the company I work for.*

---

Source: https://legault.me/work/brand-ai

- [Index / Work](https://legault.me/work.md)
# Brand.ai

- **Client:** Brand.ai (InVision DSM)
- **Category:** MOTION-DESIGN
- **Year:** 2020
- **Site:** Visit

![Brand.ai](https://legault.me/images/projects/brand-ai/heroImage.jpg)
*FIG. 01 — Brand.ai*

## The Challenge

The objective was to create documentation and tutorial videos for Brand.ai’s Sketch plugin.

## Key Goals

The value of Brand.ai is to share design assets with an entire team and summarize design decisions through the Style Guide. While exploring Brand.ai’s onboarding components, I found that the user had little understanding of how Sketch assets could be used in the style guides generated by Brand.ai. As a new user, it would be difficult to realize the full value proposition provided by Brand.ai as a User Experience Designer or Product Manager. Brand.ai wanted to position itself as an internal design system for product teams but users only understood the asset syncing feature the product offered. For Brand.ai, it was important to show practical use-cases of the product outside of Sketch asset-syncing to demo its feature-complete design system.

To accomplish that, it was important to highlight the following:

- Sketch-to-Brand.ai integration
- Style Guide creation and management
- Data endpoints for advanced integration

## Narrowing the Scope

It was important to cover topics that were useful to the user. Since the client’s budget allowed for six videos and help documentation guides I had to focus in on what to deliver. Working with the company, I decided on six topics:

1. Getting Started (Broad introduction and overview)
2. Developing Your Design Library 3. Collaborating with Brand.ai
3. The Brand.ai Dashboard
4. Sketch Workflow
5. Exporting Style Data and Developer APIs

## Building on an Existing Brand

I first built an introduction animation to put across the series of help videos. Using a mockup I designed in Sketch, I was able to see the two different states I wanted the video to begin and end in.

I worked on morphing the logomark into the full-sized logo using After Effects. By transitioning and adding points to go from a circle to a rectangle, I communicated the two different logos that represented the company.

![](https://legault.me/images/projects/brand-ai/sketch-comp.gif)

## Developing a Workflow

To create sensible help documentation, a consistent approach needed to apply to each video. A good help video needs to define the topic, explain the use-case, and demonstrate the solution. Following this approach, I wrote scripts to communicate these stages.

When demonstrating how the software worked in the form of a video, it was necessary to increase accessibility in the video demonstrations. That means the cursor needed to be easy-to-see, its motion needed to be fluid, and elements that were in-focus needed to be presented in full-view to the user. Simply recording a QuickTime screen recording and cutting it up in Premiere Pro would not work well.

Using Camtasia’s hidden cursor feature, I replaced the cursor with one I mocked up. You can see below how this method made in-focus elements easier to view:

![](https://legault.me/images/projects/brand-ai/episode-2-add-component.gif)

After discovering how to animate the cursor, I moved onto getting the necessary voiceovers from a voice artist and recorded the actions I wrote in the script.

## The Result

Here’s part one of the series I created for Brand.ai.

Also, here’s the [documentation article](https://brandai.zendesk.com/hc/en-us/articles/115006601368-Getting-started-with-Brand-ai-and-Sketch-) I wrote.

## Summary

By understanding Brand.ai’s value proposition and how it was communicated, I was able to create useful help guides for its platform. I built a delightful animation that transformed the logomark into Brand.ai’s full logo. Most importantly, my documentation showed use-cases and the topics important to Brand.ai’s clients. Although there were some technical challenges such as achieving the accessibility needed to make the cursor visible, it was overcome using a novel cursor-replacement technique.

This series of six help documentation articles and videos helped make available more resources for the growing Brand.ai software. By implementing this documentation, it helped ease some pain-points of Brand.ai and make visible the value of the platform.

---

Source: https://legault.me/work/zoo-time

- [Index / Work](https://legault.me/work.md)
# Zoo Time

- **Category:** APP
- **Year:** 2019

![Zoo Time](https://legault.me/images/projects/zoo-time/heroImage.jpg)
*FIG. 01 — Zoo Time*

## The Challenge

Create an application that let’s users plan their visit ahead of time. The app needs to inform the users on what animals, exhibits and other attractions are available, and let the users make their own itinerary from what interests them.

## The Outcome

I created an app design in Sketch and Principle that lets users manage a “to-do” list of things that they would like to see at the zoo. Items are added through searching, recommendations, and scrolling the entire list of animals and attractions. Additionally, the app automatically generates a path to follow on the map of the zoo to show the users the recommended route to see all their listed items.

See video below for final result:

[video](https://legault.me/videos/zoo-time/zoo-time.mp4)

## Design Process

### Brainstorming

During my brainstorming stage, I listed as many features as I could that might be relevant to a zoo app in order to have a broad understanding of my available options.

#### Booking

- Time
- Date
- Specific exhibit or day pass
- Quantity
- Adult, child, senior
- Price
- Confirmation
- E-ticket

#### Explore

- Search
- Animals
- Exhibits
- Interactive map (GPS, distance to specified exhibits and destinations)

#### Account

- History
- Past tickets and purchases
- Checklist
- What’s next, recommendation

#### Information

- Zoo address
- Opening hours
- FAQ
- Reviews
- Discounts and special events

### Persona

In order to stay on track with the design process, I created a persona that would represent a big part of my users. The persona features Mia, a mother of three who juggles work and home life with great pride, all the while enjoying traveling and cooking.

![](https://legault.me/images/projects/zoo-time/persona.png)

### Wireframes

I used the application Balsamiq to quickly ideate and create layouts. The low fidelity allowed me to test different concepts and move elements around quickly. My first version as seen below had most of the same features as the final version, however, the information was not intuitively and conveniently displayed. Each featured was on its own tab accessible through a hamburger icon opening a side menu, and it required the user to constantly switch pages. Here are some of my early concepts:

![](https://legault.me/images/projects/zoo-time/final-old.png)

My final concept is a single-page app. I moved all the featured into a single page that the user never has to leave. This not only made the app more intuitive but it also prevents the users getting lost. The user sees a map of the zoo in fullscreen, and uses the modal bottom sheet container as the controls. There, he/she can manage his “to-do” list of things to see at the zoo. Items can be reordered, added, removed and the user can click on them for a short description of the item. On the map, a recommended path is automatically generated between all items added to the “to-do” list. By changing the order of the items, the priority of each is changed and the path is re-calculated automatically.

![](https://legault.me/images/projects/zoo-time/final-wireframe.png)

### User Journey

The user journey starts with the on-boarding modal. The user then familiarizes himself/herself with the main screen: the fullscreen map and the modal bottom sheet. From there the user adds and manages the list of things to do and see at the zoo, and generates a recommended route to efficiently see them all once.

![](https://legault.me/images/projects/zoo-time/user-journey-.png)

### High-Fidelity Renders

From my wireframes, I moved on to designing the high-fidelity and pixel-perfect screens. I developed an aesthetic, a colour palette, and a style for my icons that I reused throughout the application for consistency and overall aesthetics. By using a card-based design, I was able to clearly and intuitively create item lists that could scale to any screen size responsively.

By referring to my persona (Mia) throughout the design process, I was able to focus on the ease-of-use and intuitiveness of the app and reflect on whether or not each feature was useful to Mia. The playful icons, rounded font, and card-based design makes the app versatile, readable, and suitable for young children as well as parents while giving the app a unique look.

![](https://legault.me/images/projects/zoo-time/final-screens-presentation.png)

### Animated Prototype

I used Principle to create an animated version of my application in order to have a better understanding of the transitions, user journey, and animations between screens.

## Conclusion

After ideating about the “planning ahead” app for a zoo, I came up with an itinerary builder that allows users to add animals, exhibits, restaurants and parks to a “to-do” list. The app then automatically and intuitively recommends a path to follow on a map between the added items.

While ideating for this app, I explored multiple aspects of planning and cataloguing a trip. I have tested my ideas using my persona and my roommates and narrowed it down to an intuitive and concise experience.

Should this app be further developed, I would recommend adding more features such as

- Invite/collabore: a way to add family members or friends in order to collaborate on a master list of things to see and do at the zoo
- More information about the zoo: opening hours, prices, location
- Booking: purchase tickets to the zoo right from the app

---

Source: https://legault.me/work/learn-ruby-on-rails

- [Index / Work](https://legault.me/work.md)
# Learn Ruby On Rails

- **Client:** John Elder
- **Category:** ARTWORK
- **Year:** 2018
- **Site:** Visit

Learning Ruby on Rails has never been this fast and easy, or fun!

Veteran Codemy.com programmer John Elder walks you step by step through the ins and outs of Rails for Web Development. Written for the absolute beginner, you don’t need any programming experience to dive in and get started with this book.

Follow along as John builds a Pinterest-style website from start to finish that allows people to sign up, log in and out, edit their profile, upload images to the database and style those images on the screen.

By the end, you’ll be well on your way to becoming a professional Ruby on Rails coder!

Learn Ruby On Rails can be found on [Amazon](http://www.amazon.com/Learn-Ruby-Rails-Web-Development/dp/0692364218/).

‍

![](https://legault.me/images/projects/learn-ruby-on-rails/gallery/0.png)
*FIG. 01*

![](https://legault.me/images/projects/learn-ruby-on-rails/gallery/1.png)
*FIG. 02*

![](https://legault.me/images/projects/learn-ruby-on-rails/gallery/2.jpg)
*FIG. 03*

---

Source: https://legault.me/work/aether-and-elements

- [Index / Work](https://legault.me/work.md)
# Aether and Elements

- **Category:** ARTWORK
- **Year:** 2017

![Aether and Elements](https://legault.me/images/projects/aether-and-elements/heroImage.jpg)
*Aether and Elements*

A sequence of section title pages made for a yearbook, illustrating each of the five classical elements: water, fire, air, earth and aether. Done in Photoshop and Cinema 4D, in collaboration with Philippe Legault. This series explores the creative combinations of low-poly 3D and vector art to create surreal environments.

![](https://legault.me/images/projects/aether-and-elements/gallery/0.jpg)
*FIG. 01*

![](https://legault.me/images/projects/aether-and-elements/gallery/1.jpg)
*FIG. 02*

![](https://legault.me/images/projects/aether-and-elements/gallery/2.png)
*FIG. 03*

![](https://legault.me/images/projects/aether-and-elements/gallery/3.jpg)
*FIG. 04*

![](https://legault.me/images/projects/aether-and-elements/gallery/4.jpg)
*FIG. 05*

---

Source: https://legault.me/work/schmooz

- [Index / Work](https://legault.me/work.md)
# Schmooz

- **Client:** Schmooz
- **Category:** WEB
- **Year:** 2020
- **Site:** Visit

![Schmooz](https://legault.me/images/projects/schmooz/heroImage.jpg)
*Schmooz*

Working with Schmooz to design and develop their new social agency website. The blobs, bright colors, and animations help illustrate Schmooz as a fun and approachable brand.

Designed and developed in collaboration with [Mantle.Design](http://mantle.design).

[video](https://legault.me/images/projects/schmooz/gallery/0/value.mp4)
*FIG. 01*

![](https://legault.me/images/projects/schmooz/gallery/1/value.jpg)
*FIG. 02*

![](https://legault.me/images/projects/schmooz/gallery/2/value.png)
*FIG. 03*

![](https://legault.me/images/projects/schmooz/gallery/3/value.png)
*FIG. 04*

![](https://legault.me/images/projects/schmooz/gallery/4/value.png)
*FIG. 05*

![](https://legault.me/images/projects/schmooz/gallery/5/value.png)
*FIG. 06*

---

Source: https://legault.me/blog/introducing-promptcut-edit-videos-at-the-speed-of-thought

- [Index / Blog](https://legault.me/blog.md)
app · March 14, 2026

# Introducing PromptCut: Edit Videos at the Speed of Thought

![Introducing PromptCut: Edit Videos at the Speed of Thought](https://legault.me/images/posts/introducing-promptcut-edit-videos-at-the-speed-of-thought/promptcut.jpg)

Editing video clips can be surprisingly painful. Even for the simplest tasks, trimming a clip, converting it to a different format, extracting audio, or merging a couple of shots, there’s usually a long chain of steps across different tools. Clicking through timelines, wrestling with export settings, opening yet another app… it all adds friction to the creative process.

[Download](https://promptcut.legault.me/)

### **What PromptCut Actually Does**

At its core, **PromptCut** gives you the power of video editing *without the traditional UI clutter*:

- ✂️ **Trim and cut clips** by describing exactly where to cut
- 🔄 **Convert formats** (like turning MP4 into GIF or MP3), just tell it what you want
- 📐 **Resize, crop, rotate, or flip** your footage
- 🎶 **Extract audio** or merge multiple clips together
- 🐇 **Loop, speed up, or slow down** your video
- 📸 **Capture thumbnails or reverse clips** in a few words

There’s no timeline dragging, no hidden menus, no hunting for the right button. You simply upload your footage, *describe your edit in natural language*, and PromptCut interprets it into the actions you intended. Under the hood, it translates your words into powerful [**ffmpeg**](https://www.ffmpeg.org/) video commands and gives you the result instantly, all *locally* and offline, without any AI API calls or cloud uploads. ([promptcut.legault.me](https://promptcut.legault.me/?utm_source=chatgpt.com))

‍

![](https://legault.me/images/posts/introducing-promptcut-edit-videos-at-the-speed-of-thought/promptcut-1.jpg)

### **Why I Built PromptCut**

I’ve spent countless hours working with videos, whether for tutorials, social clips, or presentations. Time and again I hit the same bottleneck:

Even the most basic edits feel *too complex* and fragmented, and when you’re trying to stay in flow, that breaks everything.

Most editing tools, from lightweight mobile apps to desktop editors, assume you want to climb a learning curve. They put timelines, layers, panels, and settings *front and center*, even when all you need is a simple clip cut or a quick conversion. Tools that simplify things often restrict what you can do, lock features behind templates, or require jumping through multiple screens.

I wanted something that felt **simple and expressive**, without masking power. The idea was to let someone *just say what they want*, like:

“Trim video from 2s to 10s"
 "Convert video to GIF”
 “Resize video to 1080p"
 "Extract audio”

and have it *just work*, no UI gymnastics, no memorizing commands. That desire for simplicity and speed in my own workflow became the guiding principle for PromptCut.

![](https://legault.me/images/posts/introducing-promptcut-edit-videos-at-the-speed-of-thought/promptcut-demo.gif)

### **How PromptCut Fits Into Your Workflow**

PromptCut isn’t meant to replace every editing tool, but it *should* replace the frustration of doing straightforward tasks across multiple apps or interfaces.

Whether you’re a content creator, educator, marketer, or someone who works with video clips regularly, PromptCut gives you:

- **Speed**, get edits done faster than traditional timeline editing
- **Focus**, stay in your creative flow instead of clicking through menus
- **Clarity**, no learning curve, just plain language instructions

It’s designed for people who want to *execute ideas*, not dig through documentation or search for the right button.

‍

---

Source: https://legault.me/blog/how-to-export-your-webflow-site-and-rebuild-it-with-ai-deploy-to-vercel

- [Index / Blog](https://legault.me/blog.md)
webflow · February 27, 2026

# How to Export Your Webflow Site and Rebuild It with AI + Deploy to Vercel

![How to Export Your Webflow Site and Rebuild It with AI + Deploy to Vercel](https://legault.me/images/posts/how-to-export-your-webflow-site-and-rebuild-it-with-ai-deploy-to-vercel/cover.jpg)

If you want to move away from Webflow, this guide will walk you through a step-by-step process to migrate your project using an AI assistant to rebuild the frontend and backend, and deploy everything to Vercel with a proper database.

[Download](https://sitedownload.app/)

## Install before starting

- [Node.js](https://nodejs.org/en/download) (for running Next.js locally)
- [Git CLI](https://cli.github.com/) (version control and let AI commit changes to GitHub)
- [Vercel CLI](https://vercel.com/docs/cli) (deploy your site and manage Vercel from the terminal)
- [Supabase CLI](https://supabase.com/docs/guides/local-development) (manage your database and run migrations locally)

## Step 1: Export Your Webflow Site

Webflow let's you export your site HTML, CSS and JS natively:

1. Open your project dashboard
2. Go to **Project Settings → Code Export**
3. Click **Export Code**
4. Download the ZIP file
5. Unzip it locally

You’ll get:

```
/index.html
/about.html
/css/
/js/
/images/
```

⚠️ Important: Webflow CMS content and forms do not export as a working backend. You’re only getting static HTML/CSS/JS. You can, however, export your CMS content as a CSV to let AI plug it into a new database afterwards. Or, try this tool at [SiteDownload.app](https://sitedownload.app) to get a whole export that just works out of the box.

## Step 2: Pick Your AI Coding Assistant

Before you start converting your Webflow site, decide which AI tool will help you work most efficiently. You have several great options:

1. [Cursor](https://cursor.com/): purpose-built for AI-native development. It understands your whole codebase and can refactor across files directly in your project. Perfect for big projects where you want hands-off automation.
2. [VS Code](https://code.visualstudio.com/) + [Claude Code](https://code.claude.com/docs/en/vs-code): if you prefer your existing editor, this combo lets you use AI suggestions inline while keeping full control over your files.
3. [Claude Code standalone](https://claude.ai/code/): runs independently and can operate like an AI agent in your project, ideal if you want a more autonomous workflow.

💡 Tip: The best AI is the one that fits your workflow. All of these options can help you convert a Webflow export into a full Next.js project if you give them clear, structured instructions.

## Step 3: Let’s get coding

1. Open your IDE (Cursor or VS Code) and open your downloaded Webflow folder.
2. Create a new GitHub repository (AI can help run git commands if needed).
3. Open your AI assistant (Cursor: **Cmd/CTRL + L**, VS Code + Claude: orange spark icon).
4. Paste the following prompts **one by one** and let AI do the heavy lifting.

### Prompt 1: Full Codebase Conversion

```
You are a senior full-stack engineer.

I have opened a Webflow exported codebase.
It contains static HTML files, CSS, JS, and assets.

Your task is to:

1. Convert this entire project into a modern Next.js 14+ App Router project.
2. Create a clean project structure.
3. Convert all static HTML pages into proper React components.
4. Extract reusable components (Navbar, Footer, Hero, Sections, etc).
5. Move static assets into /public.
6. Ensure images use Next.js  where appropriate.
7. Preserve styling exactly as-is for now.
8. Make routing file-based using the App Router.
9. Ensure clean TypeScript usage.
10. Remove unnecessary Webflow scripts while preserving interactions if possible.

Project Requirements:
- Framework: Next.js (latest, App Router)
- Language: TypeScript
- Styling: Keep existing CSS (do not convert to Tailwind yet)
- Deployment target: Vercel

Deliverables:
- Full new folder structure
- Updated package.json
- Converted page files
- Extracted shared layout
- Clear instructions for anything that cannot be auto-converted

Do this conversion across the entire codebase, not just a single file. Then, commit your changes.
```

### Prompt 2: Rebuild Webflow CMS in Supabase

Use this after the frontend conversion is complete.

```
Now that the static site is converted to Next.js:

1. Analyze the original Webflow CMS structure.
2. Recreate equivalent tables in Supabase (Postgres).
3. Generate SQL schema.
4. Create seed data examples.
5. Create dynamic routes in Next.js for each CMS collection (e.g. /blog/[slug]).
6. Replace static content with database-driven content.
7. Use server components for data fetching.
8. Use environment variables for Supabase keys.
9. Generate a lib/supabase.ts client helper.

Database platform: Supabase
Hosting: Vercel
Auth: Not required unless content is protected

Output:
- SQL schema
- Next.js data fetching logic
- Dynamic page examples
- Updated folder structure
- Instructions to connect Supabase project

Finally, commit your changes.
```

### **Prompt 3: Rebuild Forms with API Routes**

Webflow exports form markup but not functionality.

```
Locate all forms in the project.

For each form:
1. Create a corresponding Supabase table.
2. Create a Next.js API route to handle submissions.
3. Add validation.
4. Store submission in database.
5. Return success/error state properly.
6. Prevent spam with basic honeypot field.

Tech stack:
- Next.js App Router
- Supabase
- TypeScript
- Deploying on Vercel

Output:
- SQL schema for submissions table
- /app/api routes
- Updated frontend form component
- Clear instructions for environment variables

Finally, commit your changes.
```

### Prompt 4: Modernize + Optimize Codebase

Once everything works, this cleans it up.

```
Refactor this entire Next.js project to:

1. Improve folder structure clarity.
2. Extract reusable UI components.
3. Remove unused CSS.
4. Improve accessibility (ARIA, semantic HTML).
5. Improve SEO (metadata, OpenGraph, sitemap).
6. Optimize images.
7. Improve performance where possible.
8. Ensure compatibility with Vercel deployment.

Do not change visual design.
Do not introduce new design systems.
Focus on clean architecture and maintainability.

Output:
- Updated file structure
- Refactored components
- Summary of improvements made

Finally, commit your changes.
```

## Step 4: Hook Up Your Repo to Vercel

Instead of manual clicks, let AI guide or scaffold the deployment. Create a [Vercel](https://vercel.com/) account, then let AI walk you through the steps by pasting the below prompt:

```
You are a full-stack AI assistant.

I have a Next.js project. Help me deploy it to Vercel.

Tasks:
1. Generate deployment instructions for Vercel (web or CLI).
2. Scaffold any required config files.
3. Detect needed environment variables (SUPABASE_URL, SUPABASE_ANON_KEY) and generate .env.example.
4. Explain how to deploy without GitHub if needed.
5. Include instructions for connecting a custom domain.

Output:
- Ready-to-run instructions
- Config files
- Notes on env variables

Finally, commit your changes.
```

💡 Tip: You can deploy the frontend first; add Supabase keys in Vercel after creating your database. The site will still deploy but dynamic features will work after adding keys.

## Step 5: Hook Up Your Database to Supabase

AI can scaffold tables, API helpers, and replace static content. Create a [Supabase](https://supabase.com/) account, then use AI to guide you through the steps by pasting the below prompt:

```
You are a full-stack AI assistant.

I have a Next.js project and want to replace Webflow CMS and forms with a Supabase backend.

Tasks:
1. Generate SQL for all needed tables (CMS + forms).
2. Create instructions for setting up a Supabase project via web UI or CLI.
3. Generate /lib/supabase.ts helper file with environment variable references.
4. Update dynamic pages/forms to use Supabase calls.
5. Provide a .env.example with variables (SUPABASE_URL, SUPABASE_ANON_KEY).
6. Include local testing instructions and notes for production deployment.

Output:
- SQL schema
- Client helper file
- Updated dynamic pages/forms
- Step-by-step setup instructions

Finally, commit your changes.
```

## Step 6: Test & Deploy

Now that your Next.js project is converted and your Supabase database is ready, it’s time to test everything and go live.

1. **Set environment variables locally** Duplicate `.env.example` and rename the new file to `.env.local` Add your `SUPABASE_URL` and `SUPABASE_ANON_KEY` in this `.env.local` file ⚡ Tip: Next.js automatically loads `.env.local` when you run the dev server
2. **Run the app locally**`‍` `npm install` `npm run dev`‍ Verify dynamic pages and forms fetch/store data correctly from Supabase Check that your frontend matches the original design**‍**
3. **Add environment variables to Vercel**‍ Go to **Settings → Environment Variables** in your Vercel project Add `SUPABASE_URL` and `SUPABASE_ANON_KEY`‍ Click **Redeploy** to make sure your production site is connected to the database**‍**
4. **Optional: connect a custom domain**‍ Go to **Settings → Domains**‍ Add your domain and update your DNS records as instructed

Your full-stack site is now live with a dynamic backend, forms, and database-powered CMS!

---

Source: https://legault.me/blog/export-figma-variables-as-css-variables-with-ease

- [Index / Blog](https://legault.me/blog.md)
figma · November 20, 2024

# Export Figma Variables as CSS Variables with Ease

![Export Figma Variables as CSS Variables with Ease](https://legault.me/images/posts/export-figma-variables-as-css-variables-with-ease/blog-hero.jpg)

A powerful tool for developers looking to bridge the gap between Figma and CSS. It allows users to batch export all Figma Variables, dynamically loading collections, resolving aliases, and supporting mode configurations.

[Download](https://www.figma.com/community/plugin/1448395480738631069/figma-variables-to-css)

As designers and developers, we love the flexibility and power of Figma’s Variables feature. It enables us to create scalable design systems that adapt across themes, modes, and use cases. However, when it comes to bridging the gap between design and code, things can get tricky. Developers can’t directly access the Variable panel in Figma, and there’s no native way to batch export or view these values in a developer-friendly format like CSS. Enter **Figma Variables to CSS**, a Figma Plugin designed to solve this exact problem.

## Why the Plugin Exists

Imagine working on a design system where themes, states, and modes are all meticulously crafted using Variables. But when it’s time to implement them in code, you’re stuck manually copying values, deciphering references, and resolving aliases. This process is time-consuming, error-prone, and anything but dynamic.

This plugin bridges the gap by enabling designers and developers to:

- Dynamically load all Variables across all Figma collections.
- Resolve aliases—Variables referencing other Variables—even across collections.
- Export the resolved values to CSS variables.
- Configure mode paths to ensure the final CSS reflects the desired theming logic.

## Key Features

1. **Dynamic Loading of Variables**: Say goodbye to manually hunting down Variables. This plugin scans your Figma file and dynamically retrieves all Variables, regardless of which collection they belong to. With just a few clicks, you can view every Variable you’ve defined in a single interface.**‍**
2. **Alias Resolution**: Variables often reference one another, creating a web of dependencies that’s difficult to untangle manually. The plugin intelligently resolves these aliases, whether they’re within the same collection or spread across different ones. You can choose to export the alias as-is or its fully resolved value.**‍**
3. **Mode Switcher**: Modern design systems often require multiple modes (e.g., light mode, dark mode, or brand themes). The plugin dynamically identifies all possible modes and lets you configure which collections should use which modes. This ensures your final CSS exports reflect the correct values for each combination.**‍**
4. **Batch Export to CSS**: Once your Variables are loaded and configured, the plugin generates CSS code that’s ready to drop into your project. It converts Figma Variables into CSS variables, retaining their structure and relationships. The output is clean, organized, and developer-friendly.

![](https://legault.me/images/posts/export-figma-variables-as-css-variables-with-ease/678e803c757ed42b5cfa3d72_blog-supporting.jpeg)

## How It Works

1. **Install the Plugin**: Head over to the [Figma Community page](https://www.figma.com/community/plugin/1448395480738631069/figma-variables-to-css) and install the plugin.**‍**
2. **Load Variables**: Open the plugin, and it will scan your file to load all Variables across collections.**‍**
3. **Resolve Aliases**: View Variables with their references resolved. Toggle between keeping the alias or using the final resolved value.**‍**
4. **Switch Modes**: Use the mode switcher to configure collections and ensure the correct paths for theming logic.**‍**
5. **Export CSS**: With everything configured, export your Variables as CSS. The plugin generates clean, well-structured code, ready to implement in your project.

The **Figma Variables to CSS** plugin is a game-changer for teams looking to streamline their design-to-code workflow. By empowering developers with direct access to Variables and resolving the complexities of aliases and modes, it ensures your design system’s integrity remains intact from Figma to production.

Ready to supercharge your workflow? [Install the plugin](https://www.figma.com/community/plugin/1448395480738631069/figma-variables-to-css) and start exporting your Variables as CSS today!

---

Source: https://legault.me/blog/figma-variables-hex-colors-to-aliases

- [Index / Blog](https://legault.me/blog.md)
figma · December 19, 2023

# Figma Variables: Hex Colors to Aliases Automatically

![Figma Variables: Hex Colors to Aliases Automatically](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/frame-3-1.jpg)

Automate the process of creating aliases from one Collection to another. Batch convert hex codes to aliases with this script.

[Download](https://github.com/matlegault/figma-variables-hex-to-alias)

![](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/289993596-b8d7231a-1da7-47a6-a7ce-a01088e549d0.gif)

## What is this

This is useful when converting your Styles to Variables, and wanting to create a hierarchy across collections by using Aliases (references) from one Collection to another.

This will simply match hex values from one collection to another and create an alias if there's a match, so you can have a Collection of Primitives that other Collections reference.

## How to use

The plugin is not yet published on [figma.com/plugins](http://figma.com/plugins) so the installation process is a little more involved right now.

1. Download or clone the contents of the [GitHub repo](https://github.com/matlegault/figma-variables-hex-to-alias) to a location that is *not* your downloads folder (if you delete these files after installing through the *Development* menu, it will break the plugin)

2. Right-click the canvas Plugins > Development > Import plugin from manifest…

![](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/figma-install-01.jpeg)

3. Navigate to the file **/path/to/plugin/manifest.json**

![](https://legault.me/images/posts/figma-variables-hex-colors-to-aliases/frame-7.jpg)

4. This panel will close and the plugin will now be available by going to the Development section in your plugins.

---

Source: https://legault.me/blog/figma-how-to-resize-elements-of-a-components-instance

- [Index / Blog](https://legault.me/blog.md)
figma · December 6, 2023

# How to Resize Elements of a Component Instance

![How to Resize Elements of a Component Instance](https://legault.me/images/posts/figma-how-to-resize-elements-of-a-components-instance/cover-x-x.jpg)

Component instances don't allow you to change nested elements' dimensions. This handy little workaround will let you resize anything in your instances.

[Download](https://www.figma.com/community/file/1317596352268579241/resize-elements-in-component-instances)

Figma Component Instances don't let you change the size of their inner elements. Dimensions can only be set on the main Component. For instance, if I click on this icon placeholder in my card Instance, the Width and Height fields are greyed out.

![](https://legault.me/images/posts/figma-how-to-resize-elements-of-a-components-instance/cleanshot-2023-12-18-at-18.10.442x.png)

*Width and Height are greyed out for Component Instances' nested elements in Figma.*

Trying to toggle between Nested Components in my Instance doesn't work either. The original dimensions persist despite changing the props.

![](https://legault.me/images/posts/figma-how-to-resize-elements-of-a-components-instance/cleanshot-2023-12-18-at-18.04.15.gif)

A handy workaround is that Auto-Layout settings can always be adjusted in Component Instances, so we can use Auto-Layout Gap between two objects to control the width and height of the parent.

We can create a Resizer Component that is made up of two Auto-Layout containers pushing shapes apart, one in Horizontal mode, and the other in Vertical mode. Then, set the Parent container to Hug its contents so that your two Auto-Layout containers will drive it's dimensions.

![](https://legault.me/images/posts/figma-how-to-resize-elements-of-a-components-instance/cleanshot-2023-12-18-at-18.27.062x.png)

*Figma Resizer Component that is sized using Auto-Layout Gap.*

In this above example, I have placed two circles in each Auto-Layout controllers and set their size quite large to be able to see them. **In your file, you should set those two shapes to 0. Figma does not let you set the size to 0, so try setting it to 0.0001 and Figma will round it down so that your Resizer is completely invisible.**

In your Master Component, paste your Resizer anywhere you might need to control dimensions from Instances. In my case, I have an Icon Component that I nested in my Card component. I want to be able to control its dimensions and so I include the Resizer directly in the Icon, and set the icon vector itself to be in Absolute Position to float on top of the Resizer.

![](https://legault.me/images/posts/figma-how-to-resize-elements-of-a-components-instance/cleanshot-2023-12-18-at-18.36.442x.png)

*Pasting the Resizer in containers that require control of dimensions.*

Now, from Instances, you'll be able to change element sizing. You can click within the icon to change the Auto-Layout Gap of your Resizer and see it resize, or you can set it to change the size with a prop.

![](https://legault.me/images/posts/figma-how-to-resize-elements-of-a-components-instance/cleanshot-2023-12-18-at-18.33.41.gif)

---

Source: https://legault.me/blog/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library

- [Index / Blog](https://legault.me/blog.md)
figma · October 16, 2020

# Creating Scalable Components in Figma for Your Pattern Library

![Creating Scalable Components in Figma for Your Pattern Library](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/cover.jpg)

Figma's Design Libraries are very powerful tools to create reusable components and develop Pattern Libraries. However, it's important to set up your components correctly from the beginning in order to get the most out of them. Today, I'll show you the best way I found to set up UI components in order to maximize their scalability across all their design states.

## 1. Adding Colors to Local Styles

Add your color palette to Figma's Local Styles for easier access as well as simplified updates to your colors across all your components if you ever change the colors in the future.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/colors.png)

## 2. Adding Type Styles to Local Styles

Add your text styles to the Local Styles as well to be able to manage those styles across all your components all at once.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/text-styles.png)

## 3. Setting Up Icons

If you require icons, it's a good idea to have them each in a different Master Component and in an Artboard called "Icons" to have them all grouped together and available in your Design System.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/icons.png)

## 4. Setting Up your UI component Base Layer

Now, once you have all your individual UI elements and Local Styles added to Figma, it's time to group the atoms together to form molecules. Group Child Instances of each element together to form your component. Add **Auto Layout** to your Group so everything resizes with your atom's length. It's also important that you use Child Instances and not the Parent itself so you can keep all your Parent Atoms neatly organized elsewhere even though they are used in hundreds of other molecule components.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/base-layer.png)

Use your Local Styles to apply the right colors and typography values to your newly created molecule.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/assign-colors-and-styles.png)

In this example, I'm creating the Base Component of my buttons. It's important to note that when creating the Base, you want to add every element that would be used in later variation or state. Here, I'm anticipating needing an Icon on the left and on the right so i have added a random icon as placeholder. We'll be able to change those later.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/base-object.png)

## 5. Creating All Your Desired States

From the Base Component, we can copy/paste it to create our different tiers of buttons. It's important to note that you should always create a new component on top of the duplicated Child Base Component. We want each button to be a Parent Component in order to be accessible via the Design Library from other Figma Documents. In the below flowchart, you can see that I used the Base component's Instance for my Primary, Secondary and Tertiary buttons. Next, I used those tier component's instances to create their respective states. This is because each tier's states should be nested under their "Normal" state to streamline styling. This will result in a hierarchy where you can modify the Base layer for high-level values like border radius, spacings and atoms, and use the <tier>/Normal Components to control each tier's specific look including their fill and borders.

![](https://legault.me/images/posts/creating-powerful-and-scalable-components-in-figma-for-your-pattern-library/flowchart.png)

‍

---

Source: https://legault.me/blog/image-filters-in-figma-components-with-layer-blend-modes

- [Index / Blog](https://legault.me/blog.md)
figma · October 14, 2020

# Versatile Image Filters for Figma Components

![Versatile Image Filters for Figma Components](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/cover-x.jpg)

Use layered blending modes and fills to create more versatile image filters across your component instances. When dealing with multiple instances of components, applying image filters across children can be difficult. The Image Filter tool works well but lacks batch editing and changing image files can reset the filter controls.

[Download](https://www.figma.com/community/file/1318731482730490061/versatile-image-filters-for-figma-components)

**Not Recommended**

## Using Built-In Image Filter Options

### 1. Filters *After* Creating Instances

Changing the image filters of the parent component **after** creating instances does not apply changes to already existing instances.

![](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/1.gif)

*Image filter controls on the parent component have no effect on already existing children.*

### 2. Filters *Before* Creating Instances

Changing the image filters of the parent component **before** creating instances applies filters to duplicated instances but later changes can't be done in batch.

![](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/2.gif)

*Image filter controls on the parent component will apply to instances created afterwards.*

**Recommended**

## Stacking Layers

The most efficient and scalable way of applying filters across instances is to layer effects with blending modes. That way, effects done to the parent component apply to all, while still retaining individual control on each child instance later on. Filters can also be stacked in the Fill panel on the same layer but I will demonstrate this by using different layers.

![](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/3.gif)

*Stacking effects on separate layers keeps things clean and easy to apply across all instances.*

A wide variety of effects can be achieved using layers and blending modes, but I'll cover the most common ones.

### 1. Black And White

1. Create a rectangle over the image (I usually duplicate the Image layer to use as the shape).
2. Set a greyscale fill.
3. Set the blending mode to Saturation.

![](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/6.gif)

*Black and white effect created with a greyscale fill layer set in Saturation blending mode.*

### 2. Color Overlay

1. Create a rectangle over the image.
2. Create a colored gradient or solid color fill.
3. Set the blending mode to either Multiply or Overlay.

![](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/5.gif)

*Setting a colored fill layer in Overlay blending mode creates stylized effects.*

### 3. Contrast

1. Create a rectangle over the image.
2. Create a greyscale gradient or solid color fill.
3. Set the blending mode to Soft Light.

![](https://legault.me/images/posts/image-filters-in-figma-components-with-layer-blend-modes/4.gif)

*Additional contrast can be adjusted with a gradient layer set in Soft Light blending mode.*

## Full Control

By having effects on different layers, it offers you full control over them in the parent component, while retaining their individual control in child instances if needed. It also allows you to keep images isolated on their own layer and in their original form, which makes replacing the image source easy and without the hassle of having the filter controls reset.

### **Here's a list of Figma's blending modes:**

#### Normal

- **Normal:** The default mode performs no additional change to how layer contents interact.

#### Darken

- **Darken:** Pixels lighter than blend are replaced; darker ones are not.
- **Multiply:** Is similar to drawing strokes on the image with markers. The colors of the top layer are blended with the image.
- **Color Burn:** Evaluates each channel; darkens base by increasing contrast.

#### Lighten

- **Lighten:** Evaluates each channel; it then uses base or blend color (whichever is lighter).
- **Screen:** Uses a lighter color. It is useful for “knocking” black out of a layer.
- **Color Dodge:** Opposite of color burn. Evaluates each channel; brightens base by increasing contrast.

#### Contrast

- **Overlay:** Overlays existing pixels while preserving highlights and shadows of base.
- **Soft Light:** The effect is similar to shining a diffused spotlight on the image.
- **Hard Light:** Effect is similar to shining a harsh spotlight on the image.

#### Comparative

- **Difference:** Evaluates each channel and subtracts or inverts depending on brightness.
- **Exclusion:** Looks at the color in each channel and subtracts the blend from the base.

#### Color

- **Hue:** Uses luminance and saturation of the base and the hue of the blend.
- **Saturation:** Preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer
- **Color:** Preserves gray levels. It’s very useful for coloring and tinting.
- **Luminosity:** Is the inverse effect from the Color mode.

‍

---

Source: https://legault.me/blog/free-alembic-3d-dust-particles-to-use-in-your-scene

- [Index / Blog](https://legault.me/blog.md)
cinema-4d · March 6, 2020

# Free Alembic 3D Dust Particles to Use in Your Scene

![Free Alembic 3D Dust Particles to Use in Your Scene](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/3d-dust-hero-2.jpg)

Learn how to make animated 3D Dust Particles and download alembic files that can be dropped into any 3D scenes to add floating particles quickly and efficiently. Additionally, get the original C4D scene with all the controls and objects to create your own 3D dust.

[Download](https://www.mediafire.com/file/eivzznoo877g5q5/3D_Dust.zip/file)

Dust particles in Cinema 4D are extremely useful, especially in combination with god rays or when doing a macro shot. There's a variety of ways to create them such as with Thinking Particles or X-Particles, but today I'll show you an easy way using Cloners, Random Effectors and simple geometry.

![](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/3d-dust-hero.jpg)

Creating 3D dust is a fairly straight forward process which I'll cover below. You may have seen other products such as [Greyscale Gorilla's 3D Dust Particulate](https://greyscalegorilla.com/downloads/3d-dust/) selling at $100 USD. If you're looking for a very complete kit, I definitely recommend looking into their product as it features advanced animations with more realistic wind turbulence, and 20+ presets to play with. However, if you're looking for something simple that gets the job done, look no further and [download the attached sample scene and.abc files](#download-files).

## 1. Creating particles

![](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/particles.jpg)

Your particles will be minuscule (mine are at ~0.1 cm), and they can really be anything you want so go nuts! Here, I made some simple shapes just to get enough irregularities in shape and size. You should avoid using shapes with heavy geometry like spheres or any rounded shapes. The simpler the better to keep things running fast.

## 2. Cloning

![](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/cloner.jpg)

Put those particles in a Cloner Object and change it to Grid mode. **Change the Instance Mode to Multi-Instance to increase performance.** Set an amount of instances to something that will create a volume large and dense enough for your purposes. I have it set to 20x20x20. Note that keeping a cloner object in your scene may make your machine lag so consider merging your cloner to a single shape when satisfied. You can also export it to an alembic file which is very easy to work with afterwards.

## 3. Randomizing and Animating

![](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/random-effector.jpg)

Apply a Random Effector to add irregularities to the grid of particles, and set a Turbulence Effector with an Animation Speed of your choice. This will animate the particles and move them very slowly through space.

![](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/scatter.jpg)

## 4. Render Engine Blur

Lastly, let's add a Camera and some Depth of Field Blur by lowering the F-Stop value. This will make it look like we would expect, and hide the fact that the dust particles are tiny grey shapes.

![](https://legault.me/images/posts/free-alembic-3d-dust-particles-to-use-in-your-scene/render-engine-blur.jpg)

That's it! Play with different shapes, sizes, and Random Effector settings to get the results you want. Export your creation to an alembic file (.abc) for an easier drag-n-droppable template and you'll be good to go!

---

Source: https://legault.me/blog/correctly-migrate-away-from-google-photos-to-icloud

- [Index / Blog](https://legault.me/blog.md)
web · February 13, 2020

# How To Correctly Export And Migrate Away From Google Photos

![How To Correctly Export And Migrate Away From Google Photos](https://legault.me/images/posts/correctly-migrate-away-from-google-photos-to-icloud/cover.jpg)

Downloading your pictures from Google Photos via Takeout Export messes up the EXIF data of images. If re-importing elsewhere, like in Apple Photos' iCloud, it's important to fix that data in order to have a successful import that stays in chronological order and with the correct GPS coordinates.

## Exporting Your Library Out of Google Photos, Automatically

[The Google Photos exporter](https://takeout.legault.me/) walks you through the whole migration, from requesting your export out of Google Photos to fixing everything in it automatically. It restores every date, GPS location, caption and people tag to your photos and videos, right in your browser.

- [Google Photos exporter](https://takeout.legault.me/)
![The exporter walks you through getting your library out of Google, then fixes everything locally in your browser. Try it at takeout.legault.me.](https://legault.me/images/posts/correctly-migrate-away-from-google-photos-to-icloud/google-photos-export.jpg)The exporter walks you through getting your library out of Google, then fixes everything locally in your browser. Try it at [takeout.legault.me](https://takeout.legault.me).

When the exporter finishes, your files are fixed and ready to move: skip ahead to **Moving Your Library to iCloud and Apple Photos** below.

## The Manual Method: Fixing Image and Video EXIF Data With ExifTool

Prefer doing it by hand, or curious what's actually happening to your files? The manual method is the exact same process, one Terminal command at a time.

Takeout doesn't just hand you your files. It strips the EXIF data (dates, GPS locations) from many of them and ships that metadata in separate JSON files, so importing the export as-is scrambles your library's chronology. The six steps below download your library and merge everything back in.

### Step 1: Download all files from Google Photos via Google Takeout

1. Navigate to [Google Takeout](https://takeout.google.com/settings/takeout)
2. Deselect all, and select the Photos archive
3. Download and unzip your archive. If the export comes as several zips, **unzip them all into the same folder**, since photos and their metadata files often end up split across zips.

Inside, each picture and video comes with a JSON file holding the metadata Google stripped out. The next steps merge it back into the files themselves.

**Keep the original zips until you're done.** The commands below rewrite your files in place, and the zips are your backup.

### Step 2: Set up ExifTool

1. Install [ExifTool](https://exiftool.org/), the free tool that will copy the metadata from the JSON files back into your photos and videos.
2. Open Terminal (on Windows, PowerShell) and run the commands in the steps below in order. Replace `<YourTakeoutFolder>` with the path of the `Takeout` folder you unzipped (on Mac, drag the folder into Terminal to fill it in). Subfolders are included automatically.

### Step 3: Rename the JSON files

Takeout names its metadata files inconsistently (`photo.jpg.json`, `photo.jpg.supplemental-metadata.json`, truncated and numbered variants). This renames them all to one predictable form:

**macOS:**

```bash
exiftool -r -ext json '-FileName<${FileName;s/^(.+?\.\w{2,4})\.[^.()]+((?:\(\d+\))?)\.json$/$1$2.json/i; s/^(.+?)\.(\w{2,4})\((\d+)\)\.json$/$1($3).$2.json/i}' <YourTakeoutFolder>
```

**Windows:**

```powershell
exiftool -r -ext json -charset filename=utf8 '-FileName<${FileName;s/^(.+?\.\w{2,4})\.[^.()]+((?:\(\d+\))?)\.json$/$1$2.json/i; s/^(.+?)\.(\w{2,4})\((\d+)\)\.json$/$1($3).$2.json/i}' <YourTakeoutFolder>
```

### Step 4: Fix wrong file extensions

Google often converts photos and videos without renaming them: a `.HEIC` file that's really a JPEG, a `.MOV` that's really an MP4. The mismatch blocks the metadata from being written, so this renames those files (and their JSON) to the correct extension:

**macOS:**

```bash
exiftool -r -q -if '$FileTypeExtension and $FileName !~ m{\.(\Q$FileTypeExtension\E|jpeg)$}i' -p '$Directory/$FileName|$FileTypeExtension' -ext '*' --ext json --ext html <YourTakeoutFolder> | while IFS='|' read -r f ext; do mv "$f" "${f%.*}.$ext"; [ -e "$f.json" ] && mv "$f.json" "${f%.*}.$ext.json"; done
```

**Windows:**

```powershell
exiftool -r -q -if '$FileTypeExtension and $FileName !~ m{\.(\Q$FileTypeExtension\E|jpeg)$}i' -p '$Directory/$FileName|$FileTypeExtension' -ext '*' --ext json --ext html -charset filename=utf8 <YourTakeoutFolder> | ForEach-Object { $f, $ext = $_ -split '\|'; $new = $f -replace '\.[^.]+$', ".$ext"; Move-Item -LiteralPath $f -Destination $new; if (Test-Path -LiteralPath "$f.json") { Move-Item -LiteralPath "$f.json" -Destination "$new.json" } }
```

A few renames like `.heic` to `.heif` are just the container's preferred spelling. They're harmless.

### Step 5: Copy the metadata into your files

The main step. It writes every date, GPS location, caption, tag and people name from the JSON files into the photos and videos themselves. The command is long because it maps each Google field to its standard counterpart; you don't need to read it, just paste it:

**macOS:**

```bash
exiftool -r -d %s -tagsfromfile '%d/%F.json' \
'-AllDates<CreationTimeTimestamp' \
'-AllDates<PhotoTakenTimeTimestamp' \
'-FileModifyDate<CreationTimeTimestamp' \
'-FileModifyDate<PhotoTakenTimeTimestamp' \
'-FileCreateDate<CreationTimeTimestamp' \
'-FileCreateDate<PhotoTakenTimeTimestamp' \
'-QuickTime:TrackCreateDate<CreationTimeTimestamp' \
'-QuickTime:TrackCreateDate<PhotoTakenTimeTimestamp' \
'-QuickTime:TrackModifyDate<CreationTimeTimestamp' \
'-QuickTime:TrackModifyDate<PhotoTakenTimeTimestamp' \
'-QuickTime:MediaCreateDate<CreationTimeTimestamp' \
'-QuickTime:MediaCreateDate<PhotoTakenTimeTimestamp' \
'-QuickTime:MediaModifyDate<CreationTimeTimestamp' \
'-QuickTime:MediaModifyDate<PhotoTakenTimeTimestamp' \
'-GPSLatitude<${GeoDataLatitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLongitude") == 0}' \
'-GPSLatitudeRef<${GeoDataLatitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLongitude") == 0}' \
'-GPSLongitude<${GeoDataLongitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLatitude") == 0}' \
'-GPSLongitudeRef<${GeoDataLongitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLatitude") == 0}' \
'-GPSAltitude<${GeoDataAltitude;$_ = undef if $self->GetValue("GeoDataLatitude") == 0 and $self->GetValue("GeoDataLongitude") == 0}' \
'-Keys:GPSCoordinates<${GeoDataLatitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLongitude") == 0}, $GeoDataLongitude, $GeoDataAltitude' \
'-Keywords<Tags' \
'-+IPTC:Keywords<PeopleName' \
'-Subject<Tags' \
'-+XMP-dc:Subject<PeopleName' \
'-+XMP-iptcExt:PersonInImage<PeopleName' \
'-Caption-Abstract<Description' \
'-ImageDescription<Description' \
'-XMP:Description<Description' \
-api QuickTimeUTC -api LargeFileSupport=1 -api NoDups=1 -m \
-ext '*' --ext json --ext html \
-overwrite_original -progress <YourTakeoutFolder>
```

**Windows:**

```powershell
exiftool -r -d %s -tagsfromfile '%d/%F.json' '-AllDates<CreationTimeTimestamp' '-AllDates<PhotoTakenTimeTimestamp' '-FileModifyDate<CreationTimeTimestamp' '-FileModifyDate<PhotoTakenTimeTimestamp' '-FileCreateDate<CreationTimeTimestamp' '-FileCreateDate<PhotoTakenTimeTimestamp' '-QuickTime:TrackCreateDate<CreationTimeTimestamp' '-QuickTime:TrackCreateDate<PhotoTakenTimeTimestamp' '-QuickTime:TrackModifyDate<CreationTimeTimestamp' '-QuickTime:TrackModifyDate<PhotoTakenTimeTimestamp' '-QuickTime:MediaCreateDate<CreationTimeTimestamp' '-QuickTime:MediaCreateDate<PhotoTakenTimeTimestamp' '-QuickTime:MediaModifyDate<CreationTimeTimestamp' '-QuickTime:MediaModifyDate<PhotoTakenTimeTimestamp' '-GPSLatitude<${GeoDataLatitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLongitude") == 0}' '-GPSLatitudeRef<${GeoDataLatitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLongitude") == 0}' '-GPSLongitude<${GeoDataLongitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLatitude") == 0}' '-GPSLongitudeRef<${GeoDataLongitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLatitude") == 0}' '-GPSAltitude<${GeoDataAltitude;$_ = undef if $self->GetValue("GeoDataLatitude") == 0 and $self->GetValue("GeoDataLongitude") == 0}' '-Keys:GPSCoordinates<${GeoDataLatitude;$_ = undef if $_ == 0 and $self->GetValue("GeoDataLongitude") == 0}, $GeoDataLongitude, $GeoDataAltitude' '-Keywords<Tags' '-+IPTC:Keywords<PeopleName' '-Subject<Tags' '-+XMP-dc:Subject<PeopleName' '-+XMP-iptcExt:PersonInImage<PeopleName' '-Caption-Abstract<Description' '-ImageDescription<Description' '-XMP:Description<Description' -api QuickTimeUTC -api LargeFileSupport=1 -api NoDups=1 -m -ext '*' --ext json --ext html -charset filename=utf8 -overwrite_original -progress <YourTakeoutFolder>
```

It can take a while on a large library, and ExifTool shows its progress as it goes. When it finishes, it prints a summary like `209 image files updated`.

**Warnings along the way are normal:**

- "Error opening file" means a missing `.json`. Live Photo videos and "-edited" copies don't have one (more on those under "Good to know" below).
- "Error converting value for GPS" is the skip for photos with no location data.

**What this command gets right:**

- Photos **and** videos (video dates and location are stored differently)
- Photos with no location data are skipped instead of being geotagged to a wrong spot
- Photos older than 1970
- Photos whose metadata has no "taken" date fall back to their Google Photos upload date instead of getting no date at all
- People and face tags are written as keywords (so they're searchable in Apple Photos and elsewhere) and into the standard "person shown" tag
- File creation and modification dates, so everything also sorts correctly in Finder

### Step 6 (optional): Date the leftover files from their filenames

A few files have no metadata JSON at all (Live Photo videos, "-edited" copies, strays), but many of them encode the capture date right in their name, like `IMG_20190919_123456.jpg`. This fills in dates from filenames for files that still have none and whose name contains a recognizable date, leaving everything else alone:

**macOS:**

```bash
exiftool -r -if 'not $DateTimeOriginal' -if '$Filename =~ /(19|20)\d{6}|(19|20)\d{2}-\d{2}-\d{2}/' '-AllDates<Filename' \
-m -ext '*' --ext json --ext html \
-overwrite_original -progress <YourTakeoutFolder>
```

**Windows:**

```powershell
exiftool -r -if 'not $DateTimeOriginal' -if '$Filename =~ /(19|20)\d{6}|(19|20)\d{2}-\d{2}-\d{2}/' '-AllDates<Filename' -m -ext '*' --ext json --ext html -charset filename=utf8 -overwrite_original -progress <YourTakeoutFolder>
```

Files whose name doesn't contain a date (like `P1050123.jpg` or the video halves of Live Photos) are skipped entirely, so nothing gets a made-up date. To see what's still missing a date afterwards:

```bash
exiftool -r -if 'not $DateTimeOriginal' -p '$Directory/$FileName' -ext '*' --ext json --ext html <YourTakeoutFolder>
```

### Good to know

- The commands are safe to re-run if anything gets interrupted. If ExifTool then complains about a temporary file, delete any file ending in `_exiftool_tmp` and run it again.
- Times are written in your computer's timezone, so photos taken while traveling can be off by a few hours.
- Some files legitimately have no JSON: the video halves of Live Photos (they pair back up with their photo when imported into Apple Photos) and "-edited" copies (duplicates of the originals, safe to delete). Likewise, `.MP`/`.MV` files from Pixel phones are the video halves of Motion Photos and need no fixing.

### Automatically Fix All Your Google Photos

Metadata Fixer is a top tier, well maintained app that runs locally on your computer. It goes further than the commands above, with full timezone support, smarter file handling, and countless refinements across the board. It fixes all your photos and videos in a few clicks.

- [Download](http://metadatafixer.com/?utm_source=tutorial&utm_medium=blog&utm_campaign=launch)
![](https://legault.me/images/posts/correctly-migrate-away-from-google-photos-to-icloud/frame-31.svg)

## Moving Your Library to iCloud and Apple Photos

Whether you used the exporter or the commands above, the rest is the same.

1. Open Photos.app on a Mac and use **File > Import**. Don't drag everything into the app window, the menu import works much better for large libraries.
2. Everything should import well. If some pictures show up at the wrong date, correct them manually with **Image > Adjust Date and Time**.

## Clean Up Your Google Photos Library (Optional)

Only needed if you're keeping Google Photos as a secondary backup.

1. **Let it re-upload everything once.** The Google Photos phone app will recognize all the pictures newly added to your iCloud as new pictures and start uploading them again as duplicates. I couldn't find a way to prevent that, so let it upload the whole library again.
2. **Delete the duplicates.** Once everything is uploaded, navigate to [photos.google.com/search/_tra_](https://photos.google.com/search/_tra_), where pictures are sorted by upload time. Select all the newly added pictures and delete them. Google Photos will not reupload the deleted duplicates, and it will keep uploading new pictures you take on your phone as usual.

---

Source: https://legault.me/blog/creating-a-3d-print-material-in-cinema-4d

- [Index / Blog](https://legault.me/blog.md)
cinema-4d · April 3, 2019

# Creating a 3D Print Material in Cinema 4D + Freebie

![Creating a 3D Print Material in Cinema 4D + Freebie](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/3d-sla-material-banner_web.jpg)

In a material study of an SLA 3D print material in Cinema 4D with Redshift, I analyze real prints to recreate the plastic look, translucence and horizontal layer lines as closely as possible. Follow the process below and download the source files to try it out yourself.

[Download](http://www.mediafire.com/file/n575d28qvtq6qn1/file)

While working at Formlabs, I developed an interest in recreating an SLA (stereolithography) print material in Cinema 4D. SLA prints have interesting features such as small layer lines, subsurface scattering, and translucency that posed a challenge.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/06142018_castable-wax_447.jpg)

*Picture of real SLA print, printed in castable wax resin. Notice the small layer lines and translucency of the print.*

Here is my process in re-creating an SLA print material in Cinema 4D and Redshift.

## Translucency

The first notable characteristic of SLA prints is its translucency. This happens because light penetrates the surface of the print, is then scattered by interacting with the material, and exits the surface at a different point. This results in a lighter color in thin parts of the print and in darker color in its thicker and denser regions.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/fdm-sla.jpg)

*FDM opaque print on left, SLA translucent print on right.*

### Step 1: Subsurface Scattering

In order to achieve this effect in Redshift, I applied subsurface scattering (SSS) to the material. I started off with a completely blank material and only applied a Transmittance Color (the attenuation color) in the Sub-Surface section. I chose purple, but this could be any color you want your object to be. Your print will get its color from the SSS Transmittance Color when light penetrates its surface, and not from the Diffuse Color channel (so set that one to 0).

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/subsurface-scattering.jpg)

*Settings applied to the Redshift material in Cinema 4D.*

I set the Absorption scale to the approximate size of the 3D object in Cinema 4D so light would be able to pass through the entire object and set the Scatter scale to 1.7 to make it appear cloudy inside. Note that SSS behaves very differently based on your lighting setup. A light source placed directly behind your object will make thin edges appear significantly lighter than a front-facing light source, so work with the lights to get your desired effect. In this case, I placed three lights: one directly above the object and two more, one on either side. These are the results so far.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/sss.jpg)

*A default material with Subsurface Scattering applied to a 3D object.*

You can already start seeing the wax-like material with its lighter edges and light absorption properties. The default Reflection channel gives it a really glossy look right now, which we will take care of in later steps.

### Step 2: Back-Lighting/Translucency

Optionally, we can set a Back-lighting/Translucency color to push the thin edges' translucency even further. The color you apply here will be the back-facing diffuse color of the surface, so set it to a lighter version of your desired object's color. This will emulate a cheap subsurface scatter that works well for thinner parts. This effect adds a lot of value in cases where there are paper-thin edges, but for denser objects like the one used in this demo, a true SSS should be used to simulate real light absorption. I've explored setting a light purple to 0.25 opacity to add a very subtle extra translucency to the material.

## Layer Lines

SLA printers create incredibly small layer lines on their prints since they print one layer at a time with a precise laser. They are less noticeable than on DLP or FDM prints, but they can still be seen on macro shots.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/sla-layer-lines.jpg)

*A comparison of SLA and DLP layer lines.*

Those small layer lines also affect the way light reflects on the part. Those tiny bumps reflect light in a less uniform way than a smooth surface would, making it less glossy and more rough.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/bump-map.jpg)

*Light bouncing on an uneven surface.*

### Step 3: Bump/Normal Map

To add this effect to my material, I added a normal map simulating the surface of an SLA print. I used [Alan Warburton's excellent normal map](https://alanwarburton.co.uk/3d-print-simulator/) which also has imperfections representative of what we would get in the real world.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/normal-map.jpg)

*Preview of the normal map.*

Those layers lines really muted the reflections on the print and added significant roughness, even when scaled down to microscopic levels. Since real SLA prints come out of a tank of resin, they are usually covered with a very thin layer of that shiny liquid adding a bit more gloss.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/method-a-slide-removal-tool-under-edge.png)

*Print fresh out of a Form 3, being removed from its build platform.*

During post-processing, parts are also often sanded and coated with an oil to smooth out the surface, bringing back some glossiness and creating a more even finish.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/photo3.jpeg)

*Wet sanded (left) and mineral oil finish (right).*

In order to achieve that, I added 25% of Coating in the Redshift material.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/sss-layer-lines.jpg)

*Layer lines, gloss and SSS applied to a 3D object.*![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/close-up-layer-lines_web.jpg)![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/close-up-layer-lines_cropped.jpg)

*Close up of the layer lines. The scale of the bump map can be adjusted to reflect the size of the object*

## Imperfections

While the SLA printers can create incredibly detailed and precise small parts, no physical object is perfect and no edge or corner has perfect angles. The final step in this material study is to add the same imperfections that you would see on an SLA print.

### Step 4: Rounded Corners

90-degree sharp angles have a very small bevel to them, which is subtle but still affects how light hits the object and corners. I have added a **RS Round Corners** node to my material to emulate a similar bevel. For objects such as the one used in this demo, there is very little difference since, other than its base, there are no sharp corners. You may find this useful with yours.

### Step 5: Scratches

Product photography is often perfect and without scratches. However, there are often cases where it's nice to have them. Objects are also more susceptible to get scratches on their outer edges if they were to have any. I fed a B&W JPG texture of scratches through an **RS Curvature** node to apply them only to edges with a certain angle. I also applied that same texture to my main material's Reflection Roughness map to add a few more imperfections on top of the layer-lines bump map. The result gives a nice subtle yet realistic look to the material.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/close-up-details_web.jpg)

## Conclusion

This experiment was a very fun and challenging one as it pushed me to examine this material's unique properties and use my understanding of Redshift to recreate them. While it certainly isn't a perfect representation of how an SLA print looks and behaves in light, I think it does a good job at mimicking its most notable characteristics for this demonstration.

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/3d-sla-material-banner_web_small.jpg)![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/drame-au-desert_layerlinescloseup.jpg)

Here is a screenshot of the final nodes to make this Redshift material. You can also find the source files and the created Redshift material to download [here](#download-files).

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/material-node.jpg)

I applied that material to different objects and even did a 1:1 comparison with a real picture from [Formlabs.com](https://formlabs.com) You can see below how that material compares itself to a real print.

‍

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/ring-comparison-1-1024x499.jpeg)

*Pave ring printed on the Form 2 at a resolution of 50 microns. Credits to Formlabs.com. Original picture on the left. Render on the right.*![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/cinema4d-castable-makingof-1-1024x555.png)

*Render of a Pave ring*

## Changelog

**Version 2**

- Added Nylon powder material to simulate SLS prints
- Fixed a small error with the normal bump map node
- Assigned the layer line normal map to the object's X & Z coordinates, because on SLA prints you can only see the layer lines on surfaces perpendicular to its build platform.
- Added Tri-planar nodes for texture axis assignment and for better scaling/alignment

**Version 1**

- Material creation

‍

## New Alternative

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/1186262e-677a-43c9-903e-8b9383ec58ff.jpg)

[GSG recently released their own excellent library of 3D printed materials](https://3dassets.greyscalegorilla.com/collections/9abc9d2c-5391-4cde-9412-78758ba3bdbc?categoryPathPrefix=Product+Visualization_3D+Printed+Plastic+Materials), which I highly suggest trying!

## Upcoming

I've been working on creating an FDM print material. So far, I'm having difficulty getting a proper look with normal and displacement maps but will update here once I have it perfected. Here's a screenshot of the latest materials:

![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/frame-20.75x.jpg)![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/frame-30.75x.jpg)![](https://legault.me/images/posts/creating-a-3d-print-material-in-cinema-4d/frame-40.75x.jpg)

---

Source: https://legault.me/blog/minecraft-renders-tutorial

- [Index / Blog](https://legault.me/blog.md)
cinema-4d · August 29, 2015

# How To Make Beautiful Minecraft Renders In Cinema 4D

![How To Make Beautiful Minecraft Renders In Cinema 4D](https://legault.me/images/posts/minecraft-renders-tutorial/reinhart_castle_render.jpg)

A tutorial on how to create beautiful and photorealistic renders of your Minecraft worlds in Cinema 4D. The following tutorial is a demonstration of the core steps I go through to make renders. I obviously add and modify things from one render to the other, but these steps are always the same.

Are you a proud Minecraft server owner? Do you have dozens of amazing builds in your world that deserve nice renders? There are many ways to create beautiful photorealistic Minecraft renders in a short amount of time. Let me show you how I do it!

## A step-by-step tutorial

The following tutorial is a demonstration of the core steps I go through to make renders. I obviously add and modify things from one render to the other, but these steps are always the same.

If something is not clear, please let me know and I will help you. It is my first tutorial and I would appreciate feedback in order to improve it, so every server owner can make beautiful renders. Thank you!

In this tutorial, I use Cinema 4D as it offers in-depth lighting and rendering options, however, the software does cost money. Alternatively, you can try [Chunky](http://chunky.llbit.se/), which is a free Minecraft renderer, but I won’t get into that in this tutorial. You can also use any other 3D modelling package such as Autodesk Maya, 3D Studio Max, or Blender, to follow along this tutorial but the layout may be different.

![Minecraft Castle Render mathieu legault cinema 4d the chunk reinhart](https://legault.me/images/posts/minecraft-renders-tutorial/town_flyby.jpeg)Minecraft Castle Render mathieu legault cinema 4d the chunk reinhart

## 1. Converting world to 3d object

There are many different software you can use to convert Minecraft worlds to.OBJ models, such as [Mineways](http://www.realtimerendering.com/erich/minecraft/public/mineways/), [jMc2Obj](https://github.com/jmc2obj/j-mc-2-obj), [mcobj](https://github.com/quag/mcobj). You can also [click here](http://minecraft.gamepedia.com/Programs_and_editors/3D_Exporters) to see the full list. I use Mineways because the others are all command line programs, whereas Mineways has a user interface and is easier to use.

![mineways](https://legault.me/images/posts/minecraft-renders-tutorial/mineways.png)mineways

**Mineways** is great for its intuitive layout and ease of use. Download [Mineways](http://www.realtimerendering.com/erich/minecraft/public/mineways/), and place the extracted folder on your desktop. Once Mineways is opened, load your world and use the right-mouse-button to highlight the desired area to export. Note that under “File”, there is an option to set a terrain file, which is the Minecraft resource pack to use when exporting. There are already a few resource packs that come with Mineways (the PNGs in the Mineways root folder) but there is a way to add your own.

**To add your own resource pack**, first locate it. It may be in the [.minecraft folder](http://gaming.stackexchange.com/questions/28717/where-is-my-minecraft-folder-on-windows), or in your downloads if you just downloaded it. Once located, open/extract the resource pack and find the “blocks” folder (*[resource-pack]\assets\minecraft\textures\blocks\*). Copy its content to the “blocks” folder inside your Mineways folder. Now simply run “TileMaker.exe” or “TileMaker32.exe” (32bit). It should generate a PNG terrain file called “terrainExt.png”. Rename that PNG or it will get overwritten if you generate a new resource pack. You can now load that terrain PNG in Mineways in “File > Set Terrain File”. My favorite is the [Ovos Redemption](http://www.minecraftforum.net/forums/mapping-and-modding/resource-packs/1238545-x64-1-7-x-1-8-snapshots-ovos-rustic-pack) pack for my renders.

Now we are **ready to export**! Go to file, Export for Rendering, and change the settings as you want, however the defaults are usually what I use. Mineways will export an.OBJ file (your world), three.PNGs (textures) and an.MTL file which links your textures to your world. Put them all in a folder.

**Note:** Mineways may crash if the selected export region is too big. If you want to export huge parts of your world, consider another software. However, you can also export your world region by region, and uncheck the “center model” when exporting with Mineways. This will let you easily put all the pieces back together in Cinema 4D.

## 2. Cinema 4D / 3D software

Once we have our.OBJ model and textures, we’ll need a 3D modelling package in order to render it. I use Cinema 4D as personal preference, but [Blender](https://www.blender.org/) is a great free alternative with tons of tutorials and resources.

Inside your 3D software of choice, import the.OBJ file that was exported using one of the converting tools.

**In Cinema 4D**, click the “File” menu on the right, then “Merge Object”, and select the.OBJ file of your exported world.

![cinema4d_insert](https://legault.me/images/posts/minecraft-renders-tutorial/cinema4d_insert.png)cinema4d_insert

If the texture link is broken, everything will be black like this.

![cinema4d_missingtextures](https://legault.me/images/posts/minecraft-renders-tutorial/cinema4d_missingtextures.png)cinema4d_missingtextures

In order to fix the problem, we must manually select all the material files on the bottom left corner, and change their texture link by clicking on “<<multiple values>>” on the right.

![cinema4d_missingtextures-2](https://legault.me/images/posts/minecraft-renders-tutorial/cinema4d_missingtextures-2-e1440810010309.png)cinema4d_missingtextures-2

A window will open. Select the **world-RGBA.png** texture exported with your.OBJ world. That is the sprite sheet of your world’s textures.

![cinema4d_missingtextures-3](https://legault.me/images/posts/minecraft-renders-tutorial/cinema4d_missingtextures-3.png)cinema4d_missingtextures-3

Now that the textures are linked and our world has become colourful, we must add the transparency to materials for blocks such as water and leaves.

Once again, select all the textures, and on the bottom right panel, click on the “Basic” tab. There will be a list of options to check from. Tick the “Alpha” channel.

An “Alpha” tab will appear. Go in the Alpha tab and link the texture to the **world-ALPHA.png** like in the previous step.

![alphachannel](https://legault.me/images/posts/minecraft-renders-tutorial/alphachannel1-e1440822954225.png)alphachannel

*If you use another software, you may have to manually add the textures too. In that case, dig around and try to link the **color/diffuse channel** and the **alpha** **channel** to the **RGBA png**.

### Realistic Water

We can replace the water with a more realistic looking water. If you used Mineways, all the block types will have their own layer, so **find the “Stationary_Water”** object layer in the right panel.

We can either create a new water material and apply it on the “Stationary_Water” to override the default blue water, or delete the water object completely to add our own. I usually **delete the water layer** completely.

![cinema4d-water-texture](https://legault.me/images/posts/minecraft-renders-tutorial/cinema4d-water-texture.png)cinema4d-water-texture

Then, I use [Infinite Ocean](http://c4depot.com/c4d-plugins/infinite-ocean/) by C4Depot which creates very realistic water with waves, foam, and reflections. However, it increases render time significantly, and the plugin costs money.

**A free and fast solution** is to use the built in water presets that come with Cinema 4D. They can be found in “Create > Load Material Preset” menu just over the textures at the bottom of the screen.

### Lighting

Next we want to **add nice lighting**. The best way to do that is to experiment within your 3D software, but inside Cinema 4D, you can try adding a Physical Sky which usually gives you a nice starting point. Physical Sky gives you a multitude of options letting you set the time, sun intensity, color, haze, etc, however you can stick with the defaults which is a nice warm sunrise.

![addsky](https://legault.me/images/posts/minecraft-renders-tutorial/addsky.png)addsky

You can also add an “Environment” object which adds more haze and atmospheric fog. This is great when you want to hide the horizon, or the cut off region of your world.

### Render Settings

Then, for the **render settings.** If using Cinema 4D, click **CTRL-B** to open up the render settings window, and add **Ambient Occlusion** and **Global Illumination** from the “effect” button on the left.

Ambient occlusion darkens the little cracks and corners, and Global Illumination simulates the bouncing of lights on all the surfaces to make more accurate lighting. These two features will greatly improve the quality of your final result and make it more realistic. They can be found in almost all 3D softwares as well so look around in the render settings for similar options.

Once again, in Cinema 4D, the default settings will usually be enough for our purpose, but feel free to experiment.

![rendersettings](https://legault.me/images/posts/minecraft-renders-tutorial/rendersettings.png)rendersettings

One last important thing to change; **Anti-Aliasing**. This will smooth jagged edges on curved lines and diagonals, and will make your digital image much more realistic. Head over to the **Anti-Aliasing** tab in the **render settings**, and change the settings to “**Best**“.

If you are feeling adventurous, you can add a camera with depth of field, as well as sky textures and clouds, but I usually like to keep it simple.

**Now find a good angle.** It’s important that the limits of the world are not visible in the final render. Move the camera around until the horizon is hidden and then **render**.

**Note:** If you want to add your own sky image in post processing, go in Cinema 4D’s render settings. In the “Save” tab, check “Alpha Channel” and change the image format to “PNG”. This will render the image with a transparent sky to let you add your own later.

## 3. Post Processing

If the “Physical Sky” was used in Cinema 4D, then the render will probably have a warm feel. I like to cool it a bit and saturate the sky/water. I try to keep the picture as realistic as possible, with subtle color correction. I find that exaggerated color grading, lens flares and tilt-shifts are too much. We want to focus on the build, not your Photoshop skills. However, it is up to you to create the image you want so have fun!

![postprocessing](https://legault.me/images/posts/minecraft-renders-tutorial/postprocessing.png)postprocessing

If this tutorial helped you, please comment below and post your own renders! I would love to see them.

## Summary (TL;DR)

1. Get [Mineways](http://www.realtimerendering.com/erich/minecraft/public/mineways/).
2. Export World.
3. Open C4D, and Import the.obj world through the **File** menu in the right panel.
4. Select all the textures and link them to the **world-RGBA.png** that was exported alongside your world.obj.
5. Link all the textures’ alpha channel to the same PNG as the previous step (for transparency).
6. Add a Physical Sky.
7. In the render settings, add Global Illumination, Ambient Occlusion, and change Anti-Aliasing to “Best”.
8. Render.
9. Color Grade and Color Correct