{"id":712,"date":"2024-03-03T18:04:07","date_gmt":"2024-03-03T18:04:07","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=712"},"modified":"2024-03-03T18:04:09","modified_gmt":"2024-03-03T18:04:09","slug":"15-minute-tutorial-building-a-modal-with-boolean-properties-using-a-figma-design-system","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/15-minute-tutorial-building-a-modal-with-boolean-properties-using-a-figma-design-system\/","title":{"rendered":"15 Minute Tutorial \u2013 Building a Modal with Boolean Properties 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

In this tutorial, I’ll show you an easier way to create components that might have different types of components or patterns in them by creating boolean properties in Figma. Instead of creating multiple components or variants of components, you can create one component with boolean properties and choose between those properties in the design panel. A boolean property lets you hide or show what you want in your component.<\/p>\n\n\n\n

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

This component is a modal that could house several types of content blocks, including text, a two-column block of text, an area a user could drag a file to, or a form. Once you have your modal component built, add some boolean properties. Start by selecting an item in your component that could be shown or hidden, then select the Apply boolean property icon in the Layer section of the Design panel and choose Create property… .<\/p>\n\n\n

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

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

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

In the Create component property dialog box, the Name field will show what the item is named in the Layers panel. Rename if needed, choose True in the Value field, and select the Create property button.<\/p>\n\n\n

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

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

Once you created a property, it shows in the Layer section as a purple pill.<\/p>\n\n\n

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

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

When you’ve created properties for all of the items you want to hide or show, they will show up in the Properties section when you select the component. Here, I’ve applied boolean properties to the supportive text, the two-column block of text that’s called “left & right text”, the file upload area, and the form.<\/p>\n\n\n

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

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

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

Drag an instance of the component to your canvas. When an instance is selected it will show the boolean properties you created as switches. Now you can select the switches to easily turn on and off items in your component.<\/p>\n\n\n

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

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

What follows are examples of the different properties turned on or off to create different modal types in our design system.<\/p>\n\n\n\n

Example 1<\/h3>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

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

Example 2<\/h3>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Example 3<\/h3>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Done!<\/h3>\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":726,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,28],"tags":[],"class_list":["post-712","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\/712","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=712"}],"version-history":[{"count":1,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/712\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/712\/revisions\/727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/726"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}