I set up a comprehensive system of Symbols and classes on the Webflow project. Creating a clear design system on this particular platform meant taking cues both from working on Sketch/Figma mockups, and also from React projects.
‍
Documenting my work for handoff and future-maintenance was a significant part of this project. The docs include a style guide, for maintaining consistent visual language.

Because the blog required some complex finangling of the Collections features, I wanted to dive deeper into how I set it up. The basics structure of the blog are three-fold:
   1. Main blog page with cards that link to articles
   2. Simple tag system which can filter by articles containing that tag
   3. Articles can be external (link to another site), or internal (has its own page on the current site)

Accounting for #2 and #3 meant that I needed 3 separate Collections with reference fields between them. So I built Collections for Blog Display Items, Tags, and Article Content. Then, Webflow's Collection Pages and Collection Lists really came in handy.

The main blog page contains a Collection List that dynamically shows all Blog Display Items (external or internal articles) as cards. It also contains a Collection List of Tags, each of which is a button linking to its own Collection Page, that only displays Blog Display Items which contain that tag. This is how filtering works.
‍
---
‍
The biggest challenge was dealing with different behaviors for the cards on the blog page. Cards showing external articles need to link to another site. Cards showing internal articles need to generate a Collection Page containing the article body. Webflow allows both of these kinds of behaviors, but doesn't let you set conditions for them within the same Collection List. The ability to set conditionals is usually pretty useful, so I was bummed to see this limitation.
‍
I ended up getting around it using a third Collection, Article Content. This acts as a "backend" for all internal articles. That way, each one gets its own slug and URL, and can be generated as a Collection Page. Finally, I link to these internal Article Content pages from the respective cards on the main blog page. This lets all the blog cards behave the same—as links to a URL. It's just that external articles will link to another site, while internal articles use the URL generated by the Article Content item.

Overall, this tested my knowledge of how to use linked databases. It's more of a roundabout setup than I'd like, and I had to document it for handoff, but it gets the job done here. Looking forward to gaining more Webflow experience and seeing if there's a better way to get this done.