How I built my portfolio (christinfrohne.com) from scratch in Figma and brought it to production 🧵

by Christin Frohne

1. First, I sketched my ideas in Figma and then sought inspiration, asking: what can I improve? How do others tackle specific issues? Great inspirations: rauno.me, nairo.framer.website and amelieschlueter.com ✨ 2. For the typeface and icons, I used Geist by Vercel—it's amazing! For the color theme, I just chose shades that appealed to me, leaning towards a slight yellow theme. 3. Once I was happy with the overall design, I created the content for each page. With Chat GPT, I refined the texts, and yes, I was often disagreeing with the AI version, wanting to keep it human and “me” while avoiding grammar and typo mistakes. 4. I used the amazing Figma to HTML plugin to transfer my designs to Framer. I’m still mind blown by how smoothly that worked! 🧠💥 In Framer, I spent quite some time on optimizing images for breakpoints and recreating components (unfortunately they were not transferred from Figma) 5. Next, I purchased a domain on GoDaddy and connected it with Framer. Super smooth! Unfortunately the Framer basic plan does not include redirects. So my previous custom framer domain now led to an error. Luckily I didn’t share it widely yet. 6. Meanwhile, I shared the page with close contacts, gathered feedback, and went through numerous iterations on the content. 7. Then it was finally launch time. Such a relief to see this project go live. I spent many long nights on it, and at some point, it was hard to let it go. I'm still amazed at how easy this process was. Tools like Framer are changing everything! And I couldn't imagine life without Figma anymore (maybe I spend too much time there 😆) If you haven't seen my portfolio yet, check it out and let me know what you think 😊