{"id":694,"date":"2024-03-03T17:12:41","date_gmt":"2024-03-03T17:12:41","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=694"},"modified":"2024-03-03T17:12:42","modified_gmt":"2024-03-03T17:12:42","slug":"15-minute-tutorial-building-a-chat-context-menu-using-a-figma-design-system","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/15-minute-tutorial-building-a-chat-context-menu-using-a-figma-design-system\/","title":{"rendered":"15 Minute Tutorial \u2013 Building a Chat Context Menu Using a Figma Design System"},"content":{"rendered":"\n
Welcome to my quick and informative 15-minute tutorial series. This series of articles will teach you the process of building effective and visually appealing styles and components in Figma using a prebuilt design system. In no time, you’ll gain hands-on experience in leveraging Figma’s powerful features to streamline your design workflow, while expanding your knowledge of design systems. For this series, I’ll be using the Figma design system that was built at my current job, but you can use any number of Figma design systems<\/a> to build your components.<\/h5>\n\n\n\n
These tutorials assume you have basic knowledge of Figma.<\/h5>\n\n\n\n

 <\/p>\n\n\n\n

Step 1<\/h3>\n\n\n\n

Draw a frame and decide whether you want a border radius on it. Our design system has number tokens we use for padding, spacing, and border radius. Here, I’ve chosen spacing-xxs, for a border radius of 4px.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 2<\/h3>\n\n\n\n

Next I applied auto layout by pressing Shift + A with padding of 24px on the left and right and 16px padding on the top and bottom. Then I applied a drop shadow on the frame by choosing the + icon in the Effects panel.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 3<\/h3>\n\n\n\n

Our design system contains icons, icon links, and icon links with labels. I chose the icon link with a label from the Assets panel and dragged it to the frame.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 4<\/h3>\n\n\n\n

Duplicate your component so you have the amount of links you need in your context menu.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 5<\/h3>\n\n\n\n

Use Swap instance by selecting the dropdown next to the icon in the Design panel to change the icon to what you want. This assumes you have created these icon components previously.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 6<\/h3>\n\n\n\n

Here you can see I’ve swapped the icons and renamed the links.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 7<\/h3>\n\n\n\n

Now make sure your icons and links are using the color styles or variables created in your design system. One of the links in our context menu is destructive, so I applied an error (red) variable to the Delete icon and link.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 8<\/h3>\n\n\n\n

Below the links, we include a user icon and text that tells the user how many people are in the chat. I dragged an icon to the canvas from the Assets panel, and wrapped the icon and text in another Auto layout frame that uses a surface fill color.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Step 9<\/h3>\n\n\n\n

We also include a link icon that opens and closes the context menu. Drag a link or button from your Assets panel to the canvas and create another Auto layout frame around the link or button, the text and the icon. Below you see I’ve named my new frame “button row”.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Done!<\/h3>\n\n\n\n

Below is our finished chat context menu with hover and active states on the icon links.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Happy creating, and stay tuned – more tutorials are coming soon!<\/p>\n\n\n\n

 <\/p>\n

\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722<\/p>\n

Comment below to share your thoughts. \ud83d\ude42<\/p>\n

Learn more about design systems<\/a><\/p>\n

I’m a designer with 20 years of experience in web, eLearning and visual design. Follow me:<\/p>\n\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n","protected":false},"excerpt":{"rendered":"

Welcome to my quick and informative 15-minute tutorial series. This series of articles will teach you the process of building effective and visually appealing styles and components in Figma using a prebuilt design system. In no time, you’ll gain hands-on experience in leveraging Figma’s powerful features to streamline your design workflow, while expanding your knowledge […]<\/p>\n","protected":false},"author":1,"featured_media":710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,28],"tags":[],"class_list":["post-694","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system-fundamentals","category-figma"],"_links":{"self":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/comments?post=694"}],"version-history":[{"count":1,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/694\/revisions"}],"predecessor-version":[{"id":711,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/694\/revisions\/711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/710"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}