What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Working with different dev teams over the years, I always explored new ways to improve my design, prototyping & hand-off process to make sure clients and devs are clear on how the product is meant to look and work.

Figma is the design tool I use for design & dev hand-off documentation. In mid-2020, I saw an ad about Framer X and its design integration with Figma, React and Javascript. I was intrigued.

Apparently, the Framer X allows designers build components in the editor's view that can be exported to react for developers to improve development time. It also had some amazing prototyping tools and I was really interested so I created a fictitious project to test out how I can improve better hand-off.

‍

Goal 🎯

Working with different dev teams and projects over the years, I always explored new ways to improve my design, prototyping & hand-off process to make sure clients and developers are clear on how the product is meant to look and how users are meant to interact with it. It's best to always document the nitty-gritty details like states of input fields & buttons, and the big things like page transitions, modal intro and exit movements, etc. I was looking for tools to help improve that process. Figma is the essential tool I use to document and communicate those ideas and for complex animation interactions, I use Adobe after effect.

In mid-2020 I saw an ad about Framer X and its design integration with React and Javascript and I was intrigued. Apparently, the product allows designers to build components in the editor's view but allows those components to be exported in react for developers to improve development time. It also had some amazing prototyping tools and I was really interested so I created a fictitious project to test out how the interaction works how I can improve better hand-off.

‍

Goal 🎯

That's how Herooos came to be. The aim of Herooos was to test out multiple ideas for a landing page of a website by blending typography, button & navigation bar components, patterns, and icon style. Also, I wanted to take advantage of the recent FramerX web & Figma integration and see what kind of prototypes can be created and how those prototypes can be exported to code to developers.

Approach 🛠

First of, I "FED MY EYES 👀", basically went through few hours of exploration making research on common website design patterns, understand how they leveraged white spacing, content real-estate, typography & color to create balance on the UI, and then I drafted out ideas and also tried to create unique design styles that still follow common design principles to create balance on the UI.

Next, I created a style guide for the project that consisted of colors, typography, and button style which evolved over time as I created more and more design explorations. I also did a bit of exploration of patterns to see how best I can relay that on the UI.

‍

Solution 🎨

I started off by creating simple styles common to major web interfaces and then as I kept on designing I grew more confident to explore uncharted territories 😅. Created designs in Figma and exported to Framer X.

‍

‍

Being my first time in Framer X, I had to get used to certain nuances like how primarily frames are used majorly to group elements, create components, masks, etc and creating a graphic component like shapes and vectors, you'll have to import a "Graphics component" 😅, it wasn't bad but just felt unnatural at first because that's not how Xd, Figma or Sketch are built but it took some getting used to.

Also realized how the constraints created in Figma affected how things moved around. Little by little I started to get the hang of it and I created my prototypes, exported, created a branding video using Adobe After effects & voila 🎉. Herooos is ready to be launched.

‍

‍

Results

‍

‍

‍

What I learned

The change in design experience was a big deal for me because, when I design, I am basically testing out different ideas and I'm changing, removing, and adding stuff really fast and Figma was the best tool for this process but for Framer X the design experience seemed like I had to do a lot of relearning and even the Figma import wasn't seamless.

Please note: This research was done mid-2020 and I'm sure the Framer X team has done a lot of updates to improve the product because I see a lot of discussions around it. This is not in any way to shame the product.

Will I be going back?

There's a possibility because working with the prototyping interaction there were a lot of amazing features I really was excited to try out and will like to give a second shot at it if I need to.

Regardless, It was an awesome learning experience and I'm looking forward to the updates Framer X will make in the future.

Till next time, see you as we keep building products for the next billion users.

‍

‍

‍

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.